登录 注册

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

本贴最后更新于 2222 天前，其中的信息可能已经事过境迁

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 方法论、校验、命名空间的增长过慢

数据精选自：

The State of Front-End Tooling 2016 - Results The results of the 2016 Front-End Tooling Survey are out! Check out the results and analysis of the responses here. ashleynolan.co.uk

The State of Front-End Tooling – 2015 I asked front-end developers to fill in a survey about their their knowledge and usage patterns across a number of front-end tools. Check out the results. ashleynolan.co.uk

  • 工具

    子曰：“工欲善其事，必先利其器。”

    288 引用 • 734 回帖
  • CSS

    CSS（Cascading Style Sheet）“层叠样式表”是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

    196 引用 • 540 回帖 • 1 关注
  • JavaScript

    JavaScript 一种动态类型、弱类型、基于原型的直译式脚本语言，内置支持类型。它的解释器被称为 JavaScript 引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在 HTML 网页上使用，用来给 HTML 网页增加动态功能。

    728 引用 • 1273 回帖 • 2 关注
7 引用
酸甜苦辣的 2019 • Vanessa
2016 - 2019 前端现状对比统计 • Vanessa
勤劳创业的 2018 • Vanessa
兜兜转转的 2017 IDEA 中运行 Grunt 任务 2017 VS 2016 前端使用数据对比 2018 VS 2017 前端使用数据对比
昆明 位置
1 收藏
7 引用
22 回帖
10
3
2
5.1k 31 278 1.3k 892 486 2 410 1.7k

相关帖子

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

欢迎来到这里！

我们正在构建一个小众社区，大家在这里相互信任，以平等 • 自由 • 奔放的价值观进行分享交流。最终，希望大家能够找到与自己志同道合的伙伴，共同成长。

注册 关于
请输入回帖内容 ...
请输入回帖内容 ...
Vanessa
我们终此一生，就是要摆脱他人的期待，找到真正的自己。 昆明
回帖
8940
 帖子
756
 积分
140998