2015: 前端工具現狀，看完真的感覺有好多要補的
這是一篇來自w3ctech的譯文。
譯文地址 http://www.w3ctech.com/topic/1513 原文地址 http://ashleynolan.co.uk/blog/frontend-tooling-survey-2015-results
結果是來自一份調查的數據。
主要調查了這么幾個問題：
問題一：預處理器
我問的第一個問題是“你用什么預處理器？”。
常用的預處理器基本上都在答案中有了，不得不指出的是我之所以沒有把 PostCSS 放在列表中是因為 PostCSS 作為后處理器很多使用的人往往也會配合使用其它的預處理器在他們的工作中，這樣會引起選擇強迫癥的困擾。我在問卷中指出，如果你真的是只使用 PostCSS 的話，那你就選擇“其它”吧。
| 預處理器 | 得票數 | 百分比 |
|---|---|---|
| Sass | 689 | 66.00% |
| Less | 140 | 13.41% |
| Stylus | 44 | 4.21% |
| 不使用預處理 | 141 | 13.51% |
| 其它 | 30 | 2.87% |
問題二 ：PostCSS 和 Rework
下一個問題，我想要看看到底有多少工程師聽過“后處理器”工具，例如 PostCSS 或者 Rework。所以這道題我的問題是：“你是否曾聽說過下面列出的 CSS 處理工具？”。
這是這道題的結果
| 聽/看過 | 偶爾用 | 常用 | 從沒聽過 | |
|---|---|---|---|---|
| PostCSS | 53.64% (560) | 10.34% (108) | 8.91% (93) | 27.11% (283) |
| Rework | 21.84% (228) | 2.30% (24) | 0.86% (9) | 75.00% (783) |
從原始數據中我們可以知道，有 72.89% 的人是知道或者用過 PostCSS 的，對比之下 Rework 只有 25% 的人。兩個工具都只有極少的一部分人會經常使用他們。
分析這個數據我們可以知道，有 269 票（超過 25%）的人既沒有聽過 PostCSS 也沒有聽過 Rework。相比較之下，有 95 票（9.1%）表示他們經常使用這兩款工具中的至少一種。
我認為這個結果反映出了后處理器領域在前端界還是個比較新的領域，我希望在將來能看到這個數字會飛鼠增長。
問題三：自動化工具
下一個問題是我最感興趣的——“你更喜歡在你的工作中使用哪款自動化工具？”。
我們先看一下 npm 的下載數量，Grunt 的下載量是 145 萬/月，Gulp 則是 134 萬/月。從下載使用量上來看，這兩者似乎是差不多的，不過從問卷的數據來看，用 Gulp 代替 Grunt 似乎成了一種趨勢。
讓我們來看看問卷結果吧：
| 自動化工具 | 得票數 | 百分比 |
|---|---|---|
| Gulp | 488 | 46.74% |
| Grunt | 274 | 26.25% |
| NPM | 40 | 3.83% |
| Broccoli | 13 | 1.25% |
| Other | 50 | 4.79% |
| 不使用任何工具 | 179 | 17.15% |
令人驚訝的事，Gulp 獲得了 46.7% 的投票而 Grunt 只有 26.3%，這說明大家越來越喜歡使用 Gulp 了。另外只有 17.2% 的人說他們不適用任何自動化工具，說明大部分前端開發人員已經意識到了自動化構建工具的好處并將其運用在項目和團隊中。
問題四：JS 庫和框架
另外一個我比較感興趣的問題是現在最流行的 JS 庫和框架是什么，下面是結果：
| 聽/看過 | 偶爾用 | 常用 | 從沒聽過 | |
|---|---|---|---|---|
| jQuery | 1.7% (18) | 6.8% (71) | 91.5% (955) | 0% (0) |
| Underscore | 33.4% (349) | 19.2% (200) | 38.6% (403) | 8.8% (92) |
| Backbone | 58.1% (606) | 21.6% (226) | 18.6% (194) | 1.7% (18) |
| AngularJS | 36.4% (380) | 34.9% (364) | 28.5% (298) | 0.2% (2) |
| Ember | 76.8% (802) | 15.6% (163) | 4.6% (48) | 3% (31) |
| React | 59.6% (622) | 21.8% (228) | 15.7% (164) | 2.9% (30) |
| Polymer | 70.5% (736) | 12.2% (127) | 3.3% (35) | 14% (146) |
| Knockout | 67.9% (709) | 10.4% (109) | 5.5% (57) | 16.2% (169) |
沒有懸念 jQuery 得到了 91.5% 的最高票數，并且這只是常用它的人。不得不說它是所有庫里面影響最深遠的一個了。數據還顯示，有 28.5% 的開發者經常使用 AngularJS，18.6% 的人常用 Backbone，15.7% 的人常用 React。
讓我們撇開 jQuery 和 Underscore 兩個庫看看這些 MV* 框架的數據，有超過 50%（531票）的人至少使用其中一款框架。
題外話，之后我重開這個調查問卷的時候我會再問一個“有多少開發者開始使用 ES6(ES2015) 了？”我相信這個會有很大的增長空間，并且我很好奇這個問題的具體現狀。
問題五：你在你的主要項目中使用哪款 JS 庫/框架
這題我問的是：“你在你的主要項目中會使用哪款 JS 庫/框架？”。這題因為是后面加上去的，所以只有 467 個投票，這個或多或少會影響最后的統計。下面是統計結果：
| 得票數 | 百分比 | |
|---|---|---|
| 只用原生不用庫 | 52 | 11.13% |
| jQuery | 264 | 56.53% |
| AngularJS | 72 | 15.42% |
| React | 38 | 8.14% |
| Ember | 15 | 3.21% |
| Backbone | 11 | 2.36% |
| Underscore | 7 | 1.50% |
| Polymer | 2 | 0.43% |
| Knockout | 6 | 1.28% |
| 其它（請指出） | 0 | 0.00% |
即使在投票總數少了一半的情況下，jQuery 也憑著 56.53%（264票）的高票拿到了最常使用庫的寶座，緊隨其后的是 AngularJS，有 15.42%（72票）。
因為這到底的總票實太少了，我也不想對這道題的數據進行太多的預測分析。但是 jQuery 的高票仍讓我比較感興趣，我相信隨著 ES2015 的普及 jQuery 的份額會慢慢降低，大家都會轉而使用原生或者一些小而美的庫。
問題六：JS 模塊加載器
模塊加載器我自己也使用過一段時間，不過我比較想知道是否所有的前端工程師們也都會使用它，如果是的話他們會選擇使用哪款工具？所以這道題的問題是：“你是否在你的工作中使用過一款 JS 模塊加載器？”
下面是這道題的統計結果：
| 模塊加載器 | 得票數 | 百分比 |
|---|---|---|
| 不使用加載器 | 538 | 51.53% |
| Browserify | 185 | 17.72% |
| RequireJS | 142 | 13.60% |
| webpack | 120 | 11.49% |
| JSPM | 30 | 2.87% |
| 其它 | 29 | 2.78% |
數據可以看出，48.47% 的開發者已經開始使用模塊加載器管理他們的依賴了。其中 17.7% 的人使用的是 Browserify，13.6% 的人使用 RequireJS，11.5% 的人使用 webpack。webpack 最近得到了高度的關注而且我們可以看到數據上其實 webpack 并沒有差前兩名多少。當然在 ES2015 普及之后數據將如何變化我也是非常關心的。
不管怎么說看到大家都在使用模塊加載器我還是很高興的，當然我也喜歡在未來那些不適用加載器的人會越來越少。
問題七：JS 單元測試
我一直很好奇是不是所有的人都會對他們的 JS 代碼或者項目進行單元測試？所以這道題我的問題是：“在你的項目中你使用什么單元測試工具進行測試？”。
下面是統計結果：
| 工具 | 得票數 | 百分比 |
|---|---|---|
| 不使用測試工具 | 615 | 58.91% |
| Mocha | 161 | 15.42% |
| Jasmine | 159 | 15.23% |
| QUnit | 35 | 3.35% |
| Tape | 20 | 1.92% |
| Jest | 11 | 1.05% |
| Karma | 6 | 0.57% |
| Intern | 10 | 0.96% |
| 其它 | 27 | 2.59% |
數據可以看出占大頭的是不使用任何測試工具，占了 58.91%，數據說明有恨大一部分人在項目中忽視了單元測試這一環節，雖然它真的很重要。在其它一些使用單元測試工具的投票中，大部分人選擇了 Mocha(15.42%) 或 Jasmine(15.23%) 這兩款工具。總的說來就是前端工程師在 JS 單元測試這塊有一定的差距。
問題八：其它工具
最后一個問題列舉了一些包管理和項目管理里常用的工具，然后我問的是：“這里哪些工具你曾用過？”。
下面是統計結果：
| 聽/看過 | 偶爾用 | 常用 | 從沒聽過 | |
|---|---|---|---|---|
| Bower | 23.75% (248) | 26.44% (276) | 47.89% (500) | 1.92% (20) |
| Yeoman | 37.45% (391) | 30.56% (319) | 22.13% (231) | 9.86% (103) |
| Ender | 30.36% (317) | 1.92% (20) | 0.86% (9) | 66.86% (698) |
| NPM | 6.80% (71) | 17.91% (187) | 71.07% (742) | 4.22% (44) |
大家的主要使用工具基本上是 Bower 和 NPM，甚至有很大一部分人沒有聽說過 Ender。而我認為我用過的最棒的一個工具 Yeoman 的普及度也比較低，只有 22.13% 的人經常用，將近 10% 的人沒有聽說過它。在我的經驗里，它能讓項目變的更加簡單，項目中使用它是非常有價值的。
總結
總的說來，還是有很大一部分人在工作中使用前端工具的。當然如果你熟練使用 JS, CSS 的那些腳手架工具，你一定是他們當中的佼佼者。另一方面來看，JS 測試工具的普及程度還比較低，唯一的解決辦法就是向大家普及如何在項目中使用和遷移這些工具，當然最重要的是如何編寫可測試的 JS 代碼。