大廠技術(shù)  高級(jí)前端  Node進(jìn)階

點(diǎn)擊上方 程序員成長(zhǎng)指北，關(guān)注公眾號(hào)

回復(fù)1，加入高級(jí)Node交流群

2021 JavaScript Rising Stars 每年都會(huì)對(duì)前端開源項(xiàng)目進(jìn)行點(diǎn)評(píng)，其依據(jù)是去年 Star 的增幅。Star 雖然只是一個(gè)維度，但至少反應(yīng)了流行度，根據(jù)這個(gè)排行榜可以大體分析出前端社區(qū)的趨勢(shì)。

精讀

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

整體榜單

第一名 zx 是一個(gè)命令行工具，它基于 Node 語法拓展了 Bash 支持，可以非常方便的進(jìn)行 Node 與 Bash 之間的輸入輸出，就像 Node 原生就支持 Bash 一樣。它解決了離不開 Bash，但 Bash 寫起大段邏輯不如 Node 自然的痛點(diǎn)。

第二名 vite 是去年最閃耀的星，它是一個(gè) bundless 概念的前端構(gòu)建工具，最初服務(wù)與 vue，后來進(jìn)行框架無關(guān)升級(jí)后，在 react、angular 生態(tài)都大受歡迎。它解決了 webpack 編譯太慢，其他 bundless 方案不夠開箱即用且存在大量兼容問題的痛點(diǎn)。

第三名 next.js 2016 年開始的項(xiàng)目，是一個(gè)大而全的 React 全家桶，定位就是各大廠都會(huì)自己做一套的前端一體化框架，但它更時(shí)髦，不斷加入許多流行功能比如 Server Component。這和 next.js 所在的明星公司 Vercel 有關(guān)，這家公司挖了大量開源知名人物，包括 Svelte 作者與 React 團(tuán)隊(duì)核心成員，所以也許未來社區(qū)的新玩具會(huì)先用在 next.js 再獨(dú)立開源。它給出了前端最佳實(shí)踐，并解決了沒有精力持續(xù)給項(xiàng)目進(jìn)行全方位優(yōu)化，或追逐不上潮流的問題，因?yàn)?next.js 本身正在成為前端潮流的發(fā)源地。

第四名 react 不用多說了，數(shù)據(jù)驅(qū)動(dòng)、響應(yīng)式編程、函數(shù)式的領(lǐng)軍框架，它改變了前端開發(fā)效率。

第五名 tauri 比 electron 更輕量的桌面應(yīng)用開發(fā)框架，基于任何前端框架。它解決了前端開發(fā)者遇到桌面應(yīng)用開發(fā)場(chǎng)景時(shí)各平臺(tái)巨大的原生開發(fā)學(xué)習(xí)成本的痛點(diǎn)。

第六名 Tailwind CSS 是 css 框架，它提供了大量語義化 className，提供了許多最佳實(shí)踐，讓你有機(jī)會(huì)把 css 打理的井然有序。它解決了前端項(xiàng)目 css 雜亂無章又沒有人真的在意的痛點(diǎn)。

第七名 vscode 宇宙級(jí) IDE，它解決了程序員沒有真正趁手軟件寫代碼的痛點(diǎn)。

第八名 Slidev 是一個(gè)把 markdown 渲染成 PPT 的框架，基于 vite + vue 等技術(shù)棧開發(fā)。用它開發(fā)的 PPT 非常簡(jiǎn)潔美觀，非常適合在公開場(chǎng)合分享時(shí)使用，不僅看起來賞心悅目，還可以不經(jīng)意間切換到 Markdown 源碼 hotfix 一下小錯(cuò)誤，展示出你的極客精神。它解決了你真的只想展示幾句話，但又要以 PPT 方式 show 出來的痛點(diǎn)。

第九名 NocoDB 是一個(gè)支持多種數(shù)據(jù)源的數(shù)據(jù)庫 UI 管理工具。但其實(shí)它有更大的格局，即對(duì)標(biāo) airtable，即用 NocoDB 連接數(shù)據(jù)庫后，一切數(shù)據(jù)可視化的操作與功能都成為了可能，且提供了大量工作常用的甘特圖、電子表格等視圖，并可互相轉(zhuǎn)換，最終其實(shí)數(shù)據(jù)存儲(chǔ)到連接的數(shù)據(jù)庫，但你無需關(guān)心細(xì)節(jié)。它解決了基于二維表格數(shù)據(jù)開發(fā)各類生產(chǎn)工具需投入大量研發(fā)資源的痛點(diǎn)。

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

前端框架

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

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

第三名 svelte 是一個(gè)類似 vue 的框架，但特色是極度重視編譯時(shí)，而忽略運(yùn)行時(shí)，即運(yùn)行時(shí)除了必要邏輯外是完全不引入任何 runtime 框架的。說實(shí)話我覺得和 vue、react 相比在正兒八經(jīng)項(xiàng)目中并沒有核心優(yōu)勢(shì)，因?yàn)樗]有那種魔法能力，可以極大的減少大型項(xiàng)目體積與提升性能，反而會(huì)受制于其語法與編譯時(shí)的特性產(chǎn)生副作用。但唯一一個(gè)好處是框架無關(guān)，即利用 svelte 編譯的組件幾乎沒有額外運(yùn)行時(shí)框架代碼，可以最低成本，最大隔離性的與其他項(xiàng)目結(jié)合。

第四名 angular 筆者已經(jīng)很久沒有關(guān)注 angular 框架了，無法給出什么點(diǎn)評(píng)。但從 svelte 新增熱度超過 angular 來看，可能大部分開發(fā)者對(duì) angular 的態(tài)度和我一樣。

第五名 solid 類似 svelte，提前編譯，按需打包，重要的是，其類似 React useEffect 的 API createEffect 在依賴變化后，僅該函數(shù)會(huì)重新執(zhí)行，而不會(huì)導(dǎo)致整個(gè)組件重新執(zhí)行，在點(diǎn)對(duì)點(diǎn)更新上做得更極致。

前端框架的亮點(diǎn)是 svelte 與 solid 的概念，即重編譯時(shí)，輕運(yùn)行時(shí)，更加原子化的更新粒度，與更直接的調(diào)用原生瀏覽器方法帶來性能提升。很難不讓人覺得這是一個(gè)前端框架新趨勢(shì)，但我翻了不少資料發(fā)現(xiàn)，這種創(chuàng)新帶來的收益在正常項(xiàng)目里微乎其微，所以實(shí)際上 2021 年前端框架還是沒能跳出三巨頭創(chuàng)造新的概念，而以 svelte 與 solid 為代表的 “靜態(tài)化” 框架只能算微創(chuàng)新。

Node 框架

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

第二名 nest 和 next.js 很像，據(jù)我當(dāng)時(shí)的了解，是因?yàn)?next.js 起步較慢，源碼還不支持 ts，所以就有了這個(gè)更時(shí)髦的新框架。但實(shí)際上 next.js 早就全部改為 ts 了，而且正如整體榜單所說，現(xiàn)在已經(jīng)開始引領(lǐng)潮流了，所以不怪 nest 定位重合，只能怪 next.js 后續(xù)發(fā)力太猛了。nest 的唯一特點(diǎn)就是沒有綁定 UI 庫。

第三名 Strapi 專門為 API 場(chǎng)景服務(wù)，提供了一個(gè) API 管理后臺(tái)，解決了只需要一個(gè)便捷 API 管理，而不希望了解一個(gè)大而全的后端框架的痛點(diǎn)。

第四名 remix 其實(shí)和 next.js 定位差不多，由 react-router 作者開發(fā)，才開源不久，需要進(jìn)一步觀察。

第五名 nuxt.js 是 vue 領(lǐng)域的 next.js。

值得一提的是，svelte 也有自己的專屬框架 sveltekit，所以 Node 后端框架之爭(zhēng)大部分其實(shí)在打全棧的牌，畢竟 Node 的優(yōu)勢(shì)就是支持 js 語言，而當(dāng)前端應(yīng)用基于某個(gè)框架編寫時(shí)，如果有一個(gè) Node 框架可以無縫集成這個(gè)前端框架，它就比非 Node 框架更優(yōu)。

不過大廠幾乎都是前后端分離的，所以這種全棧優(yōu)勢(shì)框架在國內(nèi)沒有太多出場(chǎng)機(jī)會(huì)，如果你是一個(gè)個(gè)人博主，還是首推使用全棧框架建站。

構(gòu)建工具

第一名 vite 在整體榜單里了，在構(gòu)建工具里也是一騎絕塵。

第二名 esbuild 是用 go 編寫的構(gòu)建工具，適用使用范圍更廣，其壓縮模塊在 bundless 還未成熟時(shí)就被各大構(gòu)建全家桶提前集成了，而 vite 也是基于 esbuild 進(jìn)行編譯的，但 vite 的火熱度更高，說明了整體 bundless 方案已在 2021 年成熟了。

第三名 swc 因采用 rust 編寫而知名，類似 esbuild，但因?yàn)橐劳?rust 編譯到 wasm 的特性，支持了在線編譯器，非常方便。swc 還被大量新生代構(gòu)建工具作為基建，這在 精讀《Rust 是 JS 基建的未來》 時(shí)提到過。

第四名 turborepo 是用 go 寫的 monorepo 項(xiàng)目管理工具，是 lerna 的替代品。

第五名 nx 也是一個(gè) monorepo 管理工具。

與框架不同，構(gòu)建工具往往呈現(xiàn)套娃結(jié)構(gòu)，不是你中有我，就是我中有你，每個(gè)熱門庫都重點(diǎn)解決某一塊關(guān)鍵問題，不斷套娃套娃，最后套成一個(gè)很棒的全家桶。

Vue 生態(tài)

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

第二名 Vue Element Admin 基于 vue 的管理后臺(tái)，在權(quán)限驗(yàn)證有一些最佳實(shí)踐，使用 vuex 管理狀態(tài)。

第三名 Headless UI 是一個(gè)完全無樣式的基礎(chǔ)組件庫，支持 React 與 Vue，官網(wǎng)的例子都是利用 Tailwind CSS 內(nèi)置樣式組合而成的。它解決了 UI 組件庫綁定樣式后，自定義樣式 “實(shí)際上非常惡心” 的痛點(diǎn)。

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

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

vue3 還自帶了狀態(tài)管理庫 pinia，其生態(tài)已經(jīng)非常完備。

React 生態(tài)

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

第二名 Ant Design 雖然立志成為西湖區(qū)最好的 React 組件庫，但事實(shí)上已經(jīng)成為了全球最好的 React 組件庫。

第三名 MUI 就是大名鼎鼎的 material design UI 組件庫，我對(duì)它影響最深的是按鈕點(diǎn)擊后出現(xiàn)的水波紋，這是 material design 的一大特色。早在 2014 年就創(chuàng)建了，在 Ant Design 沒火的時(shí)候，是開源組件庫首選。

第四名 remix 在 Node 框架榜單里了，和 next.js 一樣，是綁定了 React 生態(tài)的 Node 框架，所以也出現(xiàn)在 React 生態(tài)中。

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

看完整個(gè) React 生態(tài)榜單，無論是優(yōu)質(zhì)生態(tài)庫數(shù)量，還是去年增長(zhǎng)的 Star 數(shù)，都比 Vue 生態(tài)更勝一籌。這背后是無副作用的純函數(shù)與自動(dòng)依賴收集的響應(yīng)式視圖之爭(zhēng)，甚至在 React 生態(tài)里也有比如 mobx-react 等優(yōu)質(zhì) MVVM 庫，這兩種編程范式都會(huì)長(zhǎng)期并存。

CSS-In-JS

第一名 vanilla-extract 作為 2021 年的黑馬，主打零運(yùn)行時(shí)與 TS 支持。零運(yùn)行時(shí)是通過 @vanilla-extract/webpack-plugin 插件在編譯時(shí)就完成內(nèi)容輸出。

第二名 styled-components 是推出最早，也最成熟的一個(gè) CSS-In-JS 框架，雖然版本間出現(xiàn)過運(yùn)行時(shí)不兼容讓我放棄過，但不得不說是這個(gè)方向的鼻祖。

第三名 stitches 和第一名很像，也主打零運(yùn)行時(shí)，不過沒有提對(duì) TS 是否友好。

第四名 Twin 基于 Tailwind CSS 實(shí)現(xiàn)了 CSS-In-JS 版的語法，可以認(rèn)為是內(nèi)置了一套最佳實(shí)踐的 CSS-In-JS 庫，也沒解決太大的痛點(diǎn)，只是如果你同時(shí)喜歡 Tailwind CSS 與 CSS-In-JS，可能會(huì)愛屋及烏的選擇 Twin。

第五名 Emotion 也是一個(gè)相對(duì)完備的庫，基本上 CSS-In-JS 各類語法都能支持。

相比傳統(tǒng) CSS-In-JS 庫，第一名 vanilla-extract 的零運(yùn)行時(shí)是一大亮點(diǎn)，是這個(gè)方向的新趨勢(shì)。

測(cè)試

第一名 Playwright 是一個(gè)跨瀏覽器跨平臺(tái)的測(cè)試框架，可以利用 js 代碼打開任意 url 地址截圖或者對(duì)比，解決了搭建自動(dòng)化測(cè)試平臺(tái)需要從零開始編寫底層框架的痛點(diǎn)。

第二名 Storybook 是非常有名的文檔工具，很多開源組件、項(xiàng)目的文檔都基于 Storybook 創(chuàng)建。神奇的是它還支持單元測(cè)試，在你訪問 UI 組件時(shí)進(jìn)行測(cè)試并打印出測(cè)試結(jié)果。Storybook 已經(jīng)變成了一個(gè) all-in-one 的組件開發(fā)工具。

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

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

第五名 Jest 是代碼級(jí)別單測(cè)工具的佼佼者，覆蓋了全框架，只要你想對(duì)代碼進(jìn)行單元測(cè)試，選 Jest 是不會(huì)錯(cuò)的。

測(cè)試框架圍繞單測(cè)與瀏覽器測(cè)試這兩個(gè)子領(lǐng)域，2021 年在瀏覽器測(cè)試領(lǐng)域出現(xiàn)了跨瀏覽器這個(gè)特色方向，在單測(cè)領(lǐng)域沒有太大變化，頂多出了一個(gè) Vitest 讓單測(cè)跑得更快，這個(gè)庫在 2022 年穩(wěn)定后可能會(huì)大放異彩，甚至可能因?yàn)?Vite 流行的原因取代 Jest。

移動(dòng)端

第一名 ReactNative 是基于 React 的 Mobile Native 開發(fā)框架，筆者用過一段時(shí)間，只能說不能抱有太大期待，因?yàn)闃O大的局限了 web 語法，如果你覺得僅掌握前端知識(shí)就可以輕松使用，那么一定會(huì)讓你失望，不要一開始就抱著這種期待。另外跨端真是非常痛，比如 SwitchAndroid、SwitchIOS 讓你感受不到 Write Once, Run everywhere（雖然官方也沒這么說）。

第二名 Ionic 是一個(gè)跨前端框架的跨平臺(tái)構(gòu)建工具，解決了 ReactNative 無法 Run everywhere 的痛點(diǎn)，但也帶來了不夠靈活的問題，即無法使用平臺(tái)特定特性。

第三名 Expo 是基于 ReactNative 的一站式跨端開發(fā)工具，它的 App 使用非常傻瓜化，并且內(nèi)置了調(diào)試能力，可以說是把 ReactNative 要踩的坑幫你踩完了。

第四名 Quasar 可以認(rèn)為是 Vue 版的 ReactNative。

第五名 Flipper 是一個(gè) Native 應(yīng)用調(diào)試工具，可以認(rèn)為是手機(jī)應(yīng)用版本的 Chrome DevTools，支持連接遠(yuǎn)程終端，解決了手機(jī)應(yīng)用難以用電腦調(diào)試的痛點(diǎn)。

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

從前端角度看移動(dòng)端，唯一需求就是 Write Once，Run Anywhere，然后再把調(diào)試體驗(yàn)做好一些，Native 的兼容性、拓展性做強(qiáng)一些，就是一個(gè)完美方案了。

說到跨端，基于 Flutter 的 kraken 也絕對(duì)值得一提，它利用 Flutter 高一執(zhí)行渲染層能力，并解決了 Dart 生態(tài)對(duì)前端不友好的問題，做了一個(gè) html+css+js 到 dart 的橋接層，如果明年可以在手淘穩(wěn)定覆蓋大量場(chǎng)景，那一定是個(gè)值得考慮的方案。

總結(jié)

還有更多榜單就不一一總結(jié)了，如果覺得不過癮，可以去 2021 JavaScript Rising Stars 翻翻這些 top star 項(xiàng)目的介紹和源碼深入了解一下。

最后總結(jié)一下 2021 前端領(lǐng)域的幾個(gè)關(guān)鍵特征：

• 編程語言全面開花。以后 JS 開發(fā)者不等于前端開發(fā)者了，因?yàn)?Go、Rust、Dart、C++ 語言都可以為前端服務(wù)，并且 2021 年是真的有不少場(chǎng)景做到了生產(chǎn)環(huán)境可用，不論我們接不接受，前端不止有 JS 一種語言了。
• 前端開發(fā)全家桶逐漸產(chǎn)生技術(shù)壁壘。在前幾年，抄一個(gè)前端全家桶很容易，在過程中還可以學(xué)到很多底層知識(shí)，但現(xiàn)在前端全家桶的積累越來越多，涉及的領(lǐng)域越來越廣，甚至 next.js 引入的特性會(huì)超越你自己調(diào)制的全家桶，這說明全家桶的知識(shí)量已經(jīng)逐漸達(dá)到個(gè)人知識(shí)廣度的極限，如果你沒有足夠精力持續(xù)學(xué)習(xí)，跟進(jìn)時(shí)代步伐的最好方式是使用一個(gè)成熟的全家桶。

•       
  
         
  
          
  
           
  
            Node 社群
            
  
           
          
         
         
  
          
  
           
  
            
  
             
  
            
            
  
             
  
            
           
          
         
         
  
  
         
  我組建了一個(gè)氛圍特別好的 Node.js 社群，里面有很多 Node.js小伙伴，如果你對(duì)Node.js學(xué)習(xí)感興趣的話（后續(xù)有計(jì)劃也可以），我們可以一起進(jìn)行Node.js相關(guān)的交流、學(xué)習(xí)、共建。下方加 考拉 好友回復(fù)「Node」即可。
         
  
  
         
  
         
  
  
         
  如果你覺得這篇內(nèi)容對(duì)你有幫助，我想請(qǐng)你幫我2個(gè)小忙：
  
         
  
          1. 點(diǎn)個(gè)「在看」，讓更多人也能看到這篇文章
         
         
  
          2. 訂閱官方博客 www.inode.club 讓我們一起成長(zhǎng)
         
         
  
          
  
         
        
  點(diǎn)贊和在看就是最大的支持