精讀《2021 前端新秀回顧》

2021 JavaScript Rising Stars 每年都會對前端開源專案進行點評，其依據是去年 Star 的增幅。Star 雖然只是一個維度，但至少反應了流行度，根據這個排行榜可以大體分析出前端社群的趨勢。

精讀

該榜單包含整體榜單、前端框架、Node 框架、構建工具、Vue 生態、React 生態、CSS-In-JS、測試、移動端、桌面、靜態建站、狀態管理、GraphQL 共 13 個子榜單，都是前端開源最活躍的幾個領域，下面分別介紹。

整體榜單

第一名 zx 是一個命令列工具，它基於 Node 語法擴充了 Bash 支援，可以非常方便的進行 Node 與 Bash 之間的輸入輸出，就像 Node 原生就支援 Bash 一樣。它解決了離不開 Bash，但 Bash 寫起大段邏輯不如 Node 自然的痛點。

第二名 vite 是去年最閃耀的星，它是一個 bundless 概念的前端構建工具，最初服務與 vue，後來進行框架無關升級後，在 react、angular 生態都大受歡迎。它解決了 webpack 編譯太慢，其他 bundless 方案不夠開箱即用且存在大量相容問題的痛點。

第三名 next.js 2016 年開始的專案，是一個大而全的 React 全家桶，定位就是各大廠都會自己做一套的前端一體化框架，但它更時髦，不斷加入許多流行功能比如 Server Component。這和 next.js 所在的明星公司 Vercel 有關，這家公司挖了大量開源知名人物，包括 Svelte 作者與 React 團隊核心成員，所以也許未來社群的新玩具會先用在 next.js 再獨立開源。它給出了前端最佳實踐，並解決了沒有精力持續給專案進行全方位優化，或追逐不上潮流的問題，因為 next.js 本身正在成為前端潮流的發源地。

第四名 react 不用多說了，資料驅動、響應式程式設計、函式式的領軍框架，它改變了前端開發效率。

第五名 tauri 比 electron 更輕量的桌面應用開發框架，基於任何前端框架。它解決了前端開發者遇到桌面應用開發場景時各平臺巨大的原生開發學習成本的痛點。

第六名 Tailwind CSS 是 css 框架，它提供了大量語義化 className，提供了許多最佳實踐，讓你有機會把 css 打理的井然有序。它解決了前端專案 css 雜亂無章又沒有人真的在意的痛點。

第七名 vscode 宇宙級 IDE，它解決了程式設計師沒有真正趁手軟體寫程式碼的痛點。

第八名 Slidev 是一個把 markdown 渲染成 PPT 的框架，基於 vite + vue 等技術棧開發。用它開發的 PPT 非常簡潔美觀，非常適合在公開場合分享時使用，不僅看起來賞心悅目，還可以不經意間切換到 Markdown 原始碼 hotfix 一下小錯誤，展示出你的極客精神。它解決了你真的只想展示幾句話，但又要以 PPT 方式 show 出來的痛點。

第九名 NocoDB 是一個支援多種資料來源的資料庫 UI 管理工具。但其實它有更大的格局，即對標 airtable，即用 NocoDB 連線資料庫後，一切資料視覺化的操作與功能都成為了可能，且提供了大量工作常用的甘特圖、電子表格等檢視，並可互相轉換，最終其實資料儲存到連線的資料庫，但你無需關心細節。它解決了基於二維表格資料開發各類生產工具需投入大量研發資源的痛點。

第十名 Vue 和 React 一樣不多說了。

前端框架

第一名 react 在整體榜單裡了。

第二名 Vue 也在整體榜單裡了。

第三名 svelte 是一個類似 vue 的框架，但特色是極度重視編譯時，而忽略執行時，即執行時除了必要邏輯外是完全不引入任何 runtime 框架的。說實話我覺得和 vue、react 相比在正兒八經專案中並沒有核心優勢，因為它並沒有那種魔法能力，可以極大的減少大型專案體積與提升效能，反而會受制於其語法與編譯時的特性產生副作用。但唯一一個好處是框架無關，即利用 svelte 編譯的元件幾乎沒有額外執行時框架程式碼，可以最低成本，最大隔離性的與其他專案結合。

第四名 angular 筆者已經很久沒有關注 angular 框架了，無法給出什麼點評。但從 svelte 新增熱度超過 angular 來看，可能大部分開發者對 angular 的態度和我一樣。

第五名 solid 類似 svelte，提前編譯，按需打包，重要的是，其類似 React useEffect 的 API createEffect 在依賴變化後，僅該函式會重新執行，而不會導致整個元件重新執行，在點對點更新上做得更極致。

前端框架的亮點是 svelte 與 solid 的概念，即重編譯時，輕執行時，更加原子化的更新粒度，與更直接的呼叫原生瀏覽器方法帶來效能提升。很難不讓人覺得這是一個前端框架新趨勢，但我翻了不少資料發現，這種創新帶來的收益在正常專案裡微乎其微，所以實際上 2021 年前端框架還是沒能跳出三巨頭創造新的概念，而以 svelte 與 solid 為代表的 “靜態化” 框架只能算微創新。

Node 框架

第一名 next.js 在整體榜單裡了，在 Node 框架一騎絕塵。

第二名 nest 和 next.js 很像，據我當時的瞭解，是因為 next.js 起步較慢，原始碼還不支援 ts，所以就有了這個更時髦的新框架。但實際上 next.js 早就全部改為 ts 了，而且正如整體榜單所說，現在已經開始引領潮流了，所以不怪 nest 定位重合，只能怪 next.js 後續發力太猛了。nest 的唯一特點就是沒有繫結 UI 庫。

第三名 Strapi 專門為 API 場景服務，提供了一個 API 管理後臺，解決了只需要一個便捷 API 管理，而不希望瞭解一個大而全的後端框架的痛點。

第四名 remix 其實和 next.js 定位差不多，由 react-router 作者開發，才開源不久，需要進一步觀察。

第五名 nuxt.js 是 vue 領域的 next.js。

值得一提的是，svelte 也有自己的專屬框架 sveltekit，所以 Node 後端框架之爭大部分其實在打全棧的牌，畢竟 Node 的優勢就是支援 js 語言，而當前端應用基於某個框架編寫時，如果有一個 Node 框架可以無縫整合這個前端框架，它就比非 Node 框架更優。

不過大廠幾乎都是前後端分離的，所以這種全棧優勢框架在國內沒有太多出場機會，如果你是一個個人博主，還是首推使用全棧框架建站。

構建工具

第一名 vite 在整體榜單裡了，在構建工具裡也是一騎絕塵。

第二名 esbuild 是用 go 編寫的構建工具，適用使用範圍更廣，其壓縮模組在 bundless 還未成熟時就被各大構建全家桶提前整合了，而 vite 也是基於 esbuild 進行編譯的，但 vite 的火熱度更高，說明了整體 bundless 方案已在 2021 年成熟了。

第三名 swc 因採用 rust 編寫而知名，類似 esbuild，但因為依託 rust 編譯到 wasm 的特性，支援了線上編譯器，非常方便。swc 還被大量新生代構建工具作為基建，這在精讀《Rust 是 JS 基建的未來》時提到過。

第四名 turborepo 是用 go 寫的 monorepo 專案管理工具，是 lerna 的替代品。

第五名 nx 也是一個 monorepo 管理工具。

與框架不同，構建工具往往呈現套娃結構，不是你中有我，就是我中有你，每個熱門庫都重點解決某一塊關鍵問題，不斷套娃套娃，最後套成一個很棒的全家桶。

Vue 生態

第一名 Slidev 在整體榜單裡了。

第二名 Vue Element Admin 基於 vue 的管理後臺，在許可權驗證有一些最佳實踐，使用 vuex 管理狀態。

第三名 Headless UI 是一個完全無樣式的基礎元件庫，支援 React 與 Vue，官網的例子都是利用 Tailwind CSS 內建樣式組合而成的。它解決了 UI 元件庫繫結樣式後，自定義樣式 “實際上非常噁心” 的痛點。

第四名 Naive UI 是一個 Vue 元件庫，沒有太多特別之處，但竟然上了排行榜。看了一下 star 趨勢，在 2021.6 月份 star 漲幅是之後的十倍，估計剛開源推廣了一波，後續漲幅很慢了，不出意外明年會跌出這個榜單。

第五名 vue-next 即 vue3，star 數量只有 vue2 的 13%，但今年 star 增幅有 vue2 的一半。

vue3 還自帶了狀態管理庫 pinia，其生態已經非常完備。

React 生態

第一名 next.js 在整體榜單裡了。

第二名 Ant Design 雖然立志成為西湖區最好的 React 元件庫，但事實上已經成為了全球最好的 React 元件庫。

第三名 MUI 就是大名鼎鼎的 material design UI 元件庫，我對它影響最深的是按鈕點選後出現的水波紋，這是 material design 的一大特色。早在 2014 年就建立了，在 Ant Design 沒火的時候，是開源元件庫首選。

第四名 remix 在 Node 框架榜單裡了，和 next.js 一樣，是繫結了 React 生態的 Node 框架，所以也出現在 React 生態中。

第五名 react-use 是很小巧的 React Hook 庫，提供瞭如 usePrevious、useDebounce 等常用的 Hook。

看完整個 React 生態榜單，無論是優質生態庫數量，還是去年增長的 Star 數，都比 Vue 生態更勝一籌。這背後是無副作用的純函式與自動依賴收集的響應式檢視之爭，甚至在 React 生態裡也有比如 mobx-react 等優質 MVVM 庫，這兩種程式設計正規化都會長期並存。

CSS-In-JS

第一名 vanilla-extract 作為 2021 年的黑馬，主打零執行時與 TS 支援。零執行時是通過 @vanilla-extract/webpack-plugin 外掛在編譯時就完成內容輸出。

第二名 styled-components 是推出最早，也最成熟的一個 CSS-In-JS 框架，雖然版本間出現過執行時不相容讓我放棄過，但不得不說是這個方向的鼻祖。

第三名 stitches 和第一名很像，也主打零執行時，不過沒有提對 TS 是否友好。

第四名 Twin 基於 Tailwind CSS 實現了 CSS-In-JS 版的語法，可以認為是內建了一套最佳實踐的 CSS-In-JS 庫，也沒解決太大的痛點，只是如果你同時喜歡 Tailwind CSS 與 CSS-In-JS，可能會愛屋及烏的選擇 Twin。

第五名 Emotion 也是一個相對完備的庫，基本上 CSS-In-JS 各類語法都能支援。

相比傳統 CSS-In-JS 庫，第一名 vanilla-extract 的零執行時是一大亮點，是這個方向的新趨勢。

測試

第一名 Playwright 是一個跨瀏覽器跨平臺的測試框架，可以利用 js 程式碼開啟任意 url 地址截圖或者對比，解決了搭建自動化測試平臺需要從零開始編寫底層框架的痛點。

第二名 Storybook 是非常有名的文件工具，很多開源元件、專案的文件都基於 Storybook 建立。神奇的是它還支援單元測試，在你訪問 UI 元件時進行測試並列印出測試結果。Storybook 已經變成了一個 all-in-one 的元件開發工具。

第三名 Cypress 與 Playwright 且誕生比較早，但由於不支援多 tab 頁面，且僅支援 js，所以僅在前端流行，在測試工程師角度卻不如支援多語言的 Playwright 好用。

第四名 Puppeteer 是 2017 年穀歌推出基於 Chrome 無頭瀏覽器的測試工具，但 2020 年微軟的 Playwright 具有跨瀏覽器特性還是更勝一籌。

第五名 Jest 是程式碼級別單測工具的佼佼者，覆蓋了全框架，只要你想對程式碼進行單元測試，選 Jest 是不會錯的。

測試框架圍繞單測與瀏覽器測試這兩個子領域，2021 年在瀏覽器測試領域出現了跨瀏覽器這個特色方向，在單測領域沒有太大變化，頂多出了一個 Vitest 讓單測跑得更快，這個庫在 2022 年穩定後可能會大放異彩，甚至可能因為 Vite 流行的原因取代 Jest。

移動端

第一名 ReactNative 是基於 React 的 Mobile Native 開發框架，筆者用過一段時間，只能說不能抱有太大期待，因為極大的侷限了 web 語法，如果你覺得僅掌握前端知識就可以輕鬆使用，那麼一定會讓你失望，不要一開始就抱著這種期待。另外跨端真是非常痛，比如 SwitchAndroid、SwitchIOS 讓你感受不到 Write Once, Run everywhere（雖然官方也沒這麼說）。

第二名 Ionic 是一個跨前端框架的跨平臺構建工具，解決了 ReactNative 無法 Run everywhere 的痛點，但也帶來了不夠靈活的問題，即無法使用平臺特定特性。

第三名 Expo 是基於 ReactNative 的一站式跨端開發工具，它的 App 使用非常傻瓜化，並且內建了除錯能力，可以說是把 ReactNative 要踩的坑幫你踩完了。

第四名 Quasar 可以認為是 Vue 版的 ReactNative。

第五名 Flipper 是一個 Native 應用除錯工具，可以認為是手機應用版本的 Chrome DevTools，支援連線遠端終端，解決了手機應用難以用電腦除錯的痛點。

其實還少了 Flutter 這個優秀框架，雖然不屬於前端方向，但就像前端腳手架越來越多用 Rust、Go 寫一樣，Native 用 Dart 也是可以接受的。

從前端角度看移動端，唯一需求就是 Write Once，Run Anywhere，然後再把除錯體驗做好一些，Native 的相容性、擴充性做強一些，就是一個完美方案了。

說到跨端，基於 Flutter 的 kraken 也絕對值得一提，它利用 Flutter 高一執行渲染層能力，並解決了 Dart 生態對前端不友好的問題，做了一個 html+css+js 到 dart 的橋接層，如果明年可以在手淘穩定覆蓋大量場景，那一定是個值得考慮的方案。

總結

還有更多榜單就不一一總結了，如果覺得不過癮，可以去 2021 JavaScript Rising Stars 翻翻這些 top star 專案的介紹和原始碼深入瞭解一下。

最後總結一下 2021 前端領域的幾個關鍵特徵：

程式語言全面開花。以後 JS 開發者不等於前端開發者了，因為 Go、Rust、Dart、C++ 語言都可以為前端服務，並且 2021 年是真的有不少場景做到了生產環境可用，不論我們接不接受，前端不止有 JS 一種語言了。
前端開發全家桶逐漸產生技術壁壘。在前幾年，抄一個前端全家桶很容易，在過程中還可以學到很多底層知識，但現在前端全家桶的積累越來越多，涉及的領域越來越廣，甚至 next.js 引入的特性會超越你自己調製的全家桶，這說明全家桶的知識量已經逐漸達到個人知識廣度的極限，如果你沒有足夠精力持續學習，跟進時代步伐的最好方式是使用一個成熟的全家桶。

討論地址是：精讀《2021 前端新秀回顧》· Issue #390 · dt-fe/weekly

如果你想參與討論，請點選這裡，每週都有新的主題，週末或週一釋出。前端精讀 - 幫你篩選靠譜的內容。

關注 前端精讀微信公眾號

版權宣告：自由轉載-非商用-非衍生-保持署名（創意共享 3.0 許可證）