請(qǐng)查收 2020 全球 JS 現(xiàn)狀調(diào)查報(bào)告
完整報(bào)告地址: https://2020.stateofjs.com/zh-Hans/
潤(rùn)色/翻譯: 藍(lán)色的秋風(fēng)(github/hua1995116)
千呼萬(wàn)喚的全球2020的JS報(bào)告終于出來(lái)了。順便附上2020全球CSS報(bào)告地址 2020年度全球CSS報(bào)告新鮮出爐[1]

我們來(lái)看看這一個(gè)糟糕卻又不平凡的一年,JS發(fā)生了什么樣的變化。

盡管2020年很糟糕,但 JavaScript 作為一個(gè)整體仍然設(shè)法向前發(fā)展。隨著語(yǔ)言本身的不斷改進(jìn),得益于諸如可選鏈操作符和空值合并操作符并等新特性,TypeScript靜態(tài)類型的普及更是將JS帶到了一個(gè)全新的高度。
在框架方面,就在我們認(rèn)為一切都已解決的時(shí)候,Svelte 橫空出世以全新方式給前端注入新的血液。在多年的webpack統(tǒng)治下,甚至構(gòu)建工具也顯示出新活動(dòng)的跡象。
但是這次的區(qū)別是,相對(duì)而言,“老”后衛(wèi)什么都沒(méi)走。Svelte和Snowpack很棒,但是React和webpack也很棒。可以肯定的是,它們最終也會(huì)成為JavaScript大流氓的犧牲品,但是不會(huì)持續(xù)很多年。
所以,讓我們享受我們所擁有的: 一個(gè)不斷變得更好的偉大的生態(tài)系統(tǒng)!
訪問(wèn)對(duì)象統(tǒng)計(jì)
采樣對(duì)象一共為 20744 位開(kāi)發(fā)者。

特性
雖然大多數(shù)受訪者都知道調(diào)查中提到的大多數(shù)JavaScript特性,但很多人還沒(méi)有真正使用它們。
這圖表顯示了按類別分組的所有特性的不同采用率。外圈的大小對(duì)應(yīng)于了解某項(xiàng)功能的用戶總數(shù),而內(nèi)圈則代表實(shí)際使用過(guò)該功能的用戶。

技術(shù)現(xiàn)狀
2016年 - 2020年 趨勢(shì)圖
每條線從2016年到2020年(粗部為2020)。縱軸越高,表示一項(xiàng)技術(shù)被更多的人使用,橫軸越大,表示有更多的用戶想要學(xué)習(xí),或者曾經(jīng)使用過(guò),還會(huì)再次使用。

可以看出隨著年限的的增長(zhǎng)。webpack、Express、TypeScript、Jest、React 可以說(shuō)是非常強(qiáng)勢(shì)了。
風(fēng)味(Flavors)

可以看出 TypeScript 依舊獨(dú)領(lǐng)風(fēng)騷,其次就是 Elm ,但是 PureScript 也是一個(gè)值得關(guān)注的增強(qiáng)類型語(yǔ)言。

對(duì) TypeScript 的熟悉度一片叫好。
其他工具

前端框架

正如開(kāi)頭所說(shuō),svelte 的出現(xiàn)真的是對(duì)前端行業(yè)的沖擊,原以為三大框架(React、Vue.js、Angular)包攬所有的時(shí)候,它出現(xiàn)了,一度成為了第四名(使用量),但是從興趣度和滿意度來(lái)看,它未來(lái)的潛力不可估量。
興趣度

滿意度

數(shù)據(jù)層

使用排名比較高的狀態(tài)管理依舊是Redux、Vuex、Mobx。數(shù)據(jù)管理為 GraphQL 和 Apollo,并且 XState 橫空出世。
其他工具

后端框架

Express 依舊是統(tǒng)治地位,而 Next 和 Nuxt 這些服務(wù)端渲染的框架也逐漸成為大家的所選的框架。
其他工具

測(cè)試框架

Jest和 Mocha 在使用量上依舊是統(tǒng)治地位,但是新增了 Testing Libray 很強(qiáng)勁。
以下是滿意度排行。

什么是 Testing Library ?用于 DOM 和 UI 組件測(cè)試的一系列工具,主要 API 包含 DOM 查詢,更可以和其他測(cè)試工具(jest、cypress)配合,用于更多場(chǎng)景(react、vue、svelte)。而它是 React 的官方推薦。
我們推薦使用 React Testing Library[2],它使得針對(duì)組件編寫(xiě)測(cè)試用例就像終端用戶在使用它一樣方便。
----摘自 React 官網(wǎng)(https://zh-hans.reactjs.org/docs/test-utils.html)
打包工具

雖然短時(shí)間內(nèi) webpack 使用量還處于霸主地位,這一年打包工具的發(fā)生了巨大的變化。
以下為滿意度

可以說(shuō)這里發(fā)生了天翻地覆的變化。從 Parcel 到 Snowpack ,再到后來(lái)的 esbuild ,每一個(gè)都是打包的好手,至于 Vite 為什么沒(méi)有在其中,我猜想,Vite 最開(kāi)始只是為了解決 Vue 單個(gè)框架的方向,受眾面不夠廣泛(現(xiàn)在它已經(jīng)支持了多種框架的打包了)。
放張圖來(lái)看看這些 bundleless 工具的速度吧。

其他工具

移動(dòng)和桌面端

Electron 依舊是桌面端的第一選擇, Cordova 和 React Native 也是移動(dòng)跨端的熱門(mén)選擇。但是新出的 Capacitor 值得關(guān)注。
其他工具
常用的工具函數(shù)庫(kù)有?

其他工具函數(shù)庫(kù)

JavaScript 運(yùn)行時(shí)選擇

經(jīng)常使用那(些)文字編輯器?

常用用于開(kāi)發(fā)的瀏覽器有哪些?

資料
常用的 blog 和雜志?

關(guān)注了哪些網(wǎng)站和課程?

參考資料
2020年度全球CSS報(bào)告新鮮出爐: https://segmentfault.com/a/1190000038427691
[2]React Testing Library: https://testing-library.com/react
