2020 年 JavaScript 状态调研报告小结
共 5624字，需浏览 12分钟
·
2021-01-19 07:46
一年一度的 Discover the State of JS 2020 results 在前几天新鲜出炉了，每次阅读这份报告都能帮助我快速地了解到 JavaScript 世界在这一年里都发生了哪些事情，同时也给了我一次查漏补缺的机会，让我十分收益。
今年我打算以文字的方式，和大家快速分享一下这份报告在「语法」和「框架」两个部分所释放出的信息，希望能够对大家有所帮助和启发。
今年的调查覆盖率了 137 个国家的 23,765 个人，大多数被调研者来自美国或西欧。报告地址：https://2020.stateofjs.com/en-US/。
1. Features
这一部分我将会针对 ES6 以来，新的语法特性的使用情况进行概括和总结，并偶尔发表一些自己的看法，如果您对某个内容有自己的见解，也欢迎您在文章的评论区下方留言。
注意每个语法特性背后的百分数代表着：被调研的开发者中使用过该特性的人数占比。
1.1 语法特性
语法特性方面，像 Destructuring（89.1%） ， Spread Operator （92.8%）， Arrow Functions （97.9%）这样便宜好用又大碗的语法特性已经被广大开发者运用的滚瓜烂熟。但是像 Nullish Coalescing （45.3%）， Optional Chaining （66.7%）这样同样好用的不得了的语法特性看起来并没有被普及开来广泛使用，不想代码里再有丑陋的 a && a.b && a.b.c 判断符，直接上手就来一个 a?.b?.c 实在是既潇洒又酷。
毫不意外 Private Fields （10.9%）这个语法特性不仅使用的人不多，而且 43.9% 的被调研开发者表示听都没听说过。我特地去查了下，这个语法特性是 ES2020 草案提出的，目前 Firefox，IE 和 Safari 还不支持。
但是这个语法特性表示 JavaScript 终终终于要有语法层面的私有类字段了，很高兴看到 JavaScript 这门基于原型链的语言在 OOP 范式上又前进了一小步，不知道 Java 开发者不知道会不会感到非常开心？
1.2 语言特性
Async/Await （95.2%）， Promises （96.2%）这样的老牌异步解决方案看来已经是耳熟能详，被开发者广泛使用了。但是像Decorators（47.4%）， Dynamic Import （42.8%）语法使用的人却并不多，至于 Proxies （22.3%） Promise.allSettled() （14.7%）这两个语法则更是不仅使用的人不多，连没听说过的人都不少。
如果说平时写业务很难用到像 Proxy 这样的对象代理方案，用的人少还情有可原。像 Dynamic Import 这种动态加载资源的方案配合上 webpack 打包出异步加载的 chunk 一起使用，绝对是页面性能进一步优化的大杀器，还不了解同学可以深度研究一下。
Promise.allSettled 这个方法终于补齐了 Promise 系列的全家桶，原来的 Promise.all 方法只在异步执行的函数集相互依赖时有效，碰上想要了解每个异步函数解决状态的情况，还是 Promise.allsettled 方法更好使。
1.3 数据结构
数据结构方面，Maps （73.4%）， Sets （66.9%）这样的数据结构已经比较广泛的被开发者们使用，而像Typed Arrays （34.9%）， Array.prototype.flat() （39.6%）这样的数据结构和新语法则较少被用在工作之中，BigInt （13.9%）的使用率最低，但一般开发需求中也的确用不上。
有一说一，Array.prototype.flat() 这个方法其实挺好用的，虽然我们可以通过 Spread Operator 快速将一个 2 层嵌套的数组「拍平」变成一个一维数组，但是当我们需要对一个多于 2 层的数组进行「拍平」时，通过向 flat() 方法中传入参数的方式，显然更加方便。
1.4 浏览器 API
Local Storage （90.6%）， Fetch （87.1%）这种今年看来已经不再新鲜的 API 毫无疑问大家都在用，也确实在存储和 HTTP 请求上没有什么更好的原生方案。
而 WebSocket 62.6% 的使用率，Service Workers 42% 的使用率和 Intl 31.3% 的使用率也算是合情合理，毕竟受使用场景限制。
Shadow DOM （42.1%） ，Custom Elements （33.4%）无疑是今年最令人疯狂的浏览器 API 了，想想不通过使用 React 和 Vue，仅通过浏览器原生提供的功能就能实现高效可复用的组件化，生命周期函数什么的也一应俱全，仿佛好不容易学会的 React 好像明天就要过时，JavaScript 原教旨主义者终于一统天下。
可是别高兴的太早，现实还是很骨感，别说现在还没有像 Fusion，Antd 一样成熟的 UI 组件库可以开箱即用，如何通过这些 API 稳定搭建 SPA 应用，整个社区还没有讨论出一个像 React，Vue 和 AngularJS 一样的成熟方案，所以还是先等等吧，先熟悉一下 API 总是没错的。
至于像 Web Audio （20%）， WebGL （17.5%）， Web Animations （16.3%），WebRTC （14%），Web Speech API （8.2%）， WebVR （3.3%）这些只有特定开发需求才会使用的 API，使用的人少也是十分正常，但是可千万不要因此就忽略了这些 API。
像 Web Audio ，Web Speech 和 WebRTC 对于影音视频流的传输和交互就非常重要，WebGL ， Web Animations 和 WebVR 则更是将 Web 世界的表达能力拉高了好几个台阶。我觉的大家真该好好想想如何结合自身的业务场景通过这些浏览器能力寻求更新的突破，说不定下个风口或是交互模式创新就诞生在你的团队。到时候可千万别忘了给我发个红包（笑）。
1.5. 其他
最后我们再看看 WebAssembly (WASM) 的调研情况，真正使用过的开发者占比为 10.5%，73.9% 的开发者听过但是没用过，15.6% 的开发者则是听都没听说过。
我觉得大多数前端开发者应该都处于听过没用过的象限，目前社区关于 WebAssembly 也确实没有很大的音量。用 C++ 和 Rust 编写 Web 应用这种事情对于 Web 开发者而言也的确没有多大吸引力。未来的发展如何，我还是抱着静观其变的态度。
2. 技术框架
技术框架部分我将重点关注技术框架的使用数量以及对框架的满意程度两个方面，它们代表了当前流行的技术选型以及未来可能流行的技术方向。每一种技术我都会附带 🔗 链接，方便您点击了解更多技术细节。
2.1 语言风格
2020 年对于 JavaScript 究竟应该怎么写才对味这个问题， TypeScript 毫无争议地一锤定音，93% 的参与调研者表示十分满意通过 Typescript 约束自己的 Javascript 代码，看来这个年头还不拥抱 Typescript 的开发者绝对是 out 了。
而对于当前的语言风格是否令人满意的调研则表示，在满分 5 分的限定下，无论是 2019 年还是 2020 年，开发者们都只打了 3.6 分这样差强人意的分数来表达 JavaScript 在更优雅的编写方面还有很多探索的空间。
2.2 前端框架
前端框架方面 React，Angular 和 Vue.js 毫无疑问地依然是世界三大框架。但说出来你可能不信，「最令人满意的前端框架」居然不是 React 而是 2019 年才由 Rich Harris 推出的 Svelte。有 66% 的被调研者表示感兴趣这个框架，并且 89% 的被调研者表示使用这个框架令他们感到十分满意，总之一句话，用过的都说好。
Svelte 人如其名，强调在构建时就直接产出最小的完整的代码，从而在使用时可以直接使用构建后的组件，而无需添加框架自身，因此不仅打包后的应用代码体积更小，由于没有 diff 操作，性能也大幅提高。只可惜目前 Svelte 还不支持 Typescript，也没听说过哪些大型项目在使用，否则众多前端开发er 们可就又有的学了。
2.3 数据层
数据层框架上国外火的一塌糊涂，国内却怎么也火不起来的 GraphQL 依旧是数据层框架排行榜的万年老二，使用最多的状态管理框架依旧是耳熟能详的Redux。沾着 GraphQL 和 React 的光，Apollo Client 近三年来也一直稳稳地占据了排行榜第三名的位置。
比较有意思的是 2020 年异军突起的两大框架 Vuex 和 XState 迅速的从老牌状态管理框架 Redux，MobX 的身体上越过分别获得了最受开发者满意排场榜上第三名和第四名的好成绩。我 Vuex 倒是没怎么用过，但是 XState 倒是实打实调研了一把，确实是物有所值的好框架，特别是最近流行的逻辑编排，状态编排，各种编排，配上自带的流程图，不仅立刻感觉高大上了很多，而且确实切实解决程序状态复杂后，难以梳理清楚的老问题。
2.4 后端框架
我最近一年几乎没怎么写服务端应用，通过调研报告才发现我用的最熟练的 Koa 的流行度已经连年下跌，到了使用度排名的中部位置。现在 Next.js 和 Express 才是开发服务端应用的首选，并且也是用过的都说好。仔细一看 Hulu，Docker，Netflix 都在用 Next.js，和我一样掉队的同学真应该好好补补功课。
2.5 测试框架
说到测试框架，自从 2019 年 Jest 从 Mocha 手中抢过龙头棍，从此就一直稳坐测试框架届的头把交椅。在使用度排名上，Mocha 和 Storybook 紧随其后，但是看起来似乎不可能撼动 Jest 的江湖地位。
比较值得注意的是，由 Kent C. Dodds 开发的 Testing Library 测试框架一经发布就引来了很多前端开发者的关注。Testing Library 主打 DOM 测试，全面支持主流的三大框架，提供一堆好用不贵的 API，用起来那叫一个符合用户使用习惯。可惜国内的开发者大多都不重视单元测试这块，更别提是 DOM 元素级别的测试，我大胆预测下 Testing Library 在国内会像 GraphQL 一样一直保持不温不火的状态，确实可惜但也没办法。
2.6 构建工具
说到构建工具，那是真的有的聊了，虽然 webpack 依然以 89% 的使用率独占鳌头，但是要看众多开发者 2020 年感兴趣或是满意度高的构建工具，你会惊讶地发现曾经如日中天的 gulp.js，Browserify 已经渐渐显露出中年危机的势头，而 webpack 也在今年跌落神坛，在最受用户满意的构建工具排行榜只排到了第四名。
要说第三名被 TypeScript 抢去还能理解，前两名分别是 esbuild 和 Snowpack 我相信很多国内的开发者听到一定一头雾水，但其实分别去官网看看就能清楚这两个构建工具主打的还是构建速度的提升，尤其是 esbuild ，从官网上给的数据来看要比 webpack 构建速度提升了整整 113 倍。
老实说，随着项目越来越大，再加上 monorepo 方案逐渐在国内流行开来，构建时长有时候真是直接影响着开发体验，一个项目 build 十几秒，怎么看也不像是前端开发应该出现的场景，无论是 esbuild 还是 Snowpack，如果有机会，还是鼓励大家多去尝试，总结经验，造福社区。
2.7 应用端 / 桌面端
毫无疑问，要想用 JS 编写桌面端应用，最好的框架绝对是 Electron。但如果要是开发移动端应用的话，2020 年选择就不止有 React Native 了，2020 年新登台的 Capacitor 同样十分亮眼，虽然只有 10% 的被调研者真正在使用，但是其中 84% 的开发者都表示使用起来十分令人满意。
但是从使用体验上看，整体的移动端/桌面端框架的满意度并不高，近几年基本保持在 3 分左右的状态，看来前端想要在各个端上实现反复左右横跳，还需要更加具有突破性的技术创新。
3. 小结
以上就是 2020 年 JavaScript 整体状态的快速一览，总的来说，无论是语言特性还是各种框架和库，在 2020 年，都没有什么突破性的变化，爆发式的增长。但是仔细观察你会发现实际上在各个细分领域，都有些创新和实践在悄悄地发生，比如构建性能的提升，前端测试的完善，Web 表达的丰富等等等等。
一些前端领域老大难的问题，如何更高性能地实践组件化，如何真正实现 JavaScript 的「一次开发，处处运行」依旧没有一个盖棺定论，换句话说还在等待着更聪明的开发者来解决。
如果非要问 2020 年最红的技术是什么的话，我非常不客观地认为本届的奖杯毫无疑问地要颁发给 TypeScript，随着 TypeScript 新版本的更新，编写前端代码真是越来越对味。
