
翻译者 | 弯月,白眉林 | 屠敏
为的是深入细致探究2019年 JavaScript 的产业发展情况,他们从下列两个各方面特别针对 JavaScript 积极开展了问卷:
词汇特点能载入JavaScript的词汇后端框架统计数据层前台架构试验跨终端与桌面合作开发的辅助工具其它辅助工具合作开发者总体的观点总计21,717名合作开发者参予了本次问卷。那些合作开发者源自相同的天堂,薪水、合作开发实战经验、所处子公司体量、异性恋、职务等方各方面面的相似性也非常大:
北欧国家:英国、新西兰、白俄罗斯、比利时、瑞典、阿根廷、新西兰等薪水:0-20亿美元+合作开发实战经验:0-20年+子公司体量:1-1000人+职务:全栈合作开发、后端合作开发、Web合作开发、前台合作开发等
概述
在深入细致分析之前,让他们先来看一看2019年 JavaScript 生态系统的全面概述!
2016-2019年间各项技术和架构的产业发展曲线

上图中每条线代表一种词汇或架构在2016-2019年间的产业发展曲线。纵向越高代表使用这项技术的人越多,而横向越靠右代表想学习这项技术的人越多。
满意度与使用情况

上图显示了每种技术的用户满意度。大致可分为下列四个象限:
评估:低使用率,高满意度。代表值得关注的技术。采用:高使用率,高满意度。代表可安全采用的技术。回避:低使用率,低满意度。代表目前应避免的技术。分析:高使用率,低满意度。 如果你正在使用该技术,请重新评估。
词汇特点
JavaScript 作为一种编程词汇,最值得令人欣慰的事情就是它一直在不断的产业发展中。从箭头函数到解构,在过去的几年中 JavaScript 增添了许多关键功能,且已正式成为他们编写代码时不可或缺的一部分。
下面他们将从语法、词汇、统计数据结构、浏览器API以及其它方面深入细致分析 JavaScript 编程。
使用情况概述

上图显示了 JavaScript 各个类别的功能的使用情况。
外圈代表了解该功能的用户总数,内圈则代表实际使用过该功能的用户。
语法
1. 解构(destructuring)
一种 Javascript 表达式, 可以将属性/值从对象/数组中取出,赋值给其它变量。
85.1%的用户曾使用过,8.4%的用户有所了解但未曾使用,6.5%的用户未曾听说过。

2. 展开语法(spread syntax)
可以在函数调用/数组构造时, 将数组表达式或者string在语法层面展开;还可以在构造字面量对象时, 将对象表达式按key-value的方式展开。
89.5%的用户曾使用过,7.5%的用户有所了解但未曾使用,3%的用户未曾听说过。

3. 箭头函数(Arrow Function)
箭头函数表达式的语法比函数表达式更简洁,并且没有自己的this,arguments,super或new.target。那些函数表达式更适用于那些本来需要匿名函数的地方,并且它们不能用作构造函数。
97%的用户曾使用过,2.2%的用户有所了解但未曾使用,0.8%的用户未曾听说过。

词汇
1. Proxy 对象
Proxy 对象用于定义基本操作的自定义行为(如属性查找,赋值,枚举,函数调用等)。
17.3%的用户曾使用过,39.7%的用户有所了解但未曾使用,43%的用户未曾听说过。

2. Async/Await
async function 用来定义一个返回 AsyncFunction 对象的异步函数。
88.4%的用户曾使用过,10.7%的用户有所了解但未曾使用,0.9%的用户未曾听说过。

3. Promise
Promise 对象用于表示一个异步操作的最终完成 (或失败),及其结果值。
93.8%的用户曾使用过,5.2%的用户有所了解但未曾使用,1%的用户未曾听说过。

4. 装饰器(Decorator)
简单来说,装饰器是将一段代码与另一段代码包装在一起的一种方式。
37.9%的用户曾使用过,37.4%的用户有所了解但未曾使用,24.7%的用户未曾听说过。

统计数据结构
1. Map
Map 对象保存键值对。任何值(对象或者原始值) 都可以作为一个键或一个值。
70.6%的用户曾使用过,23.5%的用户有所了解但未曾使用,5.9%的用户未曾听说过。

2. Set
Set 对象允许你存储任何类型的唯一值,无论是原始值或者是对象引用。
56.5%的用户曾使用过,30.6%的用户有所了解但未曾使用,12.9%的用户未曾听说过。

3. TypedArray
JavaScript TypedArray 是一种类似于数组的对象,其提供了在内存缓冲区中读写二进制统计数据的机制。
28.1%的用户曾使用过,35.4%的用户有所了解但未曾使用,36.5%的用户未曾听说过。

4. Array.prototype.flat()
flat() 方法会按照一个可指定的深度递归遍历数组,并将所有元素与遍历到的子数组中元素合并为一个新数组返回。
26.8%的用户曾使用过,40.8%的用户有所了解但未曾使用,32.5%的用户未曾听说过。

浏览器API
1. Fetch
81.5%的用户曾使用过,11.3%的用户有所了解但未曾使用,7.1%的用户未曾听说过。

2. 国际化(i18n)
Intl 对象是 ECMAScript 国际化 API 的一个命名空间,它提供了精确的字符串对比、数字格式化,和日期时间格式化。Collator,NumberFormat 和 DateTimeFormat 对象的构造函数是 Intl 对象的属性。本页文档内容包括了那些属性,以及国际化使用的构造器和其它语言的方法等常见的功能。
41.6%的用户曾使用过,39.5%的用户有所了解但未曾使用,18.9%的用户未曾听说过。

3. 本地存储(local storage )
只读的localStorage 属性允许你访问一个Document 源(origin)的对象 Storage;存储的统计数据将保存在浏览器会话中。
88%的用户曾使用过,10.3%的用户有所了解但未曾使用,1.7%的用户未曾听说过。

4. Service Worker
Service workers 本质上充当Web应用程序与浏览器之间的代理服务器,也可以在网络可用时作为浏览器和网络间的代理。它们旨在(除其它之外)使得能创建有效的离线体验,拦截网络请求并基于网络是否可用以及更新的资源是否驻留在服务器上来采取适当的动作。他们还允许访问推送通知和前台同步API。
36.1%的用户曾使用过,54%的用户有所了解但未曾使用,9.8%的用户未曾听说过。

5. Web 动画
Web Animations API 允许同步和定时更改网页的呈现, 即DOM元素的动画。它通过组合两个模型来实现:时序模型和动画模型。
14.2%的用户曾使用过,52%的用户有所了解但未曾使用,33.8%的用户未曾听说过。

6. Web 音频
Web Audio API 提供了在Web上控制音频的一个非常有效通用的系统,允许合作开发者源自选音频源,对音频添加特效,使音频可视化,添加空间效果 (如平移),等等。
20.6%的用户曾使用过,58%的用户有所了解但未曾使用,21.4%的用户未曾听说过。

7. Web 组件
作为合作开发者,他们都知道尽可能多的重用代码是一个好主意。这对于自定义标记结构来说通常不是那么容易 — 想想复杂的HTML(以及相关的样式和脚本),有时你不得不写代码来呈现自定义UI控件,并且如果您不小心的话,多次使用它们会让页面变得一团糟。
27.7%的用户曾使用过,61.2%的用户有所了解但未曾使用,11.1%的用户未曾听说过。

8. WebGL
WebGL (Web图形库) 是一种JavaScript API,用于在任何兼容的Web浏览器中呈现交互式3D和2D图形,而无需使用插件。
16.7%的用户曾使用过,68.6%的用户有所了解但未曾使用,14.7%的用户未曾听说过。

9. WebRTC
WebRTC (Web Real-Time Communications) 是一项实时通讯技术,它允许网络应用或者站点,在不借助中间媒介的情况下,建立浏览器之间点对点(Peer-to-Peer)的连接,实现视频流和(或)音频流或者其它任意统计数据的传输。
10.9%的用户曾使用过,46.3%的用户有所了解但未曾使用,42.9%的用户未曾听说过。

10. WebSocket
WebSockets 是一种先进的技术。它可以在用户的浏览器和服务器之间打开交互式通信会话。使用此API,您可以向服务器发送消息并接收事件驱动的响应,而无需通过轮询服务器的方式以获得响应。
59.2%的用户曾使用过,33.8%的用户有所了解但未曾使用,7.1%的用户未曾听说过。

11. Web Speech API
Web 应用可以利用 Web Speech API 处理语音统计数据。这个API包含两个组件:SpeechSynthesis(文字转语音)和 SpeechRecognition (异步语音识别)。
7.5%的用户曾使用过,46.8%的用户有所了解但未曾使用,45.7%的用户未曾听说过。

12. WebVR
WebVR API 能为虚拟现实设备的渲染提供支持 — 例如像Oculus Rift或者HTC Vive 这样的头戴式设备与 Web apps 的连接。
3%的用户曾使用过,48.4%的用户有所了解但未曾使用,48.6%的用户未曾听说过。

其它特点
1. 渐进式Web应用(Progressive Web App,PWA)
PWA 运用现代的 Web API 以及传统的渐进式增强策略来创建跨平台 Web 应用程序。那些应用无处不在、功能丰富,使其具有与原生应用相同的用户体验优势。
48.2%的用户曾使用过,45.5%的用户有所了解但未曾使用,6.3%的用户未曾听说过。

2. WebAssembly
WebAssembly 是一种新的编码方式,可以在现代的网络浏览器中运行 - 它是一种低级的类汇编词汇,具有紧凑的二进制格式,可以接近原生的性能运行,并为诸如C / C ++等词汇提供一个编译目标,以便它们可以在Web上运行。它也被设计为可以与JavaScript共存,允许两者一起工作。
7.1%的用户曾使用过,75.1%的用户有所了解但未曾使用,17.8%的用户未曾听说过。

可以载入JavaScript 的词汇
有许多词汇可以载入纯 JavaScript,主要包括:elm、TypeScript、clojurescript、Reason 和 purescript。
排名情况

上图显示了各个词汇的产业发展情况:人们对其的认知、兴趣以及满意度。
概况

上图显示了合作开发者对于各个词汇的评价。深色代表正面评价,浅色代表负面评价。
各个实战经验水平的使用情况

上图显示了相同实战经验年限的合作开发者使用各个词汇的情况。注意,图中的实战经验代表 JavaScript 的合作开发实战经验,而非某种技术的实战经验。
各个收入水平的使用情况

上图显示了相同收入水平的合作开发者使用各个词汇的情况。
相同体量子公司的使用情况

上图显示了相同体量的子公司使用各个词汇的情况。
合作开发者总体的满意度

上图显示了合作开发者对于当前所用词汇总体的满意度。
后端架构
下面他们来看一看 JavaScript 后端的架构和库,主要包括:react、vuejs、angular、ember、svelte、preact 等。
排名情况

上图显示了 JavaScript 各个后端架构和库的产业发展情况:人们对其的认知、兴趣以及满意度
概况

上图显示了合作开发者对于各个后端架构和库的评价。深色代表正面评价,浅色代表负面评价。
各个实战经验水平的使用情况

上图显示了相同实战经验年限的合作开发者使用各个后端架构和库的情况。注意,图中的实战经验代表 JavaScript 的合作开发实战经验,而非某种技术的实战经验。
各个收入水平的使用情况

上图显示了相同收入水平的合作开发者使用各个后端架构和库的情况。
相同体量子公司的使用情况

下图显示了相同体量的子公司使用各个后端架构和库的情况。
合作开发者总体的满意度

下图显示了合作开发者对于当前所用后端架构和库的满意度。
统计数据层
下面他们来看一看 JavaScript 应用对统计数据的管理和加载,这类的辅助工具主要包括:redux、graphql、apollo、mobx 和 relay 等。
排名情况

上图显示了 JavaScript 各个统计数据层辅助工具的产业发展情况:人们对其的认知、兴趣以及满意度
概况

上图显示了合作开发者对于各个统计数据层辅助工具的评价。深色代表正面评价,浅色代表负面评价。
各个实战经验水平的使用情况

上图显示了相同实战经验年限的合作开发者使用各个统计数据层辅助工具的情况。注意,图中的实战经验代表 JavaScript 的合作开发实战经验,而非某种技术的实战经验。
各个收入水平的使用情况

上图显示了相同收入水平的合作开发者使用各个统计数据层辅助工具的情况。
相同体量子公司的使用情况

下图显示了相同体量的子公司使用各个统计数据层辅助工具的情况。
合作开发者总体的满意度

下图显示了合作开发者对于当前所用统计数据层辅助工具的满意度。
前台架构
下面他们来看一看 JavaScript 前台的架构和库,主要包括:express、nextjs、nuxt、gatsby、koa、feathers、meteor、sails 等。
排名情况

上图显示了 JavaScript 各个前台架构和库的产业发展情况:人们对其的认知、兴趣以及满意度
概况

上图显示了合作开发者对于各个前台架构和库的评价。深色代表正面评价,浅色代表负面评价。
各个实战经验水平的使用情况

上图显示了相同实战经验年限的合作开发者使用各个前台架构和库的情况。注意,图中的实战经验代表 JavaScript 的合作开发实战经验,而非某种技术的实战经验。
各个收入水平的使用情况

上图显示了相同收入水平的合作开发者使用各个前台架构和库的情况。
相同体量子公司的使用情况

下图显示了相同体量的子公司使用各个前台架构和库的情况。
合作开发者总体的满意度

下图显示了合作开发者对于当前所用前台架构和库的满意度。
试验
下面他们来看一看 JavaScript 的试验辅助工具,主要包括:jest、cypress、storybook、puppeteer、mocha、enzyme、jasmine、ava 等。
排名情况

上图显示了 JavaScript 各个试验工具的产业发展情况:人们对其的认知、兴趣以及满意度。
概况

上图显示了合作开发者对于各个试验辅助工具的评价。深色代表正面评价,浅色代表负面评价。
各个实战经验水平的使用情况

上图显示了相同实战经验年限的合作开发者使用各个试验辅助工具的情况。注意,图中的实战经验代表 JavaScript 的合作开发实战经验,而非某种技术的实战经验。
各个收入水平的使用情况

上图显示了相同收入水平的合作开发者使用各个试验辅助工具的情况。
相同体量子公司的使用情况

下图显示了相同体量的子公司使用各个试验辅助工具的情况。
合作开发者总体的满意度

下图显示了合作开发者对于当前所用试验辅助工具的满意度。
跨终端与桌面合作开发的辅助工具
下面他们来看一看可以跨终端设备与桌面应用的 JavaScript 合作开发辅助工具,主要包括:electron、reactnative、nativeapps、expo、ionic、nwjs、cordova 等。
排名情况

上图显示了 JavaScript 各个合作开发辅助工具的产业发展情况:人们对其的认知、兴趣以及满意度。
概况

上图显示了合作开发者对于各个合作开发辅助工具的评价。深色代表正面评价,浅色代表负面评价。
各个实战经验水平的使用情况

上图显示了相同实战经验年限的合作开发者使用各个合作开发辅助工具的情况。注意,图中的实战经验代表 JavaScript 的合作开发实战经验,而非某种技术的实战经验。
各个收入水平的使用情况

上图显示了相同收入水平的合作开发者使用各个合作开发辅助工具的情况。
相同体量子公司的使用情况

下图显示了相同体量的子公司使用各个合作开发辅助工具的情况。
合作开发者总体的满意度

下图显示了合作开发者对于当前所用合作开发辅助工具的满意度。
其它辅助工具
在 JavaScript 的编程工作中,你需要使用文本编辑器,还需要依赖调试辅助工具和浏览器等。
实用函数库
你经常使用下列哪种实用函数库?

还有一些其它实用函数库:

文本编辑器
你经常使用下列哪种文本编辑器?

还有一些其它文本编辑器:

浏览器
你的合作开发主要涉及下列哪种浏览器?

还有一些其它浏览器:

构建辅助工具
你的合作开发主要使用下列哪种构建辅助工具?

还有一些其它构建辅助工具:

JavaScript 之外的编程词汇
你的合作开发还会使用下列哪种编程词汇?

还有一些其它编程词汇:

合作开发者对 JavaScript 的观点
为的是保证编程词汇的健康产业发展,他们应该听从社区的呼声。他们可以从合作开发者对 JavaScript 方各方面面的观点中发现问题,例如 JavaScript 的产业发展方向是否正确、复杂度是否在加剧、使用情况、以及变化速度等。
在调查问卷中,他们提出了下列两个问题,并要求参予者打分(1-5)。
产业发展方向
你认为 JavaScript 的产业发展方向是否正确?

复杂度
使用 JavaScript 构建应用是否过于复杂?

使用情况
JavaScript 是否被过度使用?

享受编程
你是否很享受 JavaScript 编程?

主要词汇
JavaScript 是否是你的主要编程词汇?

变化速度
你是否认为 JavaScript 生态系统的变化速度过快?

总结
最后为大家揭晓今年的各项大奖:
使用率最高的特点:箭头函数,超过97.8%的用户都使用了这个特点。用户基础最为庞大的技术:React, 总计16,099名用户都使用了该技术。用户满意度最高的技术:Jest,96.4%的用户都愿意再次使用该技术。合作开发者最感兴趣的技术:GraphQL,89.6%的合作开发者都希望学习该技术。合作开发者最看好的技术:Svelte,来年是否能超越其它技术,让他们拭目以待。原文:https://2019.stateofjs.com/
【End】
北邮教授为你揭秘5G的产业发展历程、内在规律,并重点阐述新技术在数字经济时代的作用以及对他们每个人的影响,5G时代你绝不能错过的干货课程,立即免费报名!