2020 全球 JS 调查报告新鲜出炉

柔情只为你懂 2023-01-06 05:41 133阅读 0赞

#  #

> 完整报告地址: https://2020.stateofjs.com/zh-Hans/  
> 润色/翻译: 蓝色的秋风(github/hua1995116)

千呼万唤的全球2020的JS报告终于出来了。顺便附上2020全球CSS报告地址 [2020年度全球CSS报告新鲜出炉][2020_CSS]

![image-20210114001259007][]

我们来看看这一个糟糕却又不平凡的一年，JS发生了什么样的变化。

![image-20210114001739976][]

尽管2020年很糟糕，但 JavaScript 作为一个整体仍然设法向前发展。随着语言本身的不断改进，得益于诸如**可选链操作符**和**空值合并操作符**并等新特性，TypeScript静态类型的普及更是将JS带到了一个全新的高度。

在框架方面，就在我们认为一切都已解决的时候，Svelte 横空出世以全新方式给前端注入新的血液。 在多年的webpack统治下，甚至构建工具也显示出新活动的迹象。

但是这次的区别是，相对而言，“老”后卫什么都没走。 Svelte和Snowpack很棒，但是React和webpack也很棒。 可以肯定的是，它们最终也会成为JavaScript大流氓的牺牲品，但是不会持续很多年。

所以，让我们享受我们所拥有的: 一个不断变得更好的伟大的生态系统！

## 访问对象统计 ##

采样对象一共为 20744 位开发者。

![image-20210114003014449][]

## 特性 ##

虽然大多数受访者都知道调查中提到的大多数JavaScript特性，但很多人还没有真正使用它们。

这图表显示了按类别分组的所有特性的不同采用率。外圈的大小对应于了解某项功能的用户总数，而内圈则代表实际使用过该功能的用户。

![image-20210114003419236][]

## 技术现状 ##

2016年 - 2020年 趋势图

每条线从2016年到2020年（粗部为2020）。纵轴越高，表示一项技术被更多的人使用，横轴越大，表示有更多的用户想要学习，或者曾经使用过，还会再次使用。

![image-20210114004041187][]

可以看出随着年限的的增长。webpack、Express、TypeScript、Jest、React 可以说是非常强势了。

### 风味（Flavors） ###

![image-20210114011042569][]

可以看出 TypeScript 依旧独领风骚，其次就是 Elm ，但是 PureScript 也是一个值得关注的增强类型语言。

![image-20210114004722545][]

对 TypeScript 的熟悉度一片叫好。

**其他工具**

![image-20210114004757675][]

### 前端框架 ###

![image-20210114011217904][]

正如开头所说，svelte 的出现真的是对前端行业的冲击，原以为三大框架（React、Vue.js、Angular）包揽所有的时候，它出现了，一度成为了第四名（使用量），但是从兴趣度和满意度来看，它未来的潜力不可估量。

兴趣度

![image-20210114011448248][]

满意度

![image-20210114011511595][]

### 数据层 ###

![image-20210114011556857][]

使用排名比较高的状态管理依旧是Redux、Vuex、Mobx。 数据管理为 GraphQL 和 Apollo，并且 XState 横空出世。

**其他工具**

![image-20210114005333559][]

### 后端框架 ###

![image-20210114011713944][]

Express 依旧是统治地位，而 Next 和 Nuxt 这些服务端渲染的框架也逐渐成为大家的所选的框架。

**其他工具**

![image-20210114005400642][]

### 测试框架 ###

![image-20210114011830965][]

Jest和 Mocha 在使用量上依旧是统治地位，但是新增了 Testing Libray 很强劲。

以下是满意度排行。

![image-20210114005427559][]

什么是 `Testing Library` ？用于 DOM 和 UI 组件测试的一系列工具，主要 API 包含 DOM 查询，更可以和其他测试工具(jest、cypress)配合，用于更多场景(react、vue、svelte)。而它是 React 的官方推荐。

> 我们推荐使用 [React Testing Library][]，它使得针对组件编写测试用例就像终端用户在使用它一样方便。
> 
> \----摘自 React 官网(https://zh-hans.reactjs.org/docs/test-utils.html)

### 打包工具 ###

![image-20210114011945951][]

虽然短时间内 webpack 使用量还处于霸主地位，这一年打包工具的发生了巨大的变化。

以下为满意度

![image-20210114010039881][]

可以说这里发生了天翻地覆的变化。从 Parcel 到 Snowpack ，再到后来的 esbuild ，每一个都是打包的好手，至于 Vite 为什么没有在其中，我猜想，Vite 最开始只是为了解决 Vue 单个框架的方向，受众面不够广泛（现在它已经支持了多种框架的打包了）。

放张图来看看这些 bundleless 工具的速度吧。

![image-20210114010649085][]

**其他工具**

![image-20210114010412943][]

移动和桌面端

![image-20210114012121186][]

Electron 依旧是桌面端的第一选择， Cordova 和 React Native 也是移动跨端的热门选择。但是新出的 Capacitor 值得关注。

## 其他工具 ##

**常用的工具函数库有？**

![image-20210114012305700][]

**其他工具函数库**

![image-20210114012350566][]

**JavaScript 运行时选择**

![image-20210114012435704][]

**经常使用那（些）文字編輯器？**

![image-20210114012456227][]

**常用用于开发的浏览器有哪些？**

![image-20210114012519560][]

## 资料 ##

**常用的 blog 和杂志？**

![image-20210114012556370][]

**关注了哪些网站和课程？**

![image-20210114012616128][]

[2020_CSS]: https://segmentfault.com/a/1190000038427691
[image-20210114001259007]: /images/20221119/6cd1917cb8fd4490950818eb2a2551de.png
[image-20210114001739976]: /images/20221119/de6d18b79d0a43e3bddf14551195bb43.png
[image-20210114003014449]: /images/20221119/376d48ac2a424f9cbc6e234cc989a7c4.png
[image-20210114003419236]: /images/20221119/c049c8c0fd0049ff997e96d634c1d135.png
[image-20210114004041187]: /images/20221119/8f3fba48ce2a4c16a635efcf0054212b.png
[image-20210114011042569]: /images/20221119/c385cef4005e4056a9ba2c610b2d92e2.png
[image-20210114004722545]: /images/20221119/2272f142f669473ab28b5d00cb2b89b1.png
[image-20210114004757675]: /images/20221119/371bcaa256d2464c9d8ed833db7980ca.png
[image-20210114011217904]: /images/20221119/0cbaac5de63342f28ee575b0768d1e3a.png
[image-20210114011448248]: /images/20221119/5f47ac4df898495c91e1349b01cdac4c.png
[image-20210114011511595]: /images/20221119/5b8a74f1814f41cc99e406298790a531.png
[image-20210114011556857]: /images/20221119/b03de0b44bdd46d391806a779204afda.png
[image-20210114005333559]: /images/20221119/c6b0b0695b6540008cbe35feb0750cc4.png
[image-20210114011713944]: /images/20221119/e81e564f60cb47fdbeb570976e59e5ab.png
[image-20210114005400642]: /images/20221119/d5f6b4ff2bc24175a68f6628bfe7ff09.png
[image-20210114011830965]: /images/20221119/c4eaef6979ff4485a763164666842051.png
[image-20210114005427559]: /images/20221119/9c62d79c8af44c928c804784ac254423.png
[React Testing Library]: https://testing-library.com/react
[image-20210114011945951]: /images/20221119/215d64b0af47443c8fbe98fd1182732b.png
[image-20210114010039881]: /images/20221119/3b386a3493e04e74a2f9f57578fdb3f6.png
[image-20210114010649085]: https://img-blog.csdnimg.cn/img_convert/7943a4499b67864623da5dcb38a03e75.png
[image-20210114010412943]: https://img-blog.csdnimg.cn/img_convert/f7311e0d24df0d588c1c0190326a142a.png
[image-20210114012121186]: https://img-blog.csdnimg.cn/img_convert/637b071b155edeb030160e682946f1cb.png
[image-20210114012305700]: https://img-blog.csdnimg.cn/img_convert/63d6a6e377f71381f85d0b0b2f854295.png
[image-20210114012350566]: https://img-blog.csdnimg.cn/img_convert/31f88e57880f02ff40857a040969a9f2.png
[image-20210114012435704]: https://img-blog.csdnimg.cn/img_convert/08687d36b1d808579c0b549397125676.png
[image-20210114012456227]: https://img-blog.csdnimg.cn/img_convert/7b2103d999511a6a8c36dfc90fc5ce79.png
[image-20210114012519560]: https://img-blog.csdnimg.cn/img_convert/1b89639b4dfd9fb79f3f165cacfb876a.png
[image-20210114012556370]: https://img-blog.csdnimg.cn/img_convert/f1768235890fe4c94faafee013344690.png
[image-20210114012616128]: https://img-blog.csdnimg.cn/img_convert/62e0554c4d815a60ac219ac48189dcaf.png