2017年前端開發工具趨勢

出處：CSS88.com

譯者： 愚人碼頭

原文：https://www.sitepoint.com/front-end-tooling-trends-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 社區如何評價哪些工具集，這些知識將終生受用。也許有一天，你甚至會編寫出一個高大上的工具，也成為各種框架中的一員。

感謝 Ashley Nolan 的前端工具調查和結果分析。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！