【譯】2015: 前端工具現狀

原文：http://ashleynolan.co.uk/blog/frontend-tooling-survey-2015-results
譯者：@lizheming

---

本文數據更新至 2015年09月09日。

因爲當我發出這篇文章後，問卷又增長到了 1000 份（編寫這篇文章的時候仍是 649 份），因此我特意更新了一下文章的數據。比較有趣的事是雖然問卷的份數增長了，可是對以前的統計結果彷佛沒有特別大的影響。

---

幾周以前，我發佈了一份前端工程師的問卷調查來統計前端工具的使用狀況。個人目的很簡單，就是想要知道一下目前前端社區的知識和實戰水平。我常常可以聽到 「Sass 是最佳的預處理器選擇」，「xxx JS 框架是的最新並且是最棒的！」 諸如此類的話語，可是我特別想知道當我詢問他們知道什麼工具並在他們的項目中使用什麼工具的時候，他們的第一反應是什麼？

在統計數據以前，我對問卷的數量不抱有特別大的指望。畢竟你們都很忙，沒有福利純義務的讓你們填一份問卷聽起來比較困難。然而看到問卷份數的時候我整我的都驚呆了，竟然有 1044 份！遠遠超過了個人預期！真的很是感謝那些花時間幫忙填寫這份問卷的人，謝謝！

長話短說下面咱們就展現下最後的問卷統計結果吧。

---

事先聲明

這些結果僅僅表明了業界一小撮前端工程師的狀況，所以它有可能沒法表明如今業界的情況，頂多算是將來的一種趨勢吧。若是你不巧錯過了問卷調查的時間，這也沒有關係。我將在幾周以後從新開啓這份問卷而後在本文中更新數據。

問題一：預處理器

我問的第一個問題是「你用什麼預處理器？」。

經常使用的預處理器基本上都在答案中有了，不得不指出的是我之因此沒有把 PostCSS 放在列表中是由於 PostCSS 做爲後處理器不少使用的人每每也會配合使用其它的預處理器在他們的工做中，這樣會引發選擇強迫症的困擾。我在問卷中指出，若是你真的是隻使用 PostCSS 的話，那你就選擇「其它」吧。

下面是這道題的統計結果：

預處理器	得票數	百分比
Sass	689	66.00%
Less	140	13.41%
Stylus	44	4.21%
不使用預處理	141	13.51%
其它	30	2.87%

如你所見， Sass 得票 66% 是你們的預處理器第一選擇。僅有 13.5% 的人選擇了不適用任何預處理器，這不得不說明咱們已經愈來愈接近「預處理器使用峯值」了。這裏我想要強調一下，CSS 預處理毫無疑問是前端工程師必備技能，不少項目和工做中都須要用到它，若是你尚未學過它趕快去補習一下吧！另外在投其它的票中，有 21 票（總數的 2%）實際上是使用 PostCSS 的。

---

問題二 ：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 代碼。

若是其餘人有任何的疑問或者想用數據分析其餘的方面，歡迎在 Twitter 上聯繫我！固然我還要說一遍，若是你錯過了此次的問卷填寫也沒有關係，我將在以後幾周再開一次這個問卷並在本文中更新數據。咱們的問卷地址是：http://ashn.uk/survey-tooling