2015 VS 2016 前端大杂烩使用数据对比

CSS

CSS 预处理工具

预处理工具 2015 投票 2016 投票 2015 % 2016 %
Sass 1297 2,989 63.95% 63.39%
Less 308 478 15.19% 10.14%
Stylus 76 137 3.75% 2.91%
No Preprocessor 305 643 15.04% 13.64%
PostCSS N/A 392 N/A 8.31%
Rework N/A 3 N/A 0.06%
Other 42 73 2.07% 1.55%

CSS 使用经验

预处理工具 2015 了解 2016 了解 2015 写过 Demo 2016 写过 Demo 2015 感觉好使 2016 感觉好使 2015 从未听过 2016 从未听过
Sass – Standard or SCSS syntax N/A 0.57% (27) N/A 11.11% (524) N/A 17.16% (809) N/A 71.16% (3,355)
Less N/A 0.81% (38) N/A 30.86% (1,455) N/A 33.32% (1,571) N/A 35.02% (1,651)
Stylus N/A 24.22% (1,142) N/A 57.26% (2,700) N/A 11.11% (524) N/A 7.40% (349)
PostCSS 47.78% (969) 21.76% (1,026) 9.32% (189) 45.37% (2,139) 7.15% (145) 18.73% (883) 35.75% (725) 14.15% (667)
Rework 19.03% (386) 78.43% (3,698) 1.53% (31) 20.17% (951) 0.69% (14) 0.91% (43) 78.75% (1,597) 0.49% (23)

CSS 命名空间

情况 2016投票 2016 %
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%

CSS 校验

情况 2016 投票 2016%
Yes 2,232 47.34%
No – I don’t lint my CSS 2,483 52.66%

CSS 工具使用经验

预处理工具 2016 从未听过 2016 听过 2016 写过 Demo 2016 感觉好使
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)

CSS 方法及命名空间经验

方法论 2016 从未听过 2016 听过 2016 写过 Demo 2016 感觉好使
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)

CSS 工具使用情况

工具/方法论 2016 投票 2016 %
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%

JavaScript

JavaScript 技能

技能 2016 投票 2016 %
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 运行工具

运行工具 2015 投票 2016 投票 2015% 2016%
Gulp 888 2,060 43.79% 43.69%
NPM Scripts 64 1,223 3.16% 25.94%
Grunt 559 554 27.56% 11.75%
Make N/A 54 N/A 1.15%
GUI Application (i.e. Codekit) N/A 93 N/A 1.97%
Broccoli 22 N/A 1.08% N/A
Other 99 214 4.88% 4.54%
Don’t Use a Task Runner 396 517 19.53% 10.97%

JavaScript 库及框架

库/框架 2015 从未听过 2016 从未听过 2015 了解 2016 了解 2015 写过 Demo 2016 写过 Demo 2015 感觉好使 2016 感觉好使
jQuery 0% (0) 0.11% (5) 1.4% (28) 0.85% (40) 7.2% (146) 12.17% (574) 91.4% (1,854) 86.87% (4,096)
Underscore 10.1% (204) 10.22% (482) 34.5% (700) 28.12% (1,326) 20% (406) 24.41% (1,151) 35.4% (718) 37.24% (1,756)
Lodash N/A 15.89% (749) N/A 26.70% (1,259) N/A 19.75% (931) N/A 37.67% (1,776)
Backbone 1.9% (39) 4.31% (203) 60.8% (1,234) 58.13% (2,741) 21.1% (427) 23.01% (1,085) 16.2% (328) 14.55% (686)
Angular 1 0.5% (10) 0.66% (31) 36.9% (748) 40.21% (1,896) 33.5% (680) 30.43% (1,435) 29.1% (590) 28.70% (1,353)
Angular 2 N/A 0.89% (42) N/A 73.59% (3,470) N/A 20.19% (952) N/A 5.32% (251)
Ember 4.2% (86) 3.75% (177) 78.7% (1,595) 78.41% (3,697) 13.1% (265) 11.71% (552) 4% (82) 6.13% (289)
React 4% (81) 0.76% (36) 61.8% (1,253) 42.29% (1,994) 19.9% (404) 28.04% (1,322) 14.3% (290) 28.91% (1,363)
Polymer 15.7% (318) 13.55% (639) 70.4% (1,429) 72.68% (3,427) 11.4% (231) 11.75% (554) 2.5% (50) 2.01% (95)
Aurelia N/A 43.71% (2,061) N/A 50.03% (2,359) N/A 3.20% (151) N/A 3.05% (144)
Vue.js N/A 14.68% (692) N/A 66.55% (3,138) N/A 13.11% (618) N/A 5.66% (267)
MeteorJS N/A 9.59% (452) N/A 75.91% (3,579) N/A 11.69% (551) N/A 2.82% (133)
Knockout 19% (386) 16.14% (761) 65.2% (1,321) 66.62% (3,141) 9.7% (197) 11.33% (534) 6.1% (124) 5.92% (279)

JavaScript 库、框架在主要项目中的使用情况

库/框架 2015 投票 2016 投票 2015 % 2016 %
jQuery 799 3284 56.47% 69.65%
Underscore 18 714 1.27% 15.14%
Lodash N/A 1527 N/A 32.39%
Backbone 42 301 2.97% 6.38%
Angular 1 253 1180 17.88% 25.03%
Angular 2 N/A 387 N/A 8.21%
Ember 34 280 2.40% 5.94%
React 124 1776 8.76% 37.67%
Polymer 4 87 0.28% 1.85%
Aurelia N/A 154 N/A 3.27%
Vue.js N/A 456 N/A 9.67%
MeteorJS N/A 115 N/A 2.44%
Knockout 21 156 1.48% 3.31%
I don’t use any of these approaches or tools 120 132 8.48% 2.80%

JavaScript 库、框架将会在主要项目中的进行使用调查

库/框架 2016 投票 2016 %
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%

JavaScript 模块化

模块化 2015 投票 2016 投票 2015 % 2016 %
I don’t use a module bundler 1093 1516 53.9% 32.15%
RequireJS 273 359 13.46% 7.61%
Browserify 334 510 16.47% 10.82%
Webpack 213 1962 10.5% 41.61%
Rollup 79 1.68%
JSPM 45 108 2.22% 2.29%
Other (please specify) 70 181 3.45% 3.84%

JavaScript 转换工具

情况 2016 投票 2016 %
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%

JavaScript 校验

工具 2016 投票 2016 %
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%

JavaScript 测试

工具 2015 投票 2016 投票 2015 % 2016 %
I don’t use a tool to test my JS 1210 2,241 59.66% 47.53%
Jasmine 332 802 16.37% 17.01%
Mocha 305 1,061 15.04% 22.50%
Tape 30 69 1.48% 1.46%
Ava N/A 84 N/A 1.78%
QUnit 78 199 3.85% 4.22%
Jest 16 164 0.79% 3.48%
Karma 15 N/A 0.74% N/A
Intern 8 N/A 0.39% N/A
Other (please specify) 34 95 1.68% 2.01%

前端工具

工具 2015 从未听过 2016 从未听过 2015 了解 2016 了解 2015 写过 Demo 2016 写过 Demo 2015 感觉好使 2016 感觉好使
Bower 3.30% (67) 2.52% (119) 23.27% (472) 21.34% (1,006) 28.06% (569) 33.96% (1,601) 45.36% (920) 42.18% (1,989)
NPM 5.23% (106) 1.76% (83) 6.76% (137) 4.01% (189) 19.63% (398) 14.15% (667) 68.39% (1,387) 80.08% (3,776)
Yarn N/A 21.40% (1,009) N/A 50.56% (2,384) N/A 14.32% (675) N/A 13.72% (647)
Babel N/A 7.15% (337) N/A 29.20% (1,377) N/A 24.16% (1,139) N/A 39.49% (1,862)
Yeoman 12.33% (250) 11.56% (545) 37.13% (753) 41.53% (1,958) 30.57% (620) 33.47% (1,578) 19.97% (405) 13.45% (634)
TypeScript N/A 6.68% (315) N/A 60.87% (2,870) N/A 19.53% (921) N/A 12.92% (609)
Ender 69.48% (1,409) N/A 28.55% (579) N/A 1.43% (29) N/A 0.54% (11) N/A

总结

  • 较 2015 ,整体使用情况上升幅度不大,但是 Webpack 和 ES 转换工具将越来越不可或缺
  • 尽管谈论 jQuery 的开发者在下降,但是大部分开发者没有达到其余工具集的使用水平
  • JavaScript 测试使用的越来越多,这得益于前端提供的一系列工具
  • 相比 JavaScript,使用及关注 CSS 方法论、校验、命名空间的增长过慢

数据精选自:

https://ashleynolan.co.uk/blog/frontend-tooling-survey-2016-results

https://ashleynolan.co.uk/blog/frontend-tooling-survey-2015-results


欢迎加入开源技术 Q 群 242561391 B3log,加入黑客派,让学习和分享成为一种习惯!
validate