大概一個月之前，我啟動了2016 Front-End Tooling Survey，截止到今天，共有4715名開發者參與了該調查，這裡要鄭重感謝下所有參與的同志。與上一年的調查相似，本調查目的為發現前端開發者們到底在他們的技術體系中使用怎樣的技術，最終對於整個前端社群的潮流風向有一個總覽體現。
Q1-總體前端開發經驗
第一個問題相當直接，就是你已經在前端技術棧中摸爬滾打了多久？結果如下:
| Answer | Number of Votes | Percentage |
|---|---|---|
| 0-1 Year | 232 | 4.92% |
| 1-2 Years | 589 | 12.49% |
| 2-5 Years | 1,508 | 31.98% |
| 5-10 Years | 1,323 | 28.06% |
| 10-15 Years | 673 | 14.27% |
| Over 15 Years | 390 | 8.27% |
在上表中可以發現，大部分的參與者表示它們在前端之路上走了2~5年或者5~10年，換言之，超過60%的開發者有2~10年的經驗。另外，可以發現5年之內的開發者與5年之上的開發者各佔一半，這一點表明本調查的物件分佈較為平均。
Q2-CSS Knowledge
第二個問題是關於參與者們如何估算他們自己的CSS技能熟練度，這個問題還是挺主觀的，不僅依賴於參與者本身所處的技術氛圍，還受到自身謙虛程度的影響。原問題是：你如何給自己的CSS以及相關技能評分？結果如下:
| Level | Number of Votes | Percentage |
|---|---|---|
| Beginner | 78 | 1.65% |
| Novice (between Beginner and Intermediate) | 424 | 8.99% |
| Intermediate | 1,243 | 26.36% |
| Advanced (between Intermediate and Expert) | 2,203 | 46.72% |
| Expert | 767 | 16.27% |
表中結果可以看出，大概89.36%(4213)的參與則覺得他們對於CSS的掌握長度在中級及以上。這個結果可以從多個維度解析，一方面可以看出雖然不少開發者在前端上涉足時間不多，但是他們覺得對於CSS已經能夠較好的掌握。另一方面這也反映了相較於JavaScript與HTML，CSS會更易於掌握一點。不過我覺得也很有可能不少的開發者尚不能真正理解CSS的紛繁複雜之處，或者受不能分清其語法與我們真實應用中的方法論之間存在的一定差異。
Q3-CSS Processor Usage
本問題為你使用哪個CSS處理工具，我們在去年也問過這個問題，當時Sass是最著名的CSS處理工具，其在今年仍然獨佔鰲頭，遙遙領先。而與之相對的，使用Less的開發者數量有了較大的回落。在今年的統計中我們加入了PostCSS，大概有8.31%的開發者會使用PostCSS相關的技術，這個比我們預期的略低，不過估計是因為很多人將其與其他處理工具混合使用而忽略了它的存在。另外，在下面的結果中我們可以看出，不使用任何CSS處理工具的開發者數量也在逐年減少，說明掌握合適的CSS處理工具的用法已經日漸成為現代前端開發者的必備技能之一。
| Preprocessor | Number of Votes | Percentage | % Diff (to 2015) |
|---|---|---|---|
| Sass | 2,989 | 63.39% | -0.56% |
| Less | 478 | 10.14% | -5.05% |
| Stylus | 137 | 2.91% | -0.84% |
| PostCSS | 392 | 8.31% | N/A |
| Rework | 3 | 0.06% | N/A |
| No Preprocessor | 643 | 13.64% | -1.4% |
| Other | 73 | 1.55% | -0.52% |
Q4 – CSS處理器使用體驗
本題是Q3的一個延伸，主要關注於開發者對於各種CSS處理工具的使用體驗。
| Never Heard of | Heard of/Read About | Used a little | Feel Comfortable Using | |
|---|---|---|---|---|
| Sass – Standard or SCSS syntax | 0.57% (27) | 11.11% (524) | 17.16% (809) | 71.16% (3,355) |
| Less | 0.81% (38) | 30.86% (1,455) | 33.32% (1,571) | 35.02% (1,651) |
| Stylus | 24.22% (1,142) | 57.26% (2,700) | 11.11% (524) | 7.40% (349) |
| PostCSS | 21.76% (1,026) | 45.37% (2,139) | 18.73% (883) | 14.15% (667) |
| Rework | 78.43% (3,698) | 20.17% (951) | 0.91% (43) | 0.49% (23) |
該統計結果與Q3相去不大，Sass仍然擁有最多的使用者，並且獲得了最高的使用滿意度。
Q5-CSS Naming Schemes
下一個問題是有關於開發者對於CSS命名方案的使用情況，CSS本身的模組化與工程化程度不高，我在自己的專案中使用CSS命名方案也有數年之久，不過我也很好奇其他前端開發者是如何看待這件事的。Q5的原問題為你是否使用過某個譬如BEM或者SUIT這樣的CSS命名方案？
| Answer | Number of Votes | Percentage |
|---|---|---|
| Yes | 2,170 | 46.02% |
| No – I’ve heard of CSS naming schemes but don’t use one | 1,731 | 36.71% |
| No – I’ve never heard of CSS naming schemes | 814 | 17.26% |
結果還是讓我有點震驚的，使用過某種命名方案的與從未用過的差不多一半對一半，不過還是有超過80%的開發者是聽說過CSS命名方案及其相關概念的。不過如果我們與上面的統計結果結合起來看，在Advanced及以上級別的CSS開發者中使用CSS命名方案的開發者大概佔了56.94%，而Intermediate及以下開發者中使用比只有27.47%。我自己是覺得CSS命名方案會日益受到歡迎，我也會在未來的調查中跟蹤該指數。
Q6-CSS LintingQ6是關於CSS樣式檢查的，原問題為你是否使用過工具來檢查過你的CSS程式碼樣式風格，結果如下:
| Answer | Number of Votes | Percentage |
|---|---|---|
| Yes | 2,232 | 47.34% |
| No – I don’t lint my CSS | 2,483 | 52.66% |
與上一個問題類似，使用過樣式檢查工具的開發者與未使用過的差不多也是一半對一半，並且CSS技能等級越高的開發者越會選擇使用某個Lint工具。CSS Linting在工具與使用上可能仍是個較新的概念，目前人們可能更習慣於JavaScript Linting。不過我還是比較看好像Stylelint這樣的樣式檢查工具會日漸為開發者所使用。
Q7-CSS 工具使用體驗
下面三個問題都是關於CSS工具與常見方法論的使用體驗，本題的原題目為請指明你對於下述CSS工具的使用體驗:
| Never Heard of | Heard of/Read About | Used a little | Feel Comfortable Using | |
|---|---|---|---|---|
| Autoprefixer | 18.28% (862) | 17.18% (810) | 15.93% (751) | 48.61% (2,292) |
| Susy | 55.02% (2,594) | 29.78% (1,404) | 9.69% (457) | 5.51% (260) |
| Modernizr | 6.64% (313) | 22.93% (1,081) | 37.96% (1,790) | 32.47% (1,531) |
| Stylelint | 54.68% (2,578) | 24.35% (1,148) | 10.39% (490) | 10.58% (499) |
從上表中可以看出，Autoprefixer以48.61%成為體驗最好的CSS工具之一，不過當我們僅考慮某個工具在使用過的人群中的滿意度時，Modernizr以70.43%的比例高居榜首，Autoprefixer以64.54%位居第二。而在上述的這些工具中，大概55%的開發者尚不知道Stylelint與Susy。這一點也能看出無論是哪個等級的開發者，要想隨時保持對所有工具的掌握也幾乎是不可能的。
Q8-CSS 方法論與名稱空間使用體驗
下一個問題是關注開發者對於下列所有的CSS常見方法論與名稱空間的使用體驗:
| Never Heard of | Heard of/Read About | Used a little | Feel Comfortable Using | |
|---|---|---|---|---|
| SMACSS | 40.57% (1,913) | 33.91% (1,599) | 14.74% (695) | 10.77% (508) |
| Object Oriented CSS (OOCSS) | 28.27% (1,333) | 41.80% (1,971) | 17.77% (838) | 12.15% (573) |
| Atomic Design | 41.53% (1,958) | 33.74% (1,591) | 14.34% (676) | 10.39% (490) |
| ITCSS | 68.34% (3,222) | 22.38% (1,055) | 4.50% (212) | 4.79% (226) |
| CSS Modules | 27.42% (1,293) | 44.77% (2,111) | 15.95% (752) | 11.86% (559) |
| BEM | 24.90% (1,174) | 23.52% (1,109) | 18.49% (872) | 33.09% (1,560) |
| SUIT CSS | 69.42% (3,273) | 24.14% (1,138) | 3.90% (184) | 2.55% (120) |
在上表可以看出，BEM算是目前最受歡迎，也是使用體驗最好的CSS命名方案之一，基本上在真實的使用者中超過了50%的人表示很滿意。不過令我震驚的是，對於OOCSS等常見的CSS方法論有所瞭解的開發者數量佔比僅有不到30%，即使在那些Advanced或者Expert級別的開發者中，沒有任何一項方法論的使用度超過了20%。
Q9-CSS Tool Usage
這是關於CSS部分的最後一個問題了，它是關於開發者目前在其專案中使用過哪些CSS方法論或者工具:
| Tool/Methodology | Number of Votes | Percentage |
|---|---|---|
| SMACSS | 613 | 13.00% |
| Object Oriented CSS (OOCSS) | 696 | 14.76% |
| Atomic Design | 680 | 14.42% |
| ITCSS | 248 | 5.26% |
| CSS Modules | 740 | 15.69% |
| BEM | 1905 | 40.40% |
| SUIT CSS | 111 | 2.35% |
| Autoprefixer | 2,414 | 51.20% |
| Susy | 237 | 5.03% |
| Modernizr | 1,828 | 38.77% |
| Stylelint | 682 | 14.46% |
| I don’t use any of these approaches or tools | 1,095 | 23.22% |
根據參與者的反饋資訊，我們可以發現Autoprefixer、BEM以及Modernizr算是最為流行的CSS開發中的輔助工具。另外，儘管在上一個問題的調查中單個CSS方法論的使用度不高，但是總體來看有超過40%的開發者在他們的專案中使用了SMACSS、OOCSS、Atomic Design、ITCSS或者CSS Modules中的一項。這裡令我比較驚訝的是對於CSS模組化框架的使用度遠高於其他型別的框架，結合以上幾個關於CSS問題的答案，不難發現目前開發者對於CSS的寫法還是很廣泛的，並沒有形成一套被社群廣泛任何的統一方案。另外，我們也會發現有很大一部分自認為熟手的CSS開發者不滿意於現在流行的CSS方法論與工具。
最後，筆者還是想強調，儘管CSS時一個非常簡單的語言，但是想要徹底的掌握與理解還是具有一定難度的，千萬不能因為其易於上手就忽視其複雜度。
Q10-JavaScript Knowledge
本問卷第二部分是有關於參與者的JavaScript技能，第一個問題與CSS類似，就是你是如何給自己的JavaScript技能評級？
| Knowledge | Number of Votes | Percentage |
|---|---|---|
| Beginner | 78 | 4.18% |
| Novice (between Beginner and Intermediate) | 424 | 11.73% |
| Intermediate | 1,243 | 32.98% |
| Advanced (between Intermediate and Expert) | 2,203 | 35.72% |
| Expert | 767 | 15.40% |
開發者對於自己JavaScript技能評級的分佈於CSS的評級類似，不過相較於CSS，更少的人認為自己達到了中等或以上水準。
Task Runners
2015年裡Task Runner
| Task Runner | Number of Votes | Percentage | % Diff (to 2015) |
|---|---|---|---|
| Gulp | 2,060 | 43.69% | -0.1% |
| NPM Scripts | 1,223 | 25.94% | +22.78% |
| Grunt | 554 | 11.75% | -15.81% |
| Make | 54 | 1.15% | N/A |
| GUI Application (i.e. Codekit) | 93 | 1.97% | N/A |
| Other (please specify) | 214 | 4.54% | -0.34% |
| I don’t use a task runner | 517 | 10.97% | -8.56% |
在上面的統計表中，可以看出Gulp以超過40%的使用率位居前端Task Runner首位。不過對比2015與2016，我們可以看出越來越多的開發者選擇NPM作為其Task Runner工具，這反映了越來越多的開發則希望能夠簡化他們的編譯任務，從而避免Gulp或者Grunt這樣的工具帶來的抽象漏洞。還有一個比較有趣的，不使用任何Task Runner的開發者數量也有了較大的回落，與前一年相比減少了8.56%，這也表現了在專案中使用某個Task Runner已是前端開發者的主流選擇之一。
Q12-Knowledge of JavaScript Libraries and Frameworks
這算是筆者最關心的問題之一，也是2016年前端硝煙四起的主戰場之一。在2015年的調查中，React相較於Angular還是新人一枚，而現在Angular 2.0的正式版也已釋出，但是又會有多少人願意遷移到Angular 2呢？結果如下：
| Never Heard of | Heard of/Read About | Used a little | Feel Comfortable Using | |
|---|---|---|---|---|
| jQuery | 0.11% (5) | 0.85% (40) | 12.17% (574) | 86.87% (4,096) |
| Underscore | 10.22% (482) | 28.12% (1,326) | 24.41% (1,151) | 37.24% (1,756) |
| Lodash | 15.89% (749) | 26.70% (1,259) | 19.75% (931) | 37.67% (1,776) |
| Backbone | 4.31% (203) | 58.13% (2,741) | 23.01% (1,085) | 14.55% (686) |
| Angular 1 | 0.66% (31) | 40.21% (1,896) | 30.43% (1,435) | 28.70% (1,353) |
| Angular 2 | 0.89% (42) | 73.59% (3,470) | 20.19% (952) | 5.32% (251) |
| Ember | 3.75% (177) | 78.41% (3,697) | 11.71% (552) | 6.13% (289) |
| React | 0.76% (36) | 42.29% (1,994) | 28.04% (1,322) | 28.91% (1,363) |
| Polymer | 13.55% (639) | 72.68% (3,427) | 11.75% (554) | 2.01% (95) |
| Aurelia | 43.71% (2,061) | 50.03% (2,359) | 3.20% (151) | 3.05% (144) |
| Vue.js | 14.68% (692) | 66.55% (3,138) | 13.11% (618) | 5.66% (267) |
| MeteorJS | 9.59% (452) | 75.91% (3,579) | 11.69% (551) | 2.82% (133) |
| Knockout | 16.14% (761) | 66.62% (3,141) | 11.33% (534) | 5.92% (279) |
在今年與去年的調查中，jQuery都以較大優勢領先，有接近90%的開發者享受使用jQuery的開發過程，而接近99%的開發者表示都曾經使用過jQuery。而Underscore與Loadash都有接近40%的開發者表示讚賞。當我們要選擇2016年最令人震撼的JS框架，React社群的迅猛發展成為非常引人注目的變化。React不僅與Angular 1並駕齊驅，還超越了當年Angular 1的滿意度。另一個有趣的小細節就是Angular 2版本推出的如此之慢，差不多20.19%的開發者表示聽過Angular 2，但是隻有5%左右的開發者表示覺得用起來很爽。雖然可能隨著時間的推移Angular 2的使用者會逐漸增加，但是很難說它還能達到當年Angular 1的盛況。如果我們從整個MV框架的角度來看，今年有大概62.23%的開發者會選擇使用某個MV框架，與去年相比有12%的增長。就如我去年所述，掌握至少一個框架會是前端開發者的必備技能之一。
Q13-你在專案中最常用的JavaScript庫或者框架是哪個？
直接上結果:
| Number of Votes | Percentage | |
|---|---|---|
| jQuery | 3284 | 69.65% |
| Underscore | 714 | 15.14% |
| Lodash | 1527 | 32.39% |
| Backbone | 301 | 6.38% |
| Angular 1 | 1180 | 25.03% |
| Angular 2 | 387 | 8.21% |
| Ember | 280 | 5.94% |
| React | 1776 | 37.67% |
| Polymer | 87 | 1.85% |
| Aurelia | 154 | 3.27% |
| Vue.js | 456 | 9.67% |
| MeteorJS | 115 | 2.44% |
| Knockout | 156 | 3.31% |
| I don’t use any of these approaches or tools | 132 | 2.80% |
筆者在2015:我的前端之路提及從以jQuery為主的指令式程式設計到MV*形式的宣告式程式設計的變遷，但是可以看出jQuery仍然在前端開發中佔據非常重要的位置。另一個有趣的就是差不多有37%的開發者表示他們在專案中頻繁使用React，比上一題的統計要多出10%，看來很多開發者雖然表示用了不多，但是還是很誠實的在他們的專案裡大規模使用了React。還需要注意的是，Vue日漸引起了人們的注意，並且有越來越多的開發者願意在他們的專案中使用Vue.js。
Q14-你覺得哪個JavaScript庫或者框架是你專案不可或缺的組成部分？
本題是上面兩個題目的延伸，希望能挖掘出人們對於JavaScript框架與庫更深層次的看法。
| Number of Votes | Percentage | |
|---|---|---|
| None of them are essential – I feel comfortable using native JavaScript on my projects | 985 | 20.89% |
| jQuery | 1468 | 31.13% |
| Underscore | 38 | 0.81% |
| Lodash | 262 | 5.56% |
| Backbone | 38 | 0.81% |
| Angular 1 | 386 | 8.19% |
| Angular 2 | 129 | 2.74% |
| Ember | 178 | 3.78% |
| React | 857 | 18.18% |
| Polymer | 16 | 0.34% |
| Aurelia | 113 | 2.40% |
| Vue.js | 148 | 3.14% |
| MeteorJS | 8 | 0.17% |
| Knockout | 17 | 0.36% |
| Other (please specify) | 72 | 1.53% |
當僅允許開發者選擇某個框架的時候，jQuery仍然獨佔鰲頭，佔據了30%多，緊接著就是React，佔據了不到20%。另外還需要注意的是，大概20.89%的開發者並不認為任何框架都是必須的，我覺得應該是隨著ES6的完善與流行，開發者更傾向使用原生的JavaScript進行開發，從而避免所謂的前端焦慮。2017年裡，jQuery仍然會在前端開發中佔據非常重要的位置，因此對於前端開發者而言，不要輕言徹底拋棄jQuery。
Q15-JavaScript Module Bundlers
在去年的調查中，JavaScript模組打包工具仍然只有不到50%的開發者會在他們的專案中使用，不過在12個月之後，結果如下:
| Module Bundler | Number of Votes | Percentage | % Diff (to 2015) |
|---|---|---|---|
| I don’t use a module bundler | 1516 | 32.15% | -21.75% |
| RequireJS | 359 | 7.61% | -5.85% |
| Browserify | 510 | 10.82% | -5.65% |
| Webpack | 1962 | 41.61% | +31.11% |
| Rollup | 79 | 1.68% | N/A |
| JSPM | 108 | 2.29% | +0.07% |
| Other (please specify) | 181 | 3.84% | +0.39% |
在上述調查中我們可以發現，有接近50%的使用者願意使用Webpack進行模組打包，逐步蠶食了Browserify與RequireJS的份額。而從整個模組打包的角度來看，使用模組打包工具的前端開發者與去年相比已經有了20%的增長。從我的角度來看，使用某個合適的模組打包工具來處理JavaScript模組依賴問題是成為專業JavaScript開發者不可避免的一個技能。
Q16-JavaScript Transpilers
| Answer | Number of Votes | Percentage |
|---|---|---|
| Yes | 2,942 | 62.40% |
| No – I’ve heard of these tools, but haven’t used one | 1,443 | 30.60% |
| No – I’ve never heard of a JavaScript transpiler | 330 | 7.00% |
超過60%的開發者表示他們正在使用某個JavaScript Transpiler，從一個側面表現出越來越多的開發者會傾向於使用ES6乃至更先進的語言特性。
Q17-JavaScript Linting
JavaScript Linting也日漸成為開發工作流中不可或缺的一部分，這個問題就是調查前端開發者對於JavaScript Linting工具的使用情況:
| Tool | Number of Votes | Percentage |
|---|---|---|
| I don’t use a JavaScript linter | 1,076 | 22.82% |
| JSLint | 894 | 18.96% |
| JSHint | 657 | 13.93% |
| ESLint | 1,927 | 40.87% |
| xo | 24 | 0.51% |
| Other (please specify) | 137 | 2.91% |
接近80%的開發者表示他們會選擇使用某個Linting工具，而與之前關於CSS Linting的調查，我們發現有超過29.84%的開發者更願意使用JavaScript Linting工具。而在所有的Linting 工具中，ESLint算是最受歡迎。筆者自己也是使用ESLint作為主要的Linting工具，也非常推薦在專案中使用某個Linting工具，這對於提升你的程式碼質量與樣式風格一致性有很大的意義。
Q18-JavaScript Testing
下個題目我們關注於JavaScript 測試工具的使用情況，結果如下:
| Tool | Number of Votes | Percentage | % Diff (to 2015) |
|---|---|---|---|
| I don’t use a tool to test my JS | 2,241 | 47.53% | -12.13% |
| Jasmine | 802 | 17.01% | +0.64 |
| Mocha | 1,061 | 22.50% | +7.46% |
| Tape | 69 | 1.46% | -0.02% |
| Ava | 84 | 1.78% | N/A |
| QUnit | 199 | 4.22% | +0.37% |
| Jest | 164 | 3.48% | +2.69% |
| Other (please specify) | 95 | 2.01% | +0.33% |
JavaScript工程化程度在逐年增加啊，願意使用某個JavaScript測試工具的開發者也逐年增多。
Q19-其他前端工具
最後一個問題著眼於截止到目前問卷中尚未提及的一系列工具的使用情況及其使用體驗，本題的原問題為請指出你對於下述前端工具的使用體驗。
| Never Heard of | Heard of/Read About | Used a little | Feel Comfortable Using | |
|---|---|---|---|---|
| Bower | 2.52% (119) | 21.34% (1,006) | 33.96% (1,601) | 42.18% (1,989) |
| NPM | 1.76% (83) | 4.01% (189) | 14.15% (667) | 80.08% (3,776) |
| Yarn | 21.40% (1,009) | 50.56% (2,384) | 14.32% (675) | 13.72% (647) |
| Babel | 7.15% (337) | 29.20% (1,377) | 24.16% (1,139) | 39.49% (1,862) |
| Yeoman | 11.56% (545) | 41.53% (1,958) | 33.47% (1,578) | 13.45% (634) |
| TypeScript | 6.68% (315) | 60.87% (2,870) | 19.53% (921) | 12.92% (609) |
上述的工具中最為著名的當屬NPM，差不多80.08%的開發者表示用起來還是很爽的，而Bower與Babel則不相上下。另外需要注意的是，雖然Yarn推出不過數月，已經有超過78%的開發者表示已經嚐鮮過了。而對於Yeoman, TypeScript 以及 Yarn 這幾個工具的使用滿意度尚不是很高，大概都在12%~14%左右。