2016年前端開發者深度調研，看看別人使用什麼技術體系

2016年前端開發者深度調研，看看別人使用什麼技術體系翻譯自The State of Front-End Tooling 2016 - Results。本文從屬於筆者的Web 前端入門與最佳實踐，若是你但願瞭解更多關於本文說起的各類框架庫的信息，能夠參考筆者的Web前端從入門菜鳥到實踐老司機所須要的資料與指南合集。

大概一個月以前，我啓動了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 Linting
Q6是關於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%左右。