[[376754]]

 一年一度的 Discover the State of JS 2020 results 在前幾天新鮮出爐了，每次閱讀這份報告都能幫助我快速地了解到 JavaScript 世界在這一年里都發(fā)生了哪些事情，同時也給了我一次查漏補(bǔ)缺的機(jī)會，讓我十分收益。

今年我打算以文字的方式，和大家快速分享一下這份報告在「語法」和「框架」兩個部分所釋放出的信息，希望能夠?qū)Υ蠹矣兴鶐椭蛦l(fā)。

今年的調(diào)查覆蓋率了 137 個國家的 23,765 個人，大多數(shù)被調(diào)研者來自美國或西歐。報告地址： https://2020.stateofjs.com/en... 。

1. Features

這一部分我將會針對 ES6 以來，新的語法特性的使用情況進(jìn)行概括和總結(jié)，并偶爾發(fā)表一些自己的看法，如果您對某個內(nèi)容有自己的見解，也歡迎您在文章的評論區(qū)下方留言。

注意每個語法特性背后的百分?jǐn)?shù)代表著： 被調(diào)研的開發(fā)者中使用過該特性的人數(shù)占比 。

1.1 語法特性

語法特性方面，像 Destructuring （89.1%） ， Spread Operator （92.8%）， Arrow Functions （97.9%）這樣便宜好用又大碗的語法特性已經(jīng)被廣大開發(fā)者運用的滾瓜爛熟。但是像 Nullish Coalescing （45.3%）， Optional Chaining （66.7%）這樣同樣好用的不得了的語法特性看起來并沒有被普及開來廣泛使用，不想代碼里再有丑陋的 a && a.b && a.b.c 判斷符，直接上手就來一個 a?.b?.c 實在是既瀟灑又酷。

毫不意外 Private Fields （10.9%）這個語法特性不僅使用的人不多，而且 43.9% 的被調(diào)研開發(fā)者表示聽都沒聽說過。我特地去查了下，這個語法特性是 ES2020 草案提出的，目前 Firefox，IE 和 Safari 還不支持。

但是這個語法特性表示 JavaScript 終終終于要有語法層面的私有類字段了，很高興看到 JavaScript 這門基于原型鏈的語言在 OOP 范式上又前進(jìn)了一小步，不知道 Java 開發(fā)者不知道會不會感到非常開心？

1.2 語言特性

Async/Await （95.2%）， Promises （96.2%）這樣的老牌異步解決方案看來已經(jīng)是耳熟能詳，被開發(fā)者廣泛使用了。但是像 Decorators （47.4%）， Dynamic Import （42.8%）語法使用的人卻并不多，至于 Proxies （22.3%） Promise.allSettled() （14.7%）這兩個語法則更是不僅使用的人不多，連沒聽說過的人都不少。

如果說平時寫業(yè)務(wù)很難用到像 Proxy 這樣的對象代理方案，用的人少還情有可原。像 Dynamic Import 這種動態(tài)加載資源的方案配合上 webpack 打包出異步加載的 chunk 一起使用，絕對是頁面性能進(jìn)一步優(yōu)化的大殺器，還不了解同學(xué)可以深度研究一下。

Promise.allSettled 這個方法終于補(bǔ)齊了 Promise 系列的全家桶，原來的 Promise.all 方法只在異步執(zhí)行的函數(shù)集相互依賴時有效，碰上想要了解每個異步函數(shù)解決狀態(tài)的情況，還是 Promise.allsettled 方法更好使。

1.3 數(shù)據(jù)結(jié)構(gòu)

數(shù)據(jù)結(jié)構(gòu)方面， Maps （73.4%）， Sets （66.9%）這樣的數(shù)據(jù)結(jié)構(gòu)已經(jīng)比較廣泛的被開發(fā)者們使用，而像 Typed Arrays （34.9%）， Array.prototype.flat() （39.6%）這樣的數(shù)據(jù)結(jié)構(gòu)和新語法則較少被用在工作之中， BigInt （13.9%）的使用率最低，但一般開發(fā)需求中也的確用不上。

有一說一， Array.prototype.flat() 這個方法其實挺好用的，雖然我們可以通過 Spread Operator 快速將一個 2 層嵌套的數(shù)組「拍平」變成一個一維數(shù)組，但是當(dāng)我們需要對一個多于 2 層的數(shù)組進(jìn)行「拍平」時，通過向 flat() 方法中傳入?yún)?shù)的方式，顯然更加方便。

1.4 瀏覽器 API

Local Storage （90.6%）， Fetch （87.1%）這種今年看來已經(jīng)不再新鮮的 API 毫無疑問大家都在用，也確實在存儲和 HTTP 請求上沒有什么更好的原生方案。

而 WebSocket 62.6% 的使用率， Service Workers 42% 的使用率和 Intl 31.3% 的使用率也算是合情合理，畢竟受使用場景限制。

Shadow DOM （42.1%） ， Custom Elements （33.4%）無疑是今年最令人瘋狂的瀏覽器 API 了，想想不通過使用 React 和 Vue，僅通過瀏覽器原生提供的功能就能實現(xiàn)高效可復(fù)用的組件化，生命周期函數(shù)什么的也一應(yīng)俱全，仿佛好不容易學(xué)會的 React 好像明天就要過時，JavaScript 原教旨主義者終于一統(tǒng)天下。

可是別高興的太早，現(xiàn)實還是很骨感，別說現(xiàn)在還沒有像 Fusion，Antd 一樣成熟的 UI 組件庫可以開箱即用，如何通過這些 API 穩(wěn)定搭建 SPA 應(yīng)用，整個社區(qū)還沒有討論出一個像 React，Vue 和 AngularJS 一樣的成熟方案，所以還是先等等吧，先熟悉一下 API 總是沒錯的。

至于像 Web Audio （20%）， WebGL （17.5%）， Web Animations （16.3%）， WebRTC （14%）， Web Speech API （8.2%）， WebVR （3.3%）這些只有特定開發(fā)需求才會使用的 API，使用的人少也是十分正常，但是可千萬不要因此就忽略了這些 API。

像 Web Audio ， Web Speech 和 WebRTC 對于影音視頻流的傳輸和交互就非常重要， WebGL ， Web Animations 和 WebVR 則更是將 Web 世界的表達(dá)能力拉高了好幾個臺階。我覺的大家真該好好想想如何結(jié)合自身的業(yè)務(wù)場景通過這些瀏覽器能力尋求更新的突破，說不定下個風(fēng)口或是交互模式創(chuàng)新就誕生在你的團(tuán)隊。到時候可千萬別忘了給我發(fā)個紅包（笑）。

1.5. 其他

最后我們再看看 WebAssembly (WASM) 的調(diào)研情況，真正使用過的開發(fā)者占比為 10.5%，73.9% 的開發(fā)者聽過但是沒用過，15.6% 的開發(fā)者則是聽都沒聽說過。

我覺得大多數(shù)前端開發(fā)者應(yīng)該都處于聽過沒用過的象限，目前社區(qū)關(guān)于 WebAssembly 也確實沒有很大的音量。用 C++ 和 Rust 編寫 Web 應(yīng)用這種事情對于 Web 開發(fā)者而言也的確沒有多大吸引力。未來的發(fā)展如何，我還是抱著靜觀其變的態(tài)度。

2. 技術(shù)框架

技術(shù)框架部分我將重點關(guān)注技術(shù)框架的使用數(shù)量以及對框架的滿意程度兩個方面，它們代表了當(dāng)前流行的技術(shù)選型以及未來可能流行的技術(shù)方向。每一種技術(shù)我都會附帶 :link: 鏈接，方便您點擊了解更多技術(shù)細(xì)節(jié)。

2.1 語言風(fēng)格

2020 年對于 JavaScript 究竟應(yīng)該怎么寫才對味這個問題， TypeScript 毫無爭議地一錘定音，93% 的參與調(diào)研者表示十分滿意通過 Typescript 約束自己的 Javascript 代碼，看來這個年頭還不擁抱 Typescript 的開發(fā)者絕對是 out 了。

而對于當(dāng)前的語言風(fēng)格是否令人滿意的調(diào)研則表示，在滿分 5 分的限定下，無論是 2019 年還是 2020 年，開發(fā)者們都只打了 3.6 分這樣差強(qiáng)人意的分?jǐn)?shù)來表達(dá) JavaScript 在更優(yōu)雅的編寫方面還有很多探索的空間。

2.2 前端框架

前端框架方面 React ， Angular 和 Vue.js 毫無疑問地依然是世界三大框架。但說出來你可能不信，「最令人滿意的前端框架」居然不是 React 而是 2019 年才由 Rich Harris 推出的 Svelte 。有 66% 的被調(diào)研者表示感興趣這個框架，并且 89% 的被調(diào)研者表示使用這個框架令他們感到十分滿意，總之一句話，用過的都說好。

Svelte 人如其名，強(qiáng)調(diào)在構(gòu)建時就直接產(chǎn)出最小的完整的代碼，從而在使用時可以直接使用構(gòu)建后的組件，而無需添加框架自身，因此不僅打包后的應(yīng)用代碼體積更小，由于沒有 diff 操作，性能也大幅提高。只可惜目前 Svelte 還不支持 Typescript，也沒聽說過哪些大型項目在使用，否則眾多前端開發(fā)er 們可就又有的學(xué)了。

2.3 數(shù)據(jù)層

數(shù)據(jù)層框架上國外火的一塌糊涂，國內(nèi)卻怎么也火不起來的 GraphQL 依舊是數(shù)據(jù)層框架排行榜的萬年老二，使用最多的狀態(tài)管理框架依舊是耳熟能詳?shù)?nbsp;Redux 。沾著 GraphQL 和 React 的光， Apollo Client 近三年來也一直穩(wěn)穩(wěn)地占據(jù)了排行榜第三名的位置。

比較有意思的是 2020 年異軍突起的兩大框架 Vuex 和 XState 迅速的從老牌狀態(tài)管理框架 Redux ， MobX 的身體上越過分別獲得了最受開發(fā)者滿意排場榜上第三名和第四名的好成績。我 Vuex 倒是沒怎么用過，但是 XState 倒是實打?qū)嵳{(diào)研了一把，確實是物有所值的好框架，特別是最近流行的邏輯編排，狀態(tài)編排，各種編排，配上自帶的流程圖，不僅立刻感覺高大上了很多，而且確實切實解決程序狀態(tài)復(fù)雜后，難以梳理清楚的老問題。

2.4 后端框架

我最近一年幾乎沒怎么寫服務(wù)端應(yīng)用，通過調(diào)研報告才發(fā)現(xiàn)我用的最熟練的 Koa 的流行度已經(jīng)連年下跌，到了使用度排名的中部位置。現(xiàn)在 Next.js 和 Express 才是開發(fā)服務(wù)端應(yīng)用的首選，并且也是用過的都說好。仔細(xì)一看 Hulu，Docker，Netflix 都在用 Next.js，和我一樣掉隊的同學(xué)真應(yīng)該好好補(bǔ)補(bǔ)功課。

2.5 測試框架

說到測試框架，自從 2019 年 Jest 從 Mocha 手中搶過龍頭棍，從此就一直穩(wěn)坐測試框架屆的頭把交椅。 在使用度排名上，Mocha 和 Storybook 緊隨其后，但是看起來似乎不可能撼動 Jest 的江湖地位。

比較值得注意的是，由 Kent C. Dodds 開發(fā)的 Testing Library 測試框架一經(jīng)發(fā)布就引來了很多前端開發(fā)者的關(guān)注。Testing Library 主打 DOM 測試，全面支持主流的三大框架，提供一堆好用不貴的 API，用起來那叫一個符合用戶使用習(xí)慣。可惜國內(nèi)的開發(fā)者大多都不重視單元測試這塊，更別提是 DOM 元素級別的測試，我大膽預(yù)測下 Testing Library 在國內(nèi)會像 GraphQL 一樣一直保持不溫不火的狀態(tài)，確實可惜但也沒辦法。

2.6 構(gòu)建工具

說到構(gòu)建工具，那是真的有的聊了，雖然 webpack 依然以 89% 的使用率獨占鰲頭，但是要看眾多開發(fā)者 2020 年感興趣或是滿意度高的構(gòu)建工具，你會驚訝地發(fā)現(xiàn)曾經(jīng)如日中天的 gulp.js ， Browserify 已經(jīng)漸漸顯露出中年危機(jī)的勢頭，而 webpack 也在今年跌落神壇，在最受用戶滿意的構(gòu)建工具排行榜只排到了第四名。

要說第三名被 TypeScript 搶去還能理解，前兩名分別是 esbuild 和 Snowpack 我相信很多國內(nèi)的開發(fā)者聽到一定一頭霧水，但其實分別去官網(wǎng)看看就能清楚這兩個構(gòu)建工具主打的還是構(gòu)建速度的提升，尤其是 esbuild ，從官網(wǎng)上給的數(shù)據(jù)來看要比 webpack 構(gòu)建速度提升了整整 113 倍。

老實說，隨著項目越來越大，再加上 monorepo 方案逐漸在國內(nèi)流行開來，構(gòu)建時長有時候真是直接影響著開發(fā)體驗，一個項目 build 十幾秒，怎么看也不像是前端開發(fā)應(yīng)該出現(xiàn)的場景，無論是 esbuild 還是 Snowpack，如果有機(jī)會，還是鼓勵大家多去嘗試，總結(jié)經(jīng)驗，造福社區(qū)。

2.7 應(yīng)用端 / 桌面端

毫無疑問，要想用 JS 編寫桌面端應(yīng)用，最好的框架絕對是 Electron 。但如果要是開發(fā)移動端應(yīng)用的話，2020 年選擇就不止有 React Native 了，2020 年新登臺的 Capacitor 同樣十分亮眼，雖然只有 10% 的被調(diào)研者真正在使用，但是其中 84% 的開發(fā)者都表示使用起來十分令人滿意。

但是從使用體驗上看，整體的移動端/桌面端框架的滿意度并不高，近幾年基本保持在 3 分左右的狀態(tài)，看來前端想要在各個端上實現(xiàn)反復(fù)左右橫跳，還需要更加具有突破性的技術(shù)創(chuàng)新。

3. 小結(jié)

以上就是 2020 年 JavaScript 整體狀態(tài)的快速一覽，總的來說，無論是語言特性還是各種框架和庫，在 2020 年，都沒有什么突破性的變化，爆發(fā)式的增長。但是仔細(xì)觀察你會發(fā)現(xiàn)實際上在各個細(xì)分領(lǐng)域，都有些創(chuàng)新和實踐在悄悄地發(fā)生，比如構(gòu)建性能的提升，前端測試的完善，Web 表達(dá)的豐富等等等等。

一些前端領(lǐng)域老大難的問題，如何更高性能地實踐組件化，如何真正實現(xiàn) JavaScript 的「一次開發(fā)，處處運行」依舊沒有一個蓋棺定論，換句話說還在等待著更聰明的開發(fā)者來解決。

如果非要問 2020 年最紅的技術(shù)是什么的話，我非常不客觀地認(rèn)為本屆的獎杯毫無疑問地要頒發(fā)給 TypeScript，隨著 TypeScript 新版本的更新，編寫前端代碼真是越來越對味。