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 前端生态发展回顾

欢迎注册黑客派社区，开启你的博客之旅。让学习和分享成为一种习惯！