一年一度的 Discover the State of JS 2020 results 在前幾天新鮮出爐了，每次閱讀這份報告都能幫助我快速地瞭解到 JavaScript 世界在這一年裡都發生了哪些事情，同時也給了我一次查漏補缺的機會，讓我十分收益。
今年我打算以文字的方式，和大家快速分享一下這份報告在「語法」和「框架」兩個部分所釋放出的資訊，希望能夠對大家有所幫助和啟發。
今年的調查覆蓋率了 137 個國家的 23,765 個人，大多數被調研者來自美國或西歐。報告地址：https://2020.stateofjs.com/en...。
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 新版本的更新，編寫前端程式碼真是越來越對味。
以上，如果您喜歡這篇文章，別忘記點贊或是分享，讓更多人看到。這些都會被我視為您對我創作的支援。
4. 廣告
阿里巴巴淘系使用者增長團隊正在如飢似渴的尋找志同道合的夥伴，如果您準備好迎接適度的挑戰，在讓更多人喜歡手淘的同時，讓自己快速成長，歡迎您傳送簡歷至我的郵箱：kongtang.lb@alibaba-inc.com，我十分期待收到您的訊息。