2017 VS 2016 前端使用数据对比

发表于

JavaScript 生态系统比以前更加丰富，即使是最有经验的开发人员，在考虑各个阶段可用的众多选项时也会犹豫。

这就是调查所在的地方：我们向全世界超过 28,000 名开发人员提出了 100 多个问题，涵盖了从前端库到后端框架。

我们相信，结果是目前可用的 JavaScript 状态的最完整的图片，我们很高兴与您分享！

附： 如果所有这些数据让你倍感压力，我相信今年你一定会大踏步前行。

JavaScript 预编译

当谈论 JavaScript 时，你不仅仅是在谈论一个单一的语言，而是关于这个语言的很多东西。

虽然 ES6 现在已经是一个行之有效的标准，但有朝一日，TypeScript 的崛起可能会对其产生挑战，而 TypeScript 正迅速成为有类型的 JavaScript 领域的领导者。

  • 1-5 分，开发者为当前预编译环境打分为 4
  • 使用过 2 种库的人最多
  • 其中 Reason 开发者平均工资最高
  • ClojureScript 开发者平均工作年限最长

使用情况对比

未听过 知道但不感兴趣 进一步了解 使用过 继续使用
Reason 77.72% 11.52% 9.95% 0.24% 0.55%
ClojureScript 28.46% 47.71% 20.27% 1.28% 2.24%
Elm 30.29% 29.83% 33.47% 1.22% 5.16%
Flow 36.87% 21.85% 27.96% 3.23% 10.07%
TypeScript 1.47% 21.99% 37.10% 5.80% 33.61%
ES5 0.83% 5.16% 2.41% 38.27% 53.31%
ES6 0.75% 1.12% 9.39% 1.84% 86.88%

国家对比

Reason Flow ClojureScript ES5 ES6 TypeScript Elm 总票数
🌍 全球 0.28% 5.25% 1.17% 27.78% 45.28% 17.52% 2.69% 45479
🇨🇳 中国 0% 7.38% 0.56% 25.56% 49.43% 15.90% 1.13% 176

前端库

与往常一样，JavaScript 的斗争往往是以前端框架为导向的。

React 仍然是这里的主要玩家，但是由于 Angular 的流行度下降，Vue 正在取得巨大的收益。 到2018年，这张图表可能会变得非常不同！

  • 1-5 分，开发者为当前环境打分为 3.8
  • 很专注于一种库的使用
  • 其中 Ember 开发者平均工资最高
  • Backbone 开发者平均工作年限最长

使用情况对比

17 未听过 16 未听过 17 了解 16 了解 17 使用过 16 使用过 17 继续使用 16 继续使用
Aurelia 50.19% 43.71% 47.19% 50.03% 1.14% 3.20% 1.46% 3.05%
Ember 5.74% 3.75% 82.87% 78.41% 6.67% 11.71% 4.71% 6.13%
Polymer 18.82% 13.55% 71.61% 72.68% 4.50% 11.75% 5.05% 2.01%
Backbone 6.13% 4.31% 62.67% 58.13% 23.94% 23.01% 7.23% 14.55%
Angular 2 0.99% 0.89% 70.57% 73.59% 9.65% 20.19% 18.76% 5.32%
Vue.js 5.46% 14.68% 73.01% 66.55% 1.91% 13.11% 19.60% 5.66%
Angular 1 0.27% 0.66% 39.30% 40.21% 40.56% 30.43% 19.84% 28.70%
React 0.34% 0.76% 37.68% 42.29% 4.30% 28.04% 57.66% 28.91%
jQuery N/A 0.11% N/A 0.85% N/A 12.17% N/A 86.87%
Underscore N/A 10.22% N/A 28.12% N/A 24.41% N/A 37.24%
Lodash N/A 15.89% N/A 26.70% N/A 19.75% N/A 37.67%
MeteorJS N/A 9.59% N/A 75.91% N/A 11.69% N/A 2.82%
Knockout N/A 16.14% N/A 66.62% N/A 11.33% N/A 5.92%
No Framework 18.22% N/A 20.54% N/A 21.17% N/A 40.04% N/A

Top 15 占比

17 投票 16 投票 17 % 16 %
React 13669 1776 31.59% 37.67%
No Framework 9493 132 21.94% 2.8%
Angular 4707 1180 10.88% 25.03%
Vue.js 4647 456 10.74% 9.67%
Angular 2 4449 387 10.28% 8.21%
Backbone 1715 301 3.96% 6.38%
Ember 1117 280 2.58% 5.94%
Polymer 1198 87 2.76% 1.85%
Aurelia 348 154 0.80% 3.27%
Preact 446 N/A 1.03% N/A
Elm 442 N/A 1.02% N/A
Knockout 289 156 0.66% 3.31%
jQuery 277 3284 0.64% 69.65%
Cycle.js 260 N/A 0.60% N/A
Meteor 202 115 0.46% 2.44%

国家对比

No Framework Vue React Ember Polymer Angular Aurelia Angular 2 Backbone 总票数
🌍 全球 22.96% 35.42% 33.06% 99.45% 196.40% 59.76% 0.84% 10.76% 4.14% 41343
🇨🇳 中国 15.08% 27.93% 35.19% 1.11% 1.67% 7.82% 0% 7.82% 3.35% 179

状态管理

状态管理可以管理客户端和服务端上的数据。

在客户端 Redux 仍然是无可争议的领导者，但是 GraphQL 的兴起可能会让事情发生改变：它的价值可能会在不久的将来帮助推动 Relay Modern 和 Apollo 等发展。

  • 1-5 分，开发者为当前环境打分为 3.5
  • 很专注于一种库的使用
  • 其中 Falcor 开发者平均工资最高
  • Falcor 开发者平均工作年限最长

使用情况对比

未听过 知道但不感兴趣 进一步了解 使用过 继续使用
Falcor 77.23% 11.48% 10.50% 0.44% 0.32%
Relay/Relay Modern 60.38% 12.61% 23.91% 0.89% 2.19%
MobX 53.69% 17.65% 22.48% 1.34% 4.81%
Apollo 67.69% 6.85% 19.78% 0.34% 5.31%
GraphQL 17.91% 9.52% 60.04% 0.72% 11.78%
Firebase 19.10% 22.20% 31.03% 4.37% 23.28%
Redux 6.18% 10.17% 33.86% 4.51% 45.24%
REST 2.15% 0.89% 7.37% 2.61% 86.96%

Top 15 占比

17 投票 17 %
REST API 20615 47.53%
Redux 10725 24.72%
Firebase 5519 12.72%
GraphQL 2794 6.44%
Apollo 1260 2.90%
MobX 1142 2.63%
Relay/Relay Modern 512 1.18%
VueX 358 0.82%
MongoDB 162 0.37%
Ember Data 58 0.13%
Flex 53 0.12%
PouchDB 51 0.11%
Meteor 42 0.09%
NgRx 40 0.09%
graph.cool 40 0.09%

国家对比

Firebase GraphQL REST API Redux Relay/Relay Modern Mobx Apollo 总票数
🌍 全球 12.93% 6.55% 48.33% 25.14% 1.22% 2.67% 2.82% 42654
🇨🇳 中国 3.84% 3.84% 46.15% 28.84% 0.64% 10.25% 3.84% 156

Node 框架

让我们面对事实：不像其他语言一样，Express 真正的竞争者很少。 尽管多年来 Meteor 产生了很多特性，但很可惜还不能完使用它。

  • 1-5 分，开发者为当前环境打分为 3.5
  • 很专注于一种库的使用
  • 其中 Hapi 开发者平均工资最高
  • 除了 Express，其他开发者平均工作年限都比较长

使用情况对比

未听过 知道但不感兴趣 进一步了解 使用过 继续使用
Keystone 83.11% 9.75% 4.74% 1.07% 1.30%
FeathersJS 78.41% 11.91% 7.03% 0.75% 1.88%
Loopback 77.16% 12.48% 6.24% 2.16% 1.93%
Sails 55.98% 26.46% 10.25% 4.63% 2.65%
Hapi 56.51% 19.68% 14.69% 2.48% 6.61%
Meteor 14.70% 47.35% 22.78% 8.29% 6.85%
Koa 53.15% 17.92% 17.77% 1.86% 9.27%
Express 8.03% 9.60% 16.02% 4.99% 61.34%

Top 15 占比

17 投票 17 %
Express 14541 64.58%
Koa 2198 9.76%
Meteor 1625 7.21%
Hapi 1567 6.96%
FeathersJS 447 1.98%
Loopback 459 2.03%
Sails 630 2.79%
Keystone 309 1.37%
Node.js 151 0.67%
.NET 138 0.61%
Rails 129 0.57%
PHP 90 0.39%
java 88 0.39%
restify 76 0.33%
django 66 0.29%

国家对比

Express Koa Meteor Hapi FeathersJS Loopback Sails Keystone 总票数
🌍 全球 66.77% 10.09% 328.91% 190.88% 2.05% 6.70% 2.89% 1.41% 21776
🇨🇳 中国 51.2% 35.1% 3.2% 4% 0.8% 2.4% 1.6% 1.6% 125

测试

与 Javascript 世界一样，测试库的竞争也非常激烈，从快速发布周期、功能、性能以及框架之间不断的升级就可以看出。

虽然还没有决出高低，但 Jest 和 Enzyme 脱颖而出，获得了非常高的满意度。

  • 1-5 分，开发者为当前环境打分为 3.2
  • 大部分人都使用过 2 种测试库
  • 其中 Enzyme，Tape 开发者平均工资最高
  • 其中 Tape 开发者平均工作年限最长

使用情况对比

未听过 知道但不感兴趣 进一步了解 使用过 继续使用
Ava 76.05% 8.12% 9.20% 1.65% 4.96%
Tape 73.51% 9.54% 8.63% 1.91% 6.39%
Enzyme 57.12% 8.08% 14.33% 1.13% 19.32%
Jest 38.02% 8.29% 27.29% 1.67% 24.70%
Jasmine 12.79% 13.89% 24.35% 9.98% 38.96%
Mocha 9.50% 10.91% 27.80% 6.56% 45.21%

Top 15 占比

17 投票 16 投票 17% 16%
Mocha 10717 1061 31.62% 22.50%
Jasmine 9236 802 27.25% 17.01%
Jest 5857 164 17.28% 3.48%
Enzyme 4580 N/A 13.51% N/A
Tape 1515 69 4.47% 1.46%
Ava 1176 84 3.47% 1.78%
Karma 189 N/A 0.55% N/A
QUnit 188 199 0.55% 4.22%
chai 144 N/A 0.42% N/A
protractor 83 N/A 0.24% N/A
nightwatch 49 N/A 0.14% N/A
cucumber 45 N/A 0.13% N/A
selenium 44 N/A 0.12% N/A
tap 32 N/A 0.09% N/A
lab 31 N/A 0.09% N/A

国家对比

Ava Tape Enzyme Jest Jasmine Mocha 总票数
🌍 全球 3.55% 4.57% 13.84% 17.70% 27.91% 32.39% 33081
🇨🇳 中国 7.92% 3.96% 12.87% 20.79% 19.80% 34.65% 101

构建工具

除了 NPM 之外，Webpack 仍然是构建工具的王者。这无疑是由于像 Create-React-App 和 Next.js 这样的无 Webpack 配置封装的出现。

这可能证明它本身就是一把双刃剑：如果有更好的选择出现，这些库可能会不经意之间就转向它。、

  • 1-5 分，开发者为当前环境打分为 3.7
  • 大部分人都使用过 2 中构建工具
  • 其中 Rollup 开发者平均工资最高
  • 其中 Rollup 开发者平均工作年限比较长

使用情况对比

未听过 知道但不感兴趣 进一步了解 使用过 继续使用
Rollup 54.27% 13.35% 21.58% 2.20% 8.58%
Grunt 3.08% 22.27% 8.81% 44.84% 20.97%
Browserify 9.10% 29.21% 15.18% 24.46% 22.02%
Gulp 2.54% 12.49% 10.55% 27.25% 47.14%
Webpack 3.54% 3.84% 19.52% 3.53% 69.54%
NPM 1.05% 1.29% 3.27% 4.22% 90.14%

Top 15 占比

17 投票 16 投票 17% 16%
NPM 21369 1223 33.86% 25.94%
Gulp 11175 2060 17.70% 43.69%
Grunt 4973 554 7.88% 11.75%
Webpack 16485 N/A 26.12% N/A
Browserify 5221 N/A 8.27% N/A
Rollup 2034 N/A 3.22% N/A
yarn 1334 N/A 2.11% N/A
GNU Make 124 N/A 0.19% N/A
Brunch 105 N/A 0.16% N/A
Broccoli 99 N/A 0.15% N/A
jspm 42 N/A 0.06% N/A
Bower 41 N/A 0.06% N/A
fusebox 36 N/A 0.05% N/A
Meteor 34 N/A 0.05% N/A
Babel 32 N/A 0.05% N/A

国家对比

Rollup Grunt Browserify Gulp Webpack NPM 总票数
🌍 全球 3.32% 8.11% 8.52% 18.24% 26.91% 34.88% 61257
🇨🇳 中国 5.15% 2.77% 6.34% 18.25% 32.93% 34.52% 252

APP

PhoneGap / Cordova的使用率虽然高，但是满意度却比较低，这非常的糟糕。 尽管看起来原生 APP 将始终是最可靠的解决方案，但 React Native 最终可能会替代原生 APP 成为最好的解决方案。

  • 1-5 分，开发者为当前环境打分为 3.3
  • 大部分人只使用过 1 种打包工具

使用情况对比

未听过 知道但不感兴趣 进一步了解 使用过 继续使用
NativeScript 45.93% 27.94% 22.19% 1.80% 2.12%
Ionic 24.35% 33.84% 21.47% 9.96% 10.36%
PhoneGap/Cordova 13.45% 38.77% 13.73% 19.76% 14.26%
React Native 4.29% 17.13% 56.96% 1.53% 20.08%
Electron 16.54% 13.63% 47.33% 1.62% 20.86%
Native Apps 5.14% 17.39% 38.44% 5.55% 33.46%

CSS

目前关于样式组件大多都使用 CSS-in-JS，特别是在 React 生态系统中。

但是调查结果显示，目前开发者仍然更喜欢 SASS / SCSS，甚至很多公司还在直接使用 CSS。

在国内个人感觉 Less 用的更多一点。也许是 SASS 安装问题，也有可能是下图数据展示用 LESS 的人平均薪酬要高一些吧 😊

使用情况对比

17 了解 16 了解 17 使用过 16 使用过 17 继续使用 16 继续使用 17 未听过 16 未听过
Stylus 42.45% 24.22% 8.15% 57.26% 9.94% 11.11% 39.46% 7.40%
Foundation 39.19% N/A 1.78% N/A 17.98% N/A 25.04% N/A
CSS-in-JS 43.76% N/A 7.03% N/A 27.36% N/A 21.86% N/A
Less 39.95% 0.81% 25.71% 30.86% 31.07% 33.32% 3.27% 35.02%
Bootstrap 9.62% N/A 29.78% N/A 59.97% N/A 0.62% N/A
Plain CSS 3.10% N/A 25.19% N/A 70.92% N/A 0.78% N/A
SASS/SCSS 16.22% 0.57% 7.32% 11.11% 75.43% 17.16% 1.03% 71.16%
PostCSS N/A 21.76% N/A 45.37% N/A 18.73% N/A 14.15%
Rework N/A 78.43% N/A 20.17% N/A 0.91% N/A 0.49%

使用库数量

人数 %
使用过 7 种库 92 0.39%
使用过 6 种库 555 2.34%
使用过 5 种库 2120 8.95%
使用过 4 种库 4759 20.08%
使用过 3 种库 6838 28.85%
使用过 2 种库 6271 26.46%
使用过 1 种库 2702 11.40%
使用过 0 种库 362 1.53%

1-5 分，开发者为当前 CSS 库打分为 3.8

Top 15 占比

17 投票 16 投票 17 % 16 %
SASS/SCSS 17879 2,989 25% 63.39%
Plain CSS 16811 643 23.50% 13.64%
Bootstrap 14216 N/A 19.88% N/A
Less 7364 478 10.3% 10.14%
CSS-in-JS 6485 N/A 9.07% N/A
Foundation 4262 N/A 5.96% N/A
Stylus 2356 N/A 3.29% N/A
PostCSS 569 392 0.8% 8.31%
Bulma 491 N/A 0.67% N/A
semantic UI 449 N/A 0.63% N/A
materialize 312 N/A 0.44% N/A
CSS modules 205 N/A 0.29% N/A
material design 111 N/A 0.16% N/A
Rework N/A 3 N/A 0.06%
Other N/A 73 N/A 1.55%

薪酬对比

$0 $1-$10K $11-$30K $31-$50K $51-$100K $101-$200K $200+K 平均
Bootstrap 7% 8% 15% 16% 33% 19% 2 票 $66K
Aggregated 7% 7% 14% 17% 33% 20% 2 票 $67K
Plain CSS 8% 7% 14% 16% 33% 20% 2 票 $67K
SASS/SCSS 6% 6% 14% 18% 34% 20% 2 票 $68K
Stylus 7% 7% 15% 15% 32% 21% 3 票 $70K
Foundation 6% 6% 14% 16% 35% 21% 2 票 $70K
CSS-in-JS 6% 6% 13% 16% 34% 23% 2 票 $72K
LESS 4票 5票 13% 17% 35% 24% 2 票 $74

工作年限对比

< 1 年 1 - 2 年 2 - 5 年 5 - 10 年 11 - 20 年 20+ 年 平均年限
CSS-in-JS 2票 12% 32% 30% 20% 4票 7
Aggregated 3票 12% 31% 28% 21% 5票 8
Plain CSS 4票 12% 29% 28% 22% 5票 8
SASS/SCSS 3票 11% 31% 30% 21% 4票 8
Stylus 2票 10% 31% 31% 21% 5票 8
LESS 2票 9% 29% 30% 24% 6% 8
Bootstrap 4票 13% 29% 28% 21% 5票 8
Foundation 2票 10% 30% 32% 22% 4票 8

国家对比

Foundation LESS Plain CSS SASS/SCSS Stylus Bootstrap CSS-in-JS 总票数
🌍 全球 10.62% 6.14% 24.23% 25.77% 3.4% 20.49% 9.35% 69373
🇺🇸 美国 10.79% 6.52% 24.51% 25.29% 3.13% 20.20% 9.53% 17538
🇬🇧 英国 9.35% 6.00% 23.04% 26.08% 9.17% 17.15% 9.17% 4447
🇩🇪 德国 11.71% 6.18% 22.97% 26.67% 3.25% 19.72% 9.47% 2459
🇨🇦 加拿大 10.73% 6.97% 25.40% 25.96% 3.50% 19.37% 8.04% 2338
🇫🇷 法国 12.18% 4.94% 23.76% 25.61% 4.24% 19.97% 9.28% 2003
🇮🇳 印度 5.03% 9.60% 26.90% 21.53% 2.31% 25.18% 9.41% 1509
🇦🇺 澳大利亚 5.39% 11.00% 23.49% 25.76% 2.55% 19.80% 11.99% 1409
🇳🇱 荷兰 6.59% 10.00% 25.06% 28.64% 1.62% 19.36% 8.70% 1229
🇧🇷 巴西 7.44% 9.48% 22.19% 23.02% 5.56% 23.40% 8.87% 1329
🇵🇱 波兰 5.24% 10.56% 21.83% 29.43% 2.27% 21.31% 9.34% 1145
🇪🇸 西班牙 5.61% 9.91% 23.85% 28.07% 3.50% 21.05% 7.98% 1140
🇷🇺 俄罗斯 3.00% 10.28% 26.25% 24.54% 6.21% 19.39% 10.28% 933
🇸🇪 瑞典 4.42% 11.87% 24.08% 26.78% 3.88% 16.95% 11.98% 926
🇮🇹 意大利 5.57% 11.29% 25.07% 25.65% 2.19% 22.58% 7.62% 682
🇺🇦 乌克兰 4.49% 10.47% 23.50% 26.34% 5.38% 21.10% 8.68% 668
🇩🇰 丹麦 7.18% 10.15% 26.44% 27.49% 2.10% 16.81% 9.80% 571
🇲🇽 墨西哥 6.19% 10.88% 24.39% 22.32% 5.44% 22.51% 8.25% 533
🇧🇪 比利时 4.26% 9.88% 23.82% 29.21% 2.92% 20.67% 9.21% 445
🇳🇴 挪威 4.79% 13.42% 23.50% 27.33% 3.11% 17.50% 10.31% 417
🇦🇷 阿根廷 4.84% 10.85% 23.55% 25.17% 5.08% 22.86% 7.62% 433
🇳🇿 新西兰 5.37% 9.04% 25.67% 28.11% 3.17% 19.55% 9.04% 409
🇨🇭 瑞士 4.55% 8.57% 23.05% 26.80% 5.63% 21.98% 9.38% 373
🇫🇮 芬兰 7.69% 10% 21.79% 26.15% 4.35% 20.51% 9.48% 390
🇷🇴 罗马尼亚 5.40% 15.23% 22.35% 25.79% 1.47% 22.35% 7.37% 407
🇮🇱 以色列 5.60% 11.76% 25.77% 25.77% 2.24% 21.84% 7.00% 357
🇦🇹 奥地利 4.65% 9.62% 22.36% 30.43% 1.55% 24.22% 7.14% 322
🇮🇪 爱尔兰 6.50% 12.13% 22.48% 23.96% 7.69% 19.52% 7.69% 338
🇵🇹 葡萄牙 6.70% 10.22% 23.64% 25.23% 2.87% 21.08% 10.22% 313
🇧🇾 白俄罗斯 3.66% 10.99% 23.44% 26% 6.96% 18.68% 10.25% 273
🇨🇴 哥伦比亚 10.55% 10.86% 6.52% 18.94% 23.91% 19.87% 9.31% 322
🇨🇳 中国 3.28% 15.69% 24.08% 21.16% 3.64% 20.80% 11.31% 274

其他工具

打包工具

投票 %
yarn 9933 %
npm 7905 %
Bower 4971 %

工具库

投票 %
lodash 11431 %
jQuery 4703 %
Ramda 2177 %
underscore 1673 %

文本编辑器

投票 %
VS Code 7983 %
Atom 4677 %
Sublime Text 3906 %
WebStorm 3647 %
Vim 1789 %

代码检查

投票 %
eslint 12362 %
Prettier 4320 %
JShint Text 2079 %

2018

未来，前端开发的你最为期待的是什么？

服务端渲染

我不知道这是什么 不需要 很好，但不需要 主要特性 必不可少的特性
5% 13% 48% 27% 7%

代码拆分

我不知道这是什么 不需要 很好，但不需要 主要特性 必不可少的特性
7% 4% 39% 38% 12%

增量更新

我不知道这是什么 不需要 很好，但不需要 主要特性 必不可少的特性
19% 8% 43% 24% 5%

热更新

我不知道这是什么 不需要 很好，但不需要 主要特性 必不可少的特性
7% 6% 37% 33% 17%

时间旅行调试

我不知道这是什么 不需要 很好，但不需要 主要特性 必不可少的特性
12% 10% 49% 23% 6%

实时交互

我不知道这是什么 不需要 很好，但不需要 主要特性 必不可少的特性
15% 6% 36% 33% 10%

死码消除

我不知道这是什么 不需要 很好，但不需要 主要特性 必不可少的特性
7% 4% 41% 35% 13%

渐进增强

我不知道这是什么 不需要 很好，但不需要 主要特性 必不可少的特性
8% 23% 33% 25% 12%

服务工作线程

我不知道这是什么 不需要 很好，但不需要 主要特性 必不可少的特性
15% 9% 43% 27% 6%

离线应用

我不知道这是什么 不需要 很好，但不需要 主要特性 必不可少的特性
3% 15% 45% 28% 8%

总结

信不信由你，我们只是抓了表面。这里提到的每个库和工具都可以进一步细分为插件，包，插件和其他扩展的列表。

无论如何，就像去年一样，我们的总体结论仍然是一样的：JavaScript 不断改进，不断发展。这有点吓人，但也是令人兴奋的：毕竟，你知道学习 JavaScript 永远不会变得无聊！

那么未来会带来什么呢？JavaScript 会成为主流吗？ GraphQL 真的会接管世界吗？ JavaScript，Reason，Elm 会变成默认的编码方式吗？

注 以上数据分别精选自 2017 & 2016。由于两次统计的机构、方式等不一致，两年数据对比将会存在 错误 结论。

往年数据分析

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

2015 前端生态发展回顾