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%左右。
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
