大家好，我是 CUGGZ。

近日，Best of JS[1] 正式公布 2022 年 JavaScript 明星項目榜單。該榜單提供了過去 12 個月 JavaScript 生態(tài)系統(tǒng)中的趨勢項目的概述！

此榜單包含了以下部分：最受歡迎的項目、前端框架、React生態(tài)系統(tǒng)、Vue生態(tài)系統(tǒng)、后端/全棧、構(gòu)建工具、CSS in JS、測試工具、移動端、桌面端、靜態(tài)站點、狀態(tài)管理、GraphQL。

最受歡迎的項目

2022 年最受歡迎的 JavaScript 項目 Top 10 如下：

總冠軍：Bun ??

2022 年年度最流行的項目 Bun：一個新的 JavaScript 運行時。今年夏天，隨著 GitHub 上第一個 Beta 版的發(fā)布，它的人氣大增：一個月內(nèi)，GitHub 就有超過 20000 Star！

那 Bun 有什么特別之處呢？與兩年前的總冠軍 Deno 一樣，它為 TypeScript 提供了一流的支持。

但 Bun 不僅僅是一個運行時。它還包括：

• 包管理器（像 Yarn、NPM、PNPM）；
• 構(gòu)建工具（像 Webpack、ESBuild、Parcel）；
• 測試工具
• ...

Bun 可以讀取 ??package.json?? 安裝的依賴，Bun 還可以運行腳本。它做任何事都比其他任何運行時要快。Bun 是對 JavaScript 生態(tài)系統(tǒng)許多方面的全新詮釋，專注于性能。

它優(yōu)先考慮 Fetch 等標準 Web API。它支持許多 Node.js API，使其與大多數(shù) NPM 包兼容。它可能還沒有“生產(chǎn)就緒”（缺少 Windows 支持），但它是一個非常有前途的工具。與 Deno 相比，它的生態(tài)系統(tǒng)還很新，但它已經(jīng)有了一個名為 Elysia 的 Web 框架，號稱是最快的 HTTP 框架。

Bun 最令人難以置信的是它的創(chuàng)建者 Jarred Sumner 使用一種稱為 Zig 的低級語言從頭開始實現(xiàn)了所有這些功能。

Tauri

在 2021 年，Tauri 在最受歡迎的項目中排名第五。2022 年它以新增 30000 Star 在最受歡迎的項目中排名第二。這是一個用 Rust 編寫的項目，用于使用 Web 技術(shù)創(chuàng)建跨平臺桌面應(yīng)用。

Tauri 1.0 版于 6 月發(fā)布。它在構(gòu)建時考慮了安全性和性能。與 Electron 相比，它占用空間小，因為開發(fā)人員必須指定應(yīng)用所需的 API 和功能。

React 和 Next.js

排在第三位和第四位的分別是 React 和 Next.js，它們都新增了近 20000 Star。

Next.js 13 于 10 月發(fā)布，使用了 2020 年 React 17 引入的 React Server Components。

React 的維護者之一 Andrew Clark 表示：React Server Components 是 React 的未來，目標就是將這種架構(gòu)傳播到整個 React 生態(tài)系統(tǒng)，而不管框架如何。

Vite

Vite 是基于 Web 技術(shù)構(gòu)建應(yīng)用的工具，提供了令人驚嘆的開發(fā)人員體驗。

Vite 今年有兩個主要版本（7 月發(fā)布的 v3 和 12 月發(fā)布的 v4）。它為越來越多的項目提供支持，包括框架 SvelteKit 和 Qwik 以及 Vitest。

前端框架

2022 年前端框架中的明星項目 Top 10 如下：

React 仍然是 2022 年的冠軍，如果考慮 Vue.js 的 v2 和 v3 倉庫 Star 總和，其與 React 受歡迎程度接近。

主要變化是排在第二位的 Qwik。Qwik 類似于 React，它也使用用 JSX 編寫的組件作為模板，但主要區(qū)別在于專注于在瀏覽器中傳輸最少的 JavaScript。

Qwik 是“Zero baseline JavaScript”框架趨勢的一部分。站點和應(yīng)用通常會因影響瀏覽器性能的大量 JavaScript 資源而變得臃腫：即使頁面在服務(wù)端渲染，用戶也必須等到 JavaScript 被加載、解析和執(zhí)行才能與頁面交互。

Qwik 不依靠水合來為服務(wù)器上生成的頁面帶來交互性，而是使用一種稱為可恢復(fù)性的技術(shù)來提供即時交互的 HTML。它通過在 HTML 本身中序列化應(yīng)用的狀態(tài)來工作。

該項目由 Mi?ko Hevery 領(lǐng)導(dǎo)，他是 AngularJS 的創(chuàng)建者，他的口號是“為 Web 應(yīng)用增強 HTML”，Qwik 就是“HTML 優(yōu)先的框架”。

React 生態(tài)系統(tǒng)

2022 年 React 生態(tài)系統(tǒng)中的明星項目 Top 10 如下：

React 仍然是一個可以在任何網(wǎng)頁使用的庫，但它也已經(jīng)發(fā)展成為一個架構(gòu)框架，可以遵循它來創(chuàng)建交互式、彈性和高性能的前端模式。

React 18 版本（3 月）包括并發(fā)特性和 API，主要為框架提供架構(gòu)模式。React Server Components 旨在結(jié)合這些新的架構(gòu)模式實現(xiàn)。一些約定現(xiàn)在已經(jīng)在 React 框架之間標準化（例如 use client），而其他約定正在測試階段（例如服務(wù)端組件中的 async/await）。

在 2023 年，我們將繼續(xù)看到使用 React 新原語的創(chuàng)新，用于改進類型安全的庫以及 UI 組件庫的增長將繼續(xù)上升。

Vue 生態(tài)系統(tǒng)

2022 年 Vue 生態(tài)系統(tǒng)中的明星項目 Top 10 如下：

今年，Vue.js 進行了許多重大更新。Vue 2.7 將原生 Composition API 和 ??<script setup>?? 語法帶到 Vue 2。

這使得向 Vue 3 的過渡更加順暢。??<script setup>?? 變得穩(wěn)定且普遍可用，新的實驗性“Reactivity Transform”指日可待，可進一步增強 DX。Vue 團隊還在研究一種名為“Vapor mode”的新渲染策略，該策略受 Soild.js 的啟發(fā)，可以使 Vue 在關(guān)鍵部分的性能更高。

Nuxt 3 和 Vuetify 3 的穩(wěn)定發(fā)布表明 Vue 的生態(tài)系統(tǒng)已經(jīng)足夠成熟。Vite 在這一年成倍增長，它被 Vue 用戶大量使用，來自 create-vue、Nuxt、Quasar、Astro 和許多新框架。借助 Vite 的強大功能，Vue 用戶還可以使用 Vitest 和 Histoire 獲得更好的測試/開發(fā)體驗。我們還看到了 Vue 的創(chuàng)造性用法，例如使用 vue-termui 渲染命令行界面。

后端/全棧

2022 年后端/全棧中的明星項目 Top 10 如下：

前端和后端框架之間的界限比較模糊，因為與后端僅負責(zé) API 的 SPA 方法相比，有一種趨勢就是在服務(wù)端做更多的事情（包括渲染和路由）。所以這部分包括了全?？蚣?、元框架和后端框架。

Next.js

與去年一樣，Next.js 在排名中處于領(lǐng)先地位，13.0 版本帶來了重要的功能，包括 React 服務(wù)端組件和使用 app 文件夾的新文件系統(tǒng)結(jié)構(gòu)，并以更強大的方式處理嵌套路由。

tRPC

排在第二位的 tRPC 可以從客戶端導(dǎo)入服務(wù)端中定義的類型，以提供“端到端類型安全”。

值得一提的是 T3 Stack 項目，它在一個流行的模板文件中結(jié)合了 tRPC、Next.js 和 Tailwind CSS（總排名第 16 位）。

Astro

排在第三位的 Astro 在 2021 年作為靜態(tài)站點生成器出現(xiàn)，并使部分水合的概念流行起來。

?Astro 1.0 的發(fā)布彰顯了 Astro 團隊對創(chuàng)造流暢的開發(fā)者體驗的一絲不茍。支持與任何前端工具（如 React 和 SCSS）的“內(nèi)置”集成讓 Web 應(yīng)用開發(fā)變得簡單。

Remix

排在第四位的 Remix 保持快速增長。它于 2021 年開源，僅一年后就被 Shopify 收購。

Remix 不依賴于靜態(tài)頁面生成，而是利用分布式計算和原生瀏覽器功能在瀏覽器中提供出色的性能和令人驚嘆的開發(fā)人員體驗。

構(gòu)建工具

2022 年構(gòu)建工具中的明星項目 Top 10 如下：

今年，Vite 繼續(xù)保持上升趨勢，成為最流行的前端工具之一。其前身 Snowpack 不再維護，推薦使用 Vite。它的使用不限于 Vue 生態(tài)系統(tǒng)：Vite 可以用于 SvelteKit、Storybook、Vitest，甚至可以作為 Create-React-App 的現(xiàn)代替代品。

我們還看到了使用 Nx 和 Turborepo 的 monorepo 構(gòu)建工具的興起。Nwrl（Nx 背后的公司）已經(jīng)接管了 Lerna 的維護并發(fā)布了默認啟用 Nx 優(yōu)化的 Lerna 6。

盡管 Babel 仍然很受歡迎，但 swc 和 esbuild 已被許多項目和元框架廣泛使用。這些新工具可以顯著提高構(gòu)建和編譯性能。swc 是一個更模塊化的選擇，因為它提供了一個插件系統(tǒng)。

Vercel 宣布了 Turbopack（alpha），這是一個由 Tobias Koppers（Webpack  創(chuàng)建者） 創(chuàng)建的全新的、快速的 Rust 打包工具。

Rome 工具鏈發(fā)布了它的第一個穩(wěn)定版本。目前其使用率較低，但今年可能會增加。

今年 Rust 中的許多前端工具可能會出現(xiàn)在新聞中：

• Lightning CSS[2]（以前稱為 Parcel CSS）：更快的 CSS 工具鏈；
• stc[3]：比 tsc 更快的替代品；
• mdxjs-rs[4]：更快的 MDX 實現(xiàn)。

CSS in JS

2022 年 CSS in JS 中的明星項目 Top 10 如下：

測試工具

2022 年測試工具中的明星項目 Top 10 如下：

移動端

2022 年移動端中的明星項目 Top 10 如下：

桌面端

2022 年桌面端中的明星項目 Top 5 如下：

靜態(tài)站點

2022 年靜態(tài)站點中的明星項目 Top 10 如下：

狀態(tài)管理

2022 年狀態(tài)管理中的明星項目 Top 10 如下：

GraphQL

2022 年 **GraphQL **中的明星項目 Top 10 如下：

總結(jié)

2022 年始于混亂，當(dāng)時兩個非常受歡迎的 npm 包被其創(chuàng)建者故意破壞：Faker.js 和 colors.js。

當(dāng) Lerna （一個流行的 mono-repos 工具）被宣布無人維護時，這個龐大的生態(tài)系統(tǒng)的脆弱性再次得到證明。直到 Nx 背后的公司 Nrwl 宣布將接管 Lerna 的管理權(quán)。

如今，TypeScript 正在成為編寫 JavaScript 的標準（Deno 和 Bun 的一流支持，Next.js 的默認設(shè)置，Vite 的開箱即用支持等)。

對于開發(fā)人員和最終用戶而言，JavaScript 在代碼庫和工具中所占的地位會帶來一些問題：

• 在大型代碼庫中，構(gòu)建時間失去控制；
• JavaScript 的平均大小不斷增加導(dǎo)致性能不佳。

2022 年，以下工具為這些問題提供了解決方案：

• Bun，年度冠軍，采用激進的方法來加快安裝和構(gòu)建時間；
• Rome：一個 linter 和 formatter 程序，旨在成為管理用 JS/TS 編寫的應(yīng)用的單一工具；
• Vite：構(gòu)建工具。

對于瀏覽器中的性能，不同的模式競爭：

• Zero baseline JavaScript 框架幾乎不向瀏覽器提供 JS（Qwik 處于領(lǐng)先地位）；
• 部分水合作用為靜態(tài)頁面提供交互島 (Astro)；
• React 服務(wù)端組件（由 Next.js 13 和 Gatsby 實現(xiàn)）在服務(wù)端委派更多工作；
• Remix 實現(xiàn)的漸進增強的單頁應(yīng)用架構(gòu)在瀏覽器中提供了出色的 DX 和性能，而不會影響任何動態(tài)行為。

JavaScript 格局曾經(jīng)非常分散：一側(cè)是多種瀏覽器，另一側(cè)是 Node.js，它有自己的 CommonJS 模塊系統(tǒng)和自己的 API。

隨著邊緣計算的興起，現(xiàn)在出現(xiàn)了一種強烈的趨勢，即在任何地方都使用相同的標準化 API 子集（fetch、HTTP 請求和響應(yīng)等）。

參考：https://risingstars.js.org/2022/en

相關(guān)鏈接

[1] Best of JS: https://bestofjs.org/

[2] Lightning CSS: https://lightningcss.dev/

[3] stc: https://github.com/dudykr/stc

[4] mdxjs-rs: https://github.com/wooorm/mdxjs-rs?