2019年前端报告

前端2019年调查报告

背景说明

从开始启动调查到结束是有一段时间了,可是现有结果出来了。css

本年的结果有超过3000多人参加调用,共有27个问题,问题覆盖前端工具以及思想方法论。在此,很是感谢各位参与的朋友花费时间来回答这些问题。组织和编写本次调查结果是有点困难的,由于咱们家里多一个组员——个人女儿(所以调查结果有点延迟,很是抱歉!)前端

与以往同样,了解过去12个月前端工具的变化是很是有趣的事情,看看咱们的想法和建议是否与行业内的其余是否一致。经过查看调查结果,咱们能够了解到今年前端工具的流行趋势和技术水平标准,同时若是你想知道往年的调查结果变化,能够查看往年前端调查报告react

感谢致辞

每一年都要花费大量的时间去完成调查,感谢个人同事Wes Bos和个人Boss——Just Eat的大力支持。
Wes是在web开发领域中极为出名的教学者,不管您是刚开始进行Web开发,仍是有经验的开发人员但愿提高您的技能,我都强烈建议您查看Wes的课程,在连接里你还能够看到有关Wes的全部课程。web

最后

最后舒适提示,给本身来杯茶、咖啡或者你本身喜欢的饮料,坐下来好好看看今年的调查结果。npm

(本文略长,仔细阅读须要大概15分钟左右)。gulp

前言 免责声明

本结果仅表明部分前端领域的工做人员的想法。所以,调查结果并非一种标准,只是一个对前端领域工具的粗略调查而已。segmentfault

调查反馈

正如以前提到的,本次调查共收到3005份调查反馈。这比去年少了点,去年是5461份。设计模式

我发现今年在宣传的时候遇到不少困难,这多是因为市场多了其余的调查收集,可是也由于我花费了不少时间去收集详细的报告反馈。尽管有这么多影响因素存在,收到3005份仍然使人吃惊。浏览器

今年的调查报告的宣传渠道有:Twitter, Reddit, HackerNews, DesignerNews, Echo.js, LinkedIn 和 Frontendfront,特别是前端社区: FrontEnd FocusCSS Weekly架构

你可能会在报告中看到我将2018年的数据与今年进行对比描述。

问题1 你在前端工做了几年

第一个问题可以得出受访者在前端领域中工做经历分布。

问题内容:你在工做中使用前端技术多久了?

结果:

年限 数量 占比
0-1 年 91 3.03%
1-2 年 279 9.28%
2-5 年 859 28.59%
5-10 年 860 28.62%
10-15 年 503 16.74%
超过15 年 413 13.74%

59.1%的受访者在前端已经工做超过5年。这比去年(54.8%)略微有所上升,因此今年受访者会对前端会更有经验。可是值得注意的是,这里面有部分多是去年已经参与调查的受访者,因此今年的工做经历的占比就有所上升。

只有12.31%的受访者是工做年龄少于2年的。

与去年相同,今年的受访者大部分都是前端技术领域的佼佼者,因此其余问题的答案也至关有参考价值的。

问题2 CSS的知识点

第二个是在调查受访者对CSS的掌握程度。

问题内容:你如何评价本身对CSS以及相关工具方法的掌握程度?

结果:

掌握程度 数量 占比
初学 35 1.16%
新手 (在中级和初学之间) 243 8.09%
中级 815 27.12%
高级 (在中级和专家之间) 1452 48.32%
专家 460 15.31%

结果图

90.75%的受访者表示,他们对CSS的知识处于中级或以上水平,大多数(63.63%)的人将本身评为高级或专家。

就像我每一年提到的那样,关于技术掌握程度的问题都是受访者主观的印象。一我的关于成为CSS专家须要什么的想法可能与另外一我的的想法相差很大。

暂且不论这个,细分调查者的CSS登记对调查中其余问题结果仍是颇有的做用的,例如:更高级的开发者偏喜欢的工具,却不是新手喜欢的工具。在以后的结果里,我将会参考回当前CSS等级。

问题3 CSS处理器的使用率

第一个关于CSS工具使用的CSS处理器相关的。

在过去调查的几年里, 这个问题是问调查者喜欢哪一种CSS处理器。今年,问题将直接修改成容许调查者选择多个工具。

问题内容:哪些CSS处理器你会使用舒服?

这个问题自从2016年就开始,Sass就一直占据主流工具,今年是否有其余变化呢?

注意:在结果已经把今年的数据和去年的数据进行对比,可能今年是多选,因此今年全部工具的使用率有所提高。

CSS处理器 投票数 占比 2018年比较%
Sass 2,322 77.27% +11.88%
PostCSS 863 28.72% +20.06%
Less 422 14.04% +7.52%
没使用处理 395 13.14% -1.44%
Stylus 98 3.26% +1.08%
Other 80 2.66% -0.01%

CSS处理器

相比较前几年,Sass处理器在开发者中仍是占据主流地位,有77.27%的开发者选择会使用它。

有趣的是,PostCSS处理如今已经排在第二名,有28.72%的调查者使用它。这是因为开发者如今能够选择多个处理器的使用,能够更清晰表达出PostCSS处理的使用率,所以也说明PostCSS也在逐渐成为一个主流工具。

问题4 CSS处理器的经验

下一个问题是跟着上一个问题的, 是问受访者在CSS处理器的使用经验。

下面就是结果:
<escape>

处理器/使用经验 从没听过 了解过 使用过 使用舒服
标准Sass或SCSS语法 0.33% (10人) +0.13% 6.82% (205人) -2.17% 15.34% (461人) -2.61% 77.50% (2,329人) +4.64%
Less 1.40% (42) +0.21% 35.81% (1,076人) -0.52% 35.34% (1,062人) +1.10% 27.45% (825人) -0.79%
Stylus 21.06% (633人) -1.70% 61.93% (1,861人) +1.56% 11.35% (341人) +0.47% 5.66% (170人) -0.33%
PostCSS 15.44% (464人) -1.99% 41.30% (1,241人) -4.06% 22.73% (683人) +1.98% 20.53% (617人) +4.07%

</escape>

CSS处理器

这些结果和上一个问题保持一致,有超过3分之2的人(77.50%)说他们对Sass常用到,并且仅有7.15%的人从未用过Sass。

PostCSS相对去年则有所提高,20.53%的人说他们常用PostCSS。

Less和Stylus比较稳定,与去年结果相比没差多少。

从问题3和问题4的结果看来,显而易见的Sass仍然CSS处理器中的主流工具。

问题5 CSS框架

下一个问题是关于CSS框架的使用经验>

问题内容: 请指出下面你在项目最常使用的CSS框架?(若是有的话)

去年是Boostrap独领风骚,今年是否有任何改变吗?

结果以下:

答案 投票人数 占比 % 与2018比较
没使用框架 1,054 35.07% +2.15%
Bootstrap 840 27.95% -7.01%
自定义框架 497 16.54% +1.29%
Tailwind CSS 129 4.29% 没有
Bulma 96 3.19% +0.75%
Foundation 79 2.63% -1.31%
Materialize 72 2.40% -0.24%
Semantic UI 63 2.10% +0.16%
Tachyons 25 0.83% 没有
PureCSS 18 0.60% -0.10%
其余框架 132 4.39% -0.83%

CSS框架

与前几年调查结果比较,今年最多人选择的是有超过3分之1的人选择没有使用过框架。

即便再也不是第一名,Boostrap仍然是CSS的主流框架,有27.95%的人选择了它。相比较去年降低了7.01%。

在Boostrap以后,下一个受欢迎的是Tailwind框架。

与去年的趋势有点相似,使用CSS框架和CSS的知识水平的仍是有很大的反差。好比:初级开发者会比较喜欢用Boostrap框架,占43.71%,而高级或专家级别的开发者则降到23.69%。

还有一种明显的差异(可是在预期内的),就是CSS知识等级与选择自定义框架的人也有反差。目前有16.54%的人选择了自定义框架,在新手或初学的开发者中只占了8.63%会如此作,可是在高级或专家则占据了20.35%。

总之,就去年而言,今年使用CSS框架的开发者彷佛有所降低。

问题6 CSS命名规范

问题内容: 你有使用过CSS命名规范吗,好比:BEM 或者 SUIT?

反馈结果以下:

| 选择 | 人数 | 占比 | 与2018年比较 |
| - | - | - | - |
|是的 | 1,565 | 52.08% | +3.15% |
|没,但听过 | 1,153 | 38.37% | -0.76%|
|没也从没听过 | 287 | 9.55% | -2.39%|

CSS命名规范

自从2016年开发提问CSS命名规范,这是第一次有超过半成的人(52.08%)使用过CSS命名规范,这比去年提高了3.15%。

并且从未听过CSS命名规范的人也降低到9.55%,这比去年也降低了2.39%。

从这个结果能够获得,CSS命名规范正在逐渐成为主流,也表示愈来愈少的开发者不使用CSS命名规范。

问题7 CSS Lint检测

自从2016年开始作调查依赖,CSS Lint的使用率就逐年上升。

去年,有50.6%的人选择从未对CSS作过Lint检查,因此使人感兴趣的是能够看看今年是否有其余变化呢?

问题内容:你有使用过任何工具对CSS作lint检测吗?

结果以下:

答案 人数 占比 与2018年比较
1,599 53.21% +3.77%
没,从未据说过 1,406 46.79% -3.77%

与CSS命名规范同样,这也是首次有一半的人(53.21%)选择使用过CSS Lint检测他们的CSS代码,这比去年提升了3.77%。

从上面的数据分析,有明显的对比结果,有60.15%的高级开发者更加喜欢使用CSS Lint检测代码,反而只有28.42%的新手或初学者用过。

随着Stylelint之类的强大工具愈来愈被人所知道,愈来愈多的开发者开始使用CSS Lint检测他们的CSS代码。(这在下个问题咱们会进行解析)

问题8 CSS工具使用经验

后面四个问题将会在涵盖CSS的方法和辅助工具的使用上,分析不一样CSS等级开发者的占比,那么问题8就是第一个关于工具的。

问题内容:关于Autoprefixer, Modernizr 和 Stylelint的使用经验。

结果以下:
<escape>

CSS工具/使用经验 从没听过 了解过 使用过 使用舒服
Autoprefixer 16.71% (502) -0.81% 15.17% (456) -1.93% 17.60% (529) +0.64% 50.52% (1,518) +2.10%
Modernizr 12.51% (376) +1.45% 28.99% (871) +1.83% 34.48% (1,036) +0.22% 24.03% (722) -3.49%
Stylelint 37.74% (1,134) -6.46% 24.86% (747) -1.01% 14.38% (432) +2.33% 23.03% (692) +5.16%

</escape>

在这三个工具中,Autoprefixer是最受欢迎的,有50.52%的人会使用它很是舒服。

Stylelint则比较去年有了较多提高, 23.03%的人以为使用很是舒服,比去年提高了5.16%。

Modernizr有小幅度降低,不少人都没听过,并且以为使用很是舒服的人的比去年降低了3.49%,只占了24.03%。

问题9 CSS方法和命名规范的使用经验

跟着上一个问题,受访者会被问:

问题内容:请说一下你会使用哪一种CSS方法和命名规范?

结果以下:

<escape>

CSS方法/使用经验 从没听过 了解过 使用过 使用舒服
CSS-in-JS 7.72% (232) -4.59% 39.43% (1,185) -2.14% 25.32% (761) -0.88% 27.52% (827) +7.60%
SMACSS 40.27% (1,210) -0.86% 39.13% (1,176) +0.07% 12.71% (382) +0.99% 7.89% (237) -0.20%
Object Oriented CSS (OOCSS) 30.22% (908) -1.77% 47.29% (1,421) +2.22% 14.18% (426) +0.15% 8.32% (250) -0.60%
Atomic Design 27.99% (841) -5.94% 40.60% (1,220) +3.24% 16.87% (507) +0.22% 14.54% (437) +2.47%
ITCSS 63.89% (1,920) -5.84% 24.29% (730) +3.36% 5.56% (167) +1.51% 6.26% (188) +0.97%
BEM 13.48% (405) -2.52% 22.16% (666) -3.68% 20.83% (626) +0.83% 43.53% (1,308) +5.37%
SUIT CSS 68.92% (2,071) -1.67% 24.96% (750) +1.10% 3.73% (112) +0.40% 2.40% (72) +0.18%

</escape>

与去年相比有了一个明显的提高,就是不一样等级的开发者都慢慢接受了CSS方法和命名规范。

BEM仍然是主流的命名规范,占了43.53%,这比去年提高了5.37% 。

最大的改变是CSS-in-JS,有27.52%的开发者以为使用起来很舒服,比去年了提高了7.6%。

选择SMACSS,OOCSS,Atomic Design和ITCSS的人也有所提高,至少大部分都选择了其中一种CSS方法,其中Atomic Design和ITCSS的收获最为明显。

仔细看上面提到过的CSS架构方法,如:SMACSS, OOCSS, Atomic Design, ITCSS 和 CSS-in-JS ,以为使用舒服的人从去年的34.90%上升到2019年的42.26%,这足足提高了7.36%。并且至少试过其中一种的开发者也提高到70.75%,2018年的数据是66.49%。

这些结果代表了,CSS方法和命名规范正在不一样等级开发者中处于上升的趋势,而BEM, CSS-in-JS 和 Atomic Design正在这个领域的广为人知的技术。

问题10 CSS工具使用率

咱们就继续聚焦在CSS工具上,第10个问题就是:

问题内容:哪些CSS方法或工具你仍在项目使用?

注:下面忽略了CSS-in-JS方法,由于问题11会着重进行调查。

|工具、方法 | 人数 | 占比 | 与2018年比较|
| - | - | - | - |
|Autoprefixer | 1708 | 56.84% | +0.13%
|BEM | 1368 | 45.52% | +2.01%
|Stylelint | 826 | 27.49% | +4.71%
|Modernizr | 634 | 21.10% | -8.24%
|Atomic Design | 463 15.41% +0.19%
|Object Oriented CSS (OOCSS) | 218 | 7.25% | -1.98%
|SMACSS | 173 | 5.76% | -0.89%
|ITCSS | 155 | 5.16% | +0.36%
|SUIT CSS | 46 | 1.53% | +0.03%
|未使用上述工具或方法 | 664 | 2.10% | +5.18%

从上面结果看来,Autoprefixer是最多使用者的CSS工具,紧接着的是BEM有45.52%和Stylelint的27.49%。这都比2018年提高了一点,尤为是Stylelint的结果上升了4.71%。

使用率占比未21.10%的Modernizr比去年降低了8.24%,这去年统计出来与前一年相比,继续保持降低的趋势。

尽管CSS方法论的知识等级在不断提高,可是CSS方法和工具的使用率却与2018年相差很少。Atomic Design仍然是在开发者中最受欢迎的CSS设计模式,使用率达到15.41%。

总之,这些结果代表2018年到今年,CSS方法和工具已经趋于稳固的趋势。

问题11 CSS-in-JS工具的使用率

下一个问题就是今年新增的问题之一,问的就是最近不少人感兴趣的领域——CSS-in-JS。

使用CSS-in-JS方法的开发者数量已经达到必定地步,那么不少人都会想知道大部分开发者都在使用什么样的工具实现CSS-in-JS。

问题内容:您首选的CSS-in-JS工具是什么?

工具/方法 人数 占比
没使用过 1,662 55.31%
Styled Components 812 27.02%
CSS Modules 292 9.72%
Emotion 119 3.96%
JSS 50 1.66%
Aphrodite 10 0.33%
Radium 1 0.03%
Other 59 1.96%

44.69%的调查者说他们如今正在使用 CSS-in-JS工具,其中大部分人(27.02%)正在使用 Styled Components工具, CSS Modules有9.72%,而Emotion(3.96%)将会成为下一个最受欢迎的工具。

然而大部分开发者(55.31%)说他们从未使用过CSS-in-JS。所以代表了CSS-in-JS仍然是一个新的领域,并且它的特殊用法,有这样的结果就不奇怪了。

正如你所期待的,当过滤开发者的知识等级为高级或专家,那么使用CSS-in-JS的占比就上升到 51.38%。这也是由于目前不少JavaScript框架都集合了CSS-in-JS。

毕竟,CSS-in-JS也慢慢成为了大部分开发者的必备技能之一。同时也很是期待将来CSS-in-JS在将来会有什么样的变化。

问题12 CSS新特性的使用率

最后有关CSS的问题就是考察调查者们对于CSS新特性的了解。

关于CSS新特性,已经有不少人对其作过研究和写过博客,同时你们都会十分感兴趣别人是如何在项目中使用CSS新特性或者使用它们的经验。

问题内容:请选择你使用过下面哪些新特性?

结果以下:

从未听过 了解过 使用过一点 常用
CSS Grid 0.90% (27) -0.33% 21.90% (658) -14.47% 48.62% (1,461) +4.69% 28.59% (859) +10.11%
Flexbox 0.43% (13) -0.25% 2.50% (75) -3.29% 16.67% (501) -9.28% 80.40% (2,416) +12.81%
CSS定义变量 8.95% (269) -1.18% 30.58% (919) -14.06% 32.58% (979) +6.38% 27.89% (838) +8.86%
CSS Houdini方法 51.75% (1,555) 46.46% (1,396) 1.56% (47) 0.23% (7)

Flexbox布局提高12.81%到80.40%,CSS Grid布局则提高10.11%到28.59%,还有CSS自定义属性提高8.86%到27.89%,所以可知,全部的开发者对CSS新特性都会常用。

绝大多数的受访者都说现有都在使用Flexbox,占比为97.07%(2018年为 93.53%)。所以能够确定的说,如今前端开发者都必须具有Flexbox知识。

从数据上来分析,听过和使用过一点CSS Grid布局和CSS定义变量的开发者比较去年有了很大的变更。可是对于这两个新特性的使用率,听过和使用过一点的增加速度仍是比常用的高。

CSS Houdini方法,一种用于提供给开发者扩展CSS本地的API方法,也是今年首次归入到提问范围中。46.46% 的受访者说他们有了解过这个特性,可是仅有 1.79%的人说使用过一点。这个特性目前还在发展中,因此对于这样的低使用率也不出奇。

问题13 JavaScript知识等级

调查已经进入到后半部分,后面咱们将聚焦在JavaScript领域和它的生态系统与工具。

首先,第一个问题会是:

问题内容:你如何评价本身在JavaScript知识以及有关它的工具方法了解程度?

|等级 | 人数| Percentage
| - | - | - |
|初学者 | 70 | 2.33%
|新手 (在中级和初学之间) | 261 |8.69%
|中级 |901 |29.98%
|高级 (在中级和专家之间) | 1,237 |41.16%
|专家 |536 |17.84%

大多数受访者认为他们的知识等级在中级以上,占了88.98%,其中超过一半的人认为他们的等级为高级或专家水平。

用这样子的比例去反应前端行业的占比是错误的,它仅仅只能表明本次受访者的知识水平占比状况。正如您所指望的,本次调查仍是比较倾向于技术较好的人。

问题14 任务构建工具

去年在任务构建工具中,npm scripts领先gulp成为第一名。今年状况会发生变化吗?

问题内容:在你平常项目中,你会首先使用哪一种构建工具进行编译?

任务构建工具 人数 占比 与2018年比较
NPM Scripts 1,933 64.33% +16.44%
Gulp 557 18.54% -11.02%
没使用过 273 9.08% -1.61%
Grunt 76 2.53% -3.26%
桌面客户端 (如:Codekit) 30 1.00% -0.04%
Make 21 0.70% +0.06%
Other 115 3.83% -0.56%

上面的图能够很清晰的看出NPM Scripts已经紧紧占据第一名,有64.33%的人如今正项目中使用着,这比去年提高了16.44% 。

然而其余的工具使用率却在不断降低,18.54%的 Gulp降低了11.02%,2.53%的 Grunt降低了3.26%。

有9.08% 的人说从未使用过构建工具,比去年降低了1.61%。

所以从与去年结果比较而言,前端开发者正在他们的项目工程流中用NPM Scripts表明 Gulp 和 Grunt这两种构建工具。

问题15 JavaScript框架或库的使用状况

接下来的三个问题都会是关于JavaScript框架和库的使用水平。

去年调查结果中,React、Vue和Angular2+都是最大提高的框架。jQuery虽然还是最让开发者常用的js库,可是它在实际中已经没有那么多使用地方了。

这个问题主要是着重问受访者对于JavaScript库和框架的使用状况。

结果以下:

从未听过 了解过 使用过一点 常用
jQuery 0.03% (1) -0.08% 2.80% (84) +0.49% 21.80% (655) +3.95% 75.37% (2,265) -4.36%
Lodash 8.09% (243) -3.61% 22.50% (676) -3.23% 28.75% (864) +3.15% 40.67% (1,222) +3.70%
Underscore 12.58% (378) +0.09% 32.58% (979) -2.34% 26.39% (793) +1.98% 28.45% (855) +0.27%
React 0.27% (8) -0.11% 24.53% (737) -6.62% 26.86% (807) -1.18% 48.35% (1,453) +7.92%
Vue.js 0.43% (13) -0.6% 50.18% (1,508) -8.86% 26.19% (787) +3.32% 23.19% (697) +6.12%
Angular 1 0.57% (17) -0.07% 50.75% (1,525) +3.43% 29.85% (897) -0.29% 18.84% (566) -3.06%
Angular 2+ 0.40% (12) -0.30% 63.73% (1,915) -1.31% 20.07% (603) -1.41% 15.81% (475) +3.03%
Ember 5.49% (165) +1.04% 79.03% (2,375) -1.52% 8.22% (247) -0.22% 7.25% (218) +0.69%
Preact 21.30% (640) -2.30% 65.02% (1,954) -0.26% 9.08% (273) +2.41% 4.59% (138) +0.14%
Backbone 8.55% (257) +1.77% 65.69% (1,974) -1.86% 18.20% (547) +1.30% 7.55% (227) -1.22%
Knockout 23.43% (704) +2.88% 62.53% (1,879) -2.44% 10.88% (327) +0.22% 3.16% (95) -0.67%
Aurelia 44.79% (1,346) +3.37% 51.48% (1,547) -3.56% 2.73% (82) +0.33% 1.00% (30) -0.14%
MeteorJS 18.24% (548) +2.86% 71.45% (2,147) -1.91% 8.95% (269) -0.33% 1.36% (41) -0.62%
Polymer 18.64% (560) +0.68% 71.48% (2,148) +0.58% 8.39% (252) -1.10% 1.50% (45) -0.15%
D3.js 13.48% (405) N/A 49.68% (1,493) N/A 29.55% (888) N/A 7.29% (219) N/A

jQuery (75.37%), React (48.35%), Lodash (40.67%), Underscore (28.45%) 和 Vue.js (23.19%)是大部分开发者会选择常用的js框架或库。

相比较2018年,React和Vue.js是两个提高最快的框架,React提高了7.92%,Vue.js则提高6.12%,二者在今年在常用框架中共占据了48.35%。

jQuery还在持续使用中,占据了75.37%,不过比2018年降低了4.36%。

Lodash框架也有一点点提高,有使用一点的开发者占了28.75%,还有40.67%的人说常用,分别去年提高了3.15%和3.70%。

今年 D3.js框架也是首次归入本问题中,有7.29% 的人说会常用它。

在全部JavaScript MV*框架 (除了 jQuery, Underscore, Lodash 和 D3.js )中,有78.54%的人说会常用其中之一。这个结果比2018年提高了8.04% ,比2016年提高了28%,所以对于前端开发者而言,具有其中一种框架的能力是很是有必要的。

## 问题16 最常使用的JavaScript框架

问题内容:您目前在项目上最常使用哪些JavaScript库和/或框架?

受访者能够选择所有也能够不选是否有在项目中使用的框架。

结果以下:

框架 人数 占比 与2018年比较
React 1,569 52.21% +4.82%
jQuery 1,106 36.81% -14.24%
Lodash 986 32.81% -1.01%
Vue.js 816 27.15% +4.21%
Angular (v2+) 472 15.71% +1.59%
D3.js 267 8.89%
Ember 201 6.69% +0.68%
Underscore 199 6.62% -1.22%
AngularJS 191 6.36% -4.06%
Preact 75 2.50% -0.48%
Backbone 55 1.83% -0.72%
Polymer 35 1.16% -0.58%
Knockout 30 1.00% -0.83%
Aurelia 26 0.87% -0.25%
MeteorJS 24 0.80% -0.57%
没使用过 120 3.99% +0.38%

从2015年开始调查报告以来,这是第一次jQuery再也不是第一名,而是React取代其成为第一名。

52.21% 的开发者会在他们的项目常用React框架,比去年提高了4.82% 。36.81%的人说他们会使用jQuery,这比去年降低了14.24%。

Lodash (32.81%), Vue.js (27.15%) 和 Angular v2+ (15.71%)则是下一批最受欢迎的框架,分别比去年变化了-1.01%, +4.21% 和 +1.59%。

问题17 最须要的JavaScript库或框架

问题内容:在你主要的项目里,以为哪一个框架或库是必不可少的?

去年本问题是React成为大部分开发者的首选,今年会有什么变化吗?

结果以下:

框架或库 人数 占比 与2018年比较
React 985 32.78% +4.31%
没有必需的框架或库 651 21.66% +0.05%
Vue.js 404 13.44% +3.22%
jQuery 335 11.15% -8.59%
Angular (v2+) 255 8.49% +2.30%
Ember 167 5.56% +1.17%
Lodash 73 2.43% -0.99%
AngularJS 22 0.73% -0.97%
Aurelia 18 0.60% 0%
Backbone 11 0.37% +0.08%
Preact 8 0.27% 0%
Underscore 7 0.23% -0.19%
Polymer 7 0.23% -0.28%
MeteorJS 4 0.13% -0.05%
Knockout 1 0.03% -0.13%
D3.js 1 0.03%
其余 56 1.86% +0.07%

React今年仍然稳固榜首,有32.78%的开发者说在他们的主要项目中React是必不可少的,这比去年提高了4.31%。

21.66%的开发者认为在他们项目没有什么框架或库是必须的。

下一批必需的框架是 Vue.js的13.44% ( +3.22% ), jQuery的11.15% ( -8.59%) 和 Angular v2+ with 8.49% (up +2.3%)。

当将受访者的结果与技术等级一一过滤后,结果更加清晰。45.14%的开发者(0-2年经验)说React在他们项目中必不可少的,然而这个数据到了10年以上的开发者则降到24.02%。同时,这些经验丰富的开发者有28.06%的人认为在项目中没有任何框架或库是必需品。

综上所述,从上面3个有关JavaScript库或框架的问题调查结果来讲,React不管是在技能等级或使用率都是处于领先地位的,Vue.js是紧跟着排在第二的框架。(就是在有些部分落后于React)

jQuery的使用率虽然在不停降低,可是仍然有不少的使用者,至少比Loash还有更多的使用者。

问题18 JavaScript打包工具

在最近两次调查中,Webpack一直处于主导地位在打包工具领域。因此今年会有其余工具挑战它的地位吗?

问题内容:你会使用哪一种打包工具?

结果以下:

打包工具 人数 Percentage 与2018年比较
Webpack 2,204 73.34% +7.66%
没使用 440 14.64% -5.91%
Parcel 85 2.83% +1.79%
Rollup 62 2.06% -0.12%
Browserify 49 1.63% -2.09%
RequireJS 37 1.23% -1.32%
SystemJS 3 0.10%
其余工具 125 4.16% +0.15%

Webpack依然保持增加的趋势,有73.34%的开发者说他们的打包工具都是它,这比去年多了7.66%。

下一批常使用的打包工具是 Parcel 和 Rollup打包工具。

未使用过打包工具的开发比去年降低了5.91%,为14.64%,这就代表了有85.36%的受访者都在项目工程中使用打包工具。

相比去年,Webpack仍然是打包工具的领头羊,并且在将来没有任何迹象代表其余工具能代替它的地位。

问题19 JavaScript打包工具或构建脚本的使用经验

问题内容:受访者在打包工具或构建脚本上的使用经验。

结果以下:

从未听过 了解过 使用过一点 常用
Gulp 1.66% (50) +0.21% 20.33% (611) +1.34% 32.21% (968) +2.20% 45.79% (1,376) -3.76%
NPM Scripts 3.13% (94) -1.23% 9.15% (275) -3.59% 23.33% (701) -3.42% 64.39% (1,935) +8.25%
Grunt 2.93% (88) +0.68% 34.51% (1,037) +1.37% 37.97% (1,141) +1.93% 24.59% (739) -3.98%
Webpack 2.03% (61) -0.61% 13.28% (399) -6.02% 32.31% (971) +0.92% 52.38% (1,574) +5.70%
Browserify 11.91% (358) +2.33% 52.95% (1,591) +0.84% 25.76% (774) -0.76% 9.38% (282) -2.41%
Parcel 30.18% (907) -15.14% 49.78% (1,496) +3.34% 12.98% (390) +7.47% 7.05% (212) +4.32%

分析上述结果,排在常用的前三名的工具为:NPM Scripts (64.39%), Webpack (52.38%) 和 Gulp (45.79%)。

常用NPM Scripts和Webpack工具的人增加速度很快。

Parcel的使用量也有了可观的增加,受访者有12.98%的人说使用过一点,比去年增加了7.47%,有7.05%的人说常用,比去年增加了4.32%。

问题20 JavaScript转义工具

在最近几年,在开发者的会在项目开发中愈来愈多的使用转义工具对JavaScript进行转义。

虽然我不期待JavaScript转义工具在今年会下降,可是也对它的变化也很感兴趣,想知道它到底增加了多少。

问题内容:你是否有使用Babel对JavaScript代码从ES6转为ES5?

结果以下:

选择 人数 占比 比较2018年
2,451 81.56% +4.80%
没,虽听过但没使用过 466 15.51% -4.01%
没,从未听过 88 2.93% -0.79%

Babel使用率仍在持续的提高,有 81.56%的人说他们已经在项目中使用Babel,这比去年提高了4.8%。

正如你所期待,在较少工做经验的开发者中有70%的人代表他们不多使用Babel转义工具。

21 JavaScript扩展语言

本问题的是去年新增的问题,主要调查受访者对JavaScript扩展语言的了解,如:TypeScript 和 Flow。

TypeScript是去年排在常用的首位,可是今年呢?

问题内容:请说出你在JavaScript扩展语言的经验?

从未听过 了解过 使用过一点 常用
TypeScript 1.16% (35) -1.07% 36.74% (1,104) -11.31% 30.18% (907) +2.35% 31.91% (959) +10.03%
Flow 27.92% (839) -5.99% 55.97% (1,682) +5.50% 11.78% (354) +0.83% 4.33% (130) -0.34%
Elm 29.42% (884) +0.10% 63.93% (1,921) -0.47% 5.36% (161) +0.29% 1.30% (39) +0.09%
ClojureScript 32.31% (971) -1.24% 65.69% (1,974) +2.09% 1.73% (52) -0.65% 0.27% (8) -0.21%
Dart 27.75% (834) N/A 67.62% (2,032) N/A 4.13% (124) N/A 0.50% (15) N/A

TypeScript仍就是大部分开发者会常用的语言,占了 31.91%,比去年增加10.03%。

可是其余扩展语言彷佛没有看到有大的变化,无论是增加仍是减小。

这个结果彷佛就代表了当项目中须要用到JavaScript扩展语言的时候, Typescript 已是大部分开发者的首选项。虽然目前绝大多数的开发者并不了解 Typescript ,可是随着时间的不断增加,将来 Typescript会发展什么样子呢?

问题22 JavaScript Linting

JavaScript Lint工具其实能够算是JS工程化的一部分了,在去年ESLint已经很清晰占领Lint工具的主要地位。

问题内容:你会选择哪个Lint工具在项目中应用?

结果以下:

Lint工具 人数 占比 与2018年比较
ESLint 2,286 76.07% +15.39%
未使用过 360 11.98% -3.42%
JSLint 143 4.76% -2.44%
JSHint 67 2.23% -1.74%
StandardJS 43 1.43% -0.16%
其余 106 3.53% +2.54%

结果已经很清晰的代表了,当其余工具的使用率在降低的时候,ESLint的使用率却在不断提高。76.07%的人代表他们会在项目开发中使用ESLint,这比去年提升了15.39%。

其中有部分缘由可能要感谢Typescript团队,这多是由于他们在今年2月份宣布放弃TSLint,和集中能力去改善ESLint在TS项目中的支持(新闻连接)。

今年从未使用过Lint工具的人数降低到了11.98%。这代表了有88.02% 的开发者已经会在项目中使用Lint工具改善代码质量,这比去年的84.6%提升了3.42%。

没有意外状况的话,ESLint将会在Lint工具中持续处于领导地位。

问题23 JavaScript测试工具

本问题主要调查受访者们在JavaScript测试领域的知识。

今年,本问题有所改变,由于大部分受访者认为在项目中他们可能使用多种测试工具。所以,今年受访者能够进行多选。

下面结果中将会列出与去年对比的增加比,因为今年是多选,因此每一个工具均可能是提高的状况。

问题内容:你会选择哪些工具来测试你的代码?(多选)

结果以下:

测试工具 人数 占比 与2018年比较
Jest 1,348 44.86% +22.83%
没有使用过 1,071 35.64% -7.98%
Mocha 785 26.12% +12.17%
Jasmine 585 19.47% +8.52%
Enzyme 560 18.64% +16.86%
Cypress 378 12.58%
QUnit 184 6.12% +1.94%
Ava 102 3.39% +2.25%
Tape 57 1.90% +0.98%
其余 109 3.63% +3.63%

与2018年相比,Jest仍排在首位占了44.86%,Mocha (26.12%),Jasmine (19.47%) 和 Enzyme (18.64%) 则是下一批最常使用的测试工具。

有64.36%的开发者会使用测试工具测试他们的代码,这比去年增加了7.98。

我认为今年的结果已经代表在JavaScript测试中有不少测试工具可供选择。即便Jest还是排在首位,可是在市面上还有各类各样的工具去帮助你测试JavaScript。

问题24 性能测试

本问题是今年新增的,主要为了找出开发者是如何利用工具来表现他们项目的性能。

目前市面上有不少性能工具或浏览器特性能够用来展现网站性能,可是我仍然期待能够看到最多使用的工具是什么。

问题内容:您使用如下哪些工具,库或语言功能来提升性能?(多选)

结果以下:

工具 人数 占比
Lighthouse 1,566 52.11%
没使用过 952 31.68%
WebPageTest 730 24.29%
Service Workers 695 23.13%
Pingdom 317 10.55%
AMP (Accelerated Mobile Pages) 174 5.79%
其余 109 3.63%

Lighthouse是当前最受欢迎的性能测试工具,占了52.11%。

不过使人吃惊的是,排在第二个的是没使用过,占了31.68%。

对于其余的选项则说明, 24.29% 开发者说会使用WebPageTest,23.13%的人会在项目中使用Service Workers技术提升。

还让人感到奇怪的是,有5.79%的人正在项目中实施AMP(Accelerated Mobile Pages),这多是由于Google这几年一直力推AMP,可是它仍然是小众市场所能适用的工具。

问题25 辅助功能测试

这也是今年新增的问题,主要是分析出受访者辅助功能测试工具的使用。

注:辅助功能指的是网站或应用对那些没法正常访问的用户提供辅助性访问功能,如:提供视觉障碍者访问功能。

问题内容:你会在网站或应用中会使用哪一种辅助功能测试工具?

工具 人数 占比
从未使用 1,897 63.13%
颜色对比检测 (如: contrastchecker.com) 667 22.20%
屏幕阅读测试 (如: JAWS, Voiceover) 464 15.44%
WAVE 285 9.48%
其余 282 9.38%

使人吃惊的是, 63.13%的人说他们从未使用过工具检测网站或应用辅助功能。

22.20%的人说他们会使用颜色对比检测工具,只有15.44%的人会使用屏幕阅读工具。

不得不说,这个结果让人感到十分沮丧。

虽然这个结果能够得知为何你们都不使用辅助功能测试工具的现象,可是做为一名认为咱们创建的网站或应用应该服务于每一个人,可是看到有超过3分之2的人没有作辅助功能测试实在太让人感到悲哀了。

一些工具像Wave或Axe(一些受访者在其余工具提到的)是很是容易使用,在这里我很是推荐你们在项目中进行使用,若是你还没使用过呢。

同时但愿咱们对这些工具的价值和易用性了解越多,那么开发者使用工具可能性就越高。

问题26 Javascript 包管理工具

这是今年调查的倒数第二个问题,主要关于JavaScript包管理工具。

问题内容:你会选择哪一个JavaScript包管理工具在项目中使用?

去年NPM是最受欢迎的一个,可是yarn紧跟着,过去一年了是否有其余变化呢?

结果以下:

选择 人数 占比 与2018年比较
NPM 1,965 65.39% +2.00%
Yarn 895 29.78% -0.36%
未使用过 135 4.49% -1.24%
其余 10 0.33% -0.40%

从今年的调查结果来看,NPM比去年略有提高,占了65.39%。

Yarn反而有所降低,只占了29.78%。

总之,NPM是大部分开发者所选的包管理工具,相比较去年,今年的结果也没有太多变化。

问题27 通用工具的使用

最后一个问题就是前端各种工具的使用(其中部分工具不太适用于以前的类别)。

问题内容:请选择下列工具你的使用经验?

结果以下:

从未听过 了解过 使用过一点 常用
NPM 0.43% (13) -0.41% 1.80% (54) -0.69% 10.75% (323) -1.14% 87.02% (2,615) +2.24%
Yarn 3.29% (99) -2.95% 22.30% (670) -4.21% 23.79% (715) +2.84% 50.62% (1,521) +4.32%
Babel 2.70% (81) -1.07% 16.71% (502) -4.22% 30.98% (931) +1.22% 49.62% (1,491) +4.08%
Prettier 15.67% (471) -14.76% 21.60% (649) -8.03% 22.30% (670) +6.25% 40.43% (1,215) +16.53%
Yeoman 24.76% (744) +5.63% 40.67% (1,222) -1.18% 26.69% (802) -3.07% 7.89% (237) -1.37%

从上面的工具中,NPM仍然是大部分受访者常用的工具,占了87.02%。而yarn为50.62%,Babel为49.62%是下一批最常使用的工具,并且大部分工具都比去年的使用率有所提高。

相比较去年最大的变化是,大部分开发者都会常用Prettier,从去年的16.53%增加到40.43% 。

Yeoman略有降低,从去年的趋势就可看出。

总结

因此这就是今年咱们调查出来有趣的结果。

在某些前端领域内,开发者们正在肯定使用某几个工具进行组合。ESLint, NPM Scripts 和 Webpack分别对应着JavaScript Lint,任务脚本和打包工具的主导地位。

反观过来,在JavaScript框架或库中,React已经确立了主要地位,然而 Vue.js也紧跟着后面,也有可能成为首位。21.66%的开发者以为没有一个库或框架在项目开发中必不可少,并且浏览器JS也将愈来愈强大了。

今年调查结果最让人吃惊的是关于辅助功能测试部分,有 63.13%的开发者说他们从未对他们的项目中应用辅助功能进行测试。做为一名开发者,咱们必须比这作的更好,不只仅是由于这是在道德上市正确的事情,而是无障碍诉讼也愈来愈广泛。

在CSS领域中,Sass已经是最受欢迎的CSS处理器,但Bootstrap框架的使用率已有略微降低,由于如今大多数开发者在项目开发中不会使用任何CSS框架。

大多数开发者如今会使用CSS Lint和命名规范,比没有使用要多,其中53.21% 使用CSS Lint, 52.08%使用CSS命名规范。

CSS-in-JS继续成长增加,44.69%的开发者正在项目中使用。

总之,从上面的调查结果而言,工具的愈来愈成熟,合并也正在发生。同时,工具愈加强大,工具的替换也愈来愈少。这真是使人感到兴奋的一个结果。

几年前,大多数类型工具都尚未出现领导性的工具。可是在目前,已经出现主导定位的工具,这将有助于前端技术的成长和沉淀,并且对于新人进入前端来言,也可以清晰知道本身须要了解哪些工具。


在这里,再次感谢各位参与本次调查的朋友们。

若是各位对调查结果有任何疑问,能够在Twitter对我进行留言。

本调查报告时间为:2019年11月12日

本文由博客一文多发平台 OpenWrite 发布!
相关文章
相关标签/搜索