2017年前端開發工具趨勢

你有兩年以上的前端開發經驗嗎？你會用 Sass 和 Autoprefixer 等高級的CSS輔助技能嗎？你的 JavaScript 知識是否融匯貫通，你是否喜歡使用 Gulp ， npm 和 jQuery ？若是是這樣，根據 Ashley Nolan 的前端問卷調查，你是一個典型的前端開發工程師。

 

 

01謊話，該死的謊話，統計數字和調查問卷

 

謊話，該死的謊話，統計數字（英文：Lies, damned lies, and statistics），是一句著名的西方諺語。主要描述數字的說服能力，特別是用來諷刺一些使用統計數字支持、但毫無說服力的分析報告，以及人們傾向於貶低那些不支持其立場的統計結論。 維基百科

 

諸如此類的調查有助於你發現新工具和你的知識短板。至本文撰寫時，本次問卷調查收到了5,254份答覆，這是比大多數民意調查更具備樣本價值。可是，調研結果是否表明真相仍是應該抱審慎態度。。。

 

全球性的統計結果

 

此次問卷調查是全球性的，但將主要來自英語國家。 在其餘地方開發或使用的流行工具可能被忽略。

 

開發人員知識

 

本次問卷調查呼籲經驗豐富的開發人員對調研問題有深入理解而且有時間，有興趣去完成本次調查。

 

83％ 的受訪者有兩年或兩年以上的前端技術經驗，只有 5％ 的受訪者不到一年前端經驗：

 

 

 

具有較低前端技能的開發人員不太可能完成本次問卷調查，所以結果可能會相應偏離。

 

意見和偏見

 

受訪者被要求判斷本身的水平。有些人可能比較謙虛，有些有選擇困難綜合症。有些人可能高估了本身的水平，由於他們多是一羣新手程序員團隊中惟一前端開發人員。自我偏見的誤差能夠被平均，但沒有辦法證實。

 

過去的行爲不表明將來的趨勢

 

調查結果突顯了開發人員已經使用的工具。這並不意味着這些工具是有用的，能夠節省時間或將在未來的項目中使用。

 

 

02CSS

 

63％的開發人員將他們本身的CSS知識評爲高級或專家水平：

 

雖然 CSS 是一個看似簡單的 屬性 和 值 的鍵值對集合，可是 CSS 是衆所周知地難以掌握。 CSS3引入了一系列新效果，而且愈來愈難以掌握全部的知道。例如，我對新的 CSS網格模塊 知之甚少，還有當開發 Flexbox 佈局時經常須要翻閱手冊（或隨機嘗試性的使用各類屬性和值）！

 

10％的受訪者認可不到一年的開發經驗，卻聲稱已經掌握高級的CSS知識！我懷疑他們很快就會意識到，懂的越多，意味着不懂的也就越多！

 

CSS 預處理器

 

超過 63％ 的受訪者使用 Sass – 無可爭議的預處理器冠軍。8％的受訪者還使用 PostCSS，雖然它一般與其餘預處理器結合使用以提供有用的功能 – 如AutoPrefixer（ 65％ 的受訪者採用）。

 

近 14％ 的受訪者不使用預處理器，而更喜歡使用原始 CSS 代碼。當你認爲它是最簡單的（和最好的）開始前端開發的方式時，這個比例彷佛有點低。若是 86％ 的開發人員使用 CSS 預處理器，我預計平均每一個網站的CSS文件請求應該低於7.2個。

 

近 70％ 的受訪者嘗試過 Less ，19％ 的受訪者嘗試了 Stylus 。80％ 從未據說過 Rework。

 

CSS 命名方案

 

46％ 的受訪開發人員使用命名方案，可是對於那些將 CSS 水平自我評價爲高級或專家級別的人來講，這一比例上升到 57％ 。

 

最受歡迎的選擇是 BEM ，佔40％，其次是 CSS模塊（CSS Modules）（16％），OOCSS（15％）和 SMACSS（13％）。

 

其它CSS工具

 

當前 39％ 的項目中正在使用 Modernizr 。這彷佛使人驚訝，由於它的主要用途是兼容大部分已經被棄用的舊版本IE。（Microsoft已於2016年1月中止支持IE10及如下版本。）

 

14％ 的受訪者使用 Stylelint 來檢查CSS有效性。這彷佛很低，但最流行的IDE和編輯器有一些相似的 CSS 檢查，因此可能沒有必要。

 

23％ 的開發人員不使用任何CSS工具或命名方案。

 

 

03JavaScript

 

若是你認爲 CSS 的各類工具已經很混亂了，歡迎來到迷人的 JavaScript 世界！

 

JavaScript 開發人員比較謙虛，51％ 的受訪者認爲本身的JavaScript 知識達到了高級或專家水平：

 

 

 

庫和框架

 

儘管有相關性的質疑，超過 99％ 的開發人員在某些時候使用 jQuery，而且 31％ 的受訪者認爲對不少項目來講 jQuery 是必要的。70％ 的受訪者在當前項目中繼續使用 jQuery ，這與 W3Techs 觀察到的數據類似：

 

 

框架狀況更使人困惑：

 

• 已有 38％ 的現有項目採用了React。然而，只有 29％ 的開發人員使用它感到溫馨，18％ 的受訪者認爲它是必要的。只有0.1%的網站被發現正在使用React，但請記住，調查結果是從前端開發人員收集的 – 而不是全部的Web開發人員。

• 有 25% 的項目使用 Angular 1，雖然只有8%的人認爲它是不可替代。Angular 2則相對受冷落，只比8%多一點。只有3%的人在多數項目中使用它。

• Vue.js 已經被 10％ 的項目採用，但少於 6％ 的開發人員對框架感到溫馨，3％ 認爲它是必要的。

 

對於明年的問卷調查，這個問題可能有用：「你是否放棄了一個框架或者在項目中切換框架？

 

儘管有大量的JavaScript專家，只有 21％ 的人認爲框架不是必須的，並樂意編寫原生代碼。這是一個使人擔心的統計數據嗎？30％ 的開發人員認爲他們的框架抽象技能集能夠知足他們的所有需求？

 

任務執行器和模塊打包工具

 

Gulp是最大的贏家，接近 44％ 的開發人員在使用。然而，更簡單的 npm scripts 腳本在2016年增長了 23％ ，達到 26％ 。

 

Grunt 已經失去了優點，跌落到 12％。另外，9％ 的受訪者選擇了不使用任務運行器。

 

那些使用模塊打包工具在2016年增長了 20％，達到 68％ 。 Webpack 是最爲流行，佔 31％ ，Browserify 爲 11％ ，RequireJS 爲 8％ 。

 

我很驚訝，「其餘」模塊打包工具佔不到 4％，當有幾個任務運行器插件能夠更簡單的管理依賴關係，例如 gulp-deporder 。也許由於每一個開發人員都在使用JavaScript 轉譯器…

 

ES6到ES5的轉譯器 （transpilers）

 

62％ 的開發人員正在使用諸如 Babel 之類的工具，將簡潔的 ES6 代碼轉換爲舊版瀏覽器支持的 ES5 代碼。

31％ 的人據說過可能性，但沒有使用工具，和 7％ 從未據說過這個詞。

 

這個數字彷佛至關高。Internet Explorer 和老的應用程序不支持最新的 JavaScript 語法，可是若是您要編寫 ES6 代碼，爲何還要支持他們呢？

若是你確實須要支持 IE11 及如下版本，編寫 ES5 代碼不是更容易嗎？

 

其餘JavaScript工具

 

41％的開發人員使用 ESLint ， 19％ 使用 JSLint 和 14％ 使用 JSHint 來檢查他們的代碼的有效性 – 例如缺乏括號，省略分號，格式縮進等。

 

23％的受訪者不使用代碼檢查工具 – 雖然，也有可能他們依靠他們的文本編輯器或 IDE 來發現最嚴重的語法錯誤。

 

使用測試工具的用戶在一年中增加了 12％ ，達到了 52％ 。

歷史上，JavaScript 測試一直是一個挑戰。

 

諸如測試驅動開發（TDD）等技術能夠捕獲邏輯問題，但不能解決異步事件遇到的問題，例如當 UI 在特定瀏覽器中執行某種意外操做時。

 

幸運的是，行爲驅動開發（BDD）的可能性已經出現，以檢查在真實的瀏覽器中的活動，並使前端測試更具可行性。 最流行的系統有：

• Mocha – TDD/BDD (23%)

• Jasmine – BDD (17%)

• QUnit – TDD (4%)

• Jest – TDD/BDD (3%)

• Ava – TDD/BDD (2%)

 

最後，有 94% 的受訪者使用 npm – Node.js 的包管理器。出乎意料，有 32% 曾經使用過 TypeScript 。

 

 

04你在2017年應該使用什麼？

 

關於 CSS，Sass 的知識，PostCSS 和 BEM 很明顯是必要的。也就是說，開發的多樣性很廣。我建議你研究一些預處理器和命名方案，以便了解每一個工具能夠實現什麼 – 即便是你選擇不使用它們。

 

JavaScript 方面的工具不太好說。有一些明顯的特徵和趨勢：

• Node.js 和 npm 將變得相當重要，由於你採用的工具記得上都是 Node.js 和 npm 實現管理的。

• Gulp 和/或 Webpack 也值得嘗試一下。

• 瞭解ES6，即便您仍然在向後兼容的 ES5 項目上工做。

 

我從不羨慕那些嘗試爲新項目選用類庫或框架的人。從調研結果來看，jQuery是明顯是最受歡迎的。然而隨着 IE 的消亡，jQuery 的跨瀏覽器支持變得沒那麼重要，而且許多功能已經和瀏覽器原生 API 和 CSS 重複。

 

你能夠選擇一個框架，如 React，由於它很受歡迎 – 但這並不表明它就適用於你的應用。即便 React 將最終被更好，更優秀的東西取代。

 

個人建議：從衆多框架中挑選某一個以前，先學習HTML，CSS，JavaScript 和瀏覽器開發的基礎知識。不管 JavaScript 社區如何評價哪些工具集，這些知識將終生受用。也許有一天，你甚至會編寫出一個高大上的工具，也成爲各類框架中的一員。

 【我有一個前端學習交流QQ羣：328058344  若是你在學習前端的過程當中遇到什麼問題，歡迎來個人QQ羣提問，羣裏天天還會更新一些學習資源。禁止閒聊，非喜勿進。】