1 月 4 日，JavaScript Rising Stars 正式公布 2023 年 JavaScript 明星項目榜單，該榜單提供了 2023 年 JavaScript 生態系統中熱門項目的 Github Star 新增情況，shadcn/ui 成功登頂 2023 年最熱門前端項目！

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

圖片

最受歡迎的項目

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

圖片

?? 冠軍：shadcn/ui

2023 年的 JavaScript 生態系統中最耀眼的明星項目無疑是 shadcn/ui。這個由 React 構建的 UI 組件集合，憑借 TailwindCSS 的強大定制能力，在眾多項目中脫穎而出。

圖片

shadcn/ui 建立在 Radix 基礎之上，Radix 作為一組無頭組件，為鍵盤交互和可訪問性等基本功能提供了支持。與其他流行的庫如 MUI、ChakraUI、React Spectrum 不同，shadcn/ui 并非一個可下載的 NPM 包。用戶只需通過一個終端命令，即可將 shadcn/ui 的組件集成到代碼庫中。這一命令將自動安裝底層依賴，并將組件源代碼直接復制到項目中，以便進行進一步的定制。

shadcn/ui 的成功，離不開 Tailwind CSS 的廣泛采用（其在總排名中位列第 20），與 React Server Components 的兼容性，以及其出色的文檔支持。

?? 亞軍：Bun

Bun 在 2022 年榮膺冠軍后，其勢頭依然不減。

Bun 的目標是成為一個快速、全能型的工具包，適用于 JavaScript 和 TypeScript 應用的部署、構建、測試和調試。

Bun 于 9 月份發布了 1.0 版本，并宣稱已準備好投入生產環境。9 月其 Github 新增數達到了明顯的峰值，顯示了其受到的廣泛關注和認可。

圖片

Bun 的文檔提供了大量示例，幫助開發者快速上手并掌握 Bun 的 API 以及常見的任務，如文件操作和處理數據庫交互。

在年底，Bun 提出了一個強有力的聲明：

• 目標是在 2024 年將默認的 avaScript 運行時從 Node.js 切換到 Bun。
• Bun 與大多數 Node.js 生態系統具有良好的兼容性，包括對舊的 CommonJS 導入方式 require 的支持。此外，Bun 還對主流的全棧框架（如 Next.js、Nuxt、Astro 等）提供支持，這可能為實現這一目標提供了可能性。

前端框架

2023 年前端框架中的明星項目 Top 15 如下：

圖片

React

2023 年，React 繼續在 JavaScript 生態系統中保持領先地位，這一趨勢自 2021 年和 2022 年以來一直持續，盡管偶爾會受到批評和爭議。

圖片

React 在其成立 10 周年之際，獲得了一部紀錄片。這一成就充分展示了其在開發者社區中的廣泛歡迎和普及程度。

，時長01:18:14然而，React 并非沒有質疑和批評的聲音。一些人認為它已經成為過去的遺留物。不過，也有許多支持者贊揚 React 的出色適應性和創新能力。

關于 React 的一個爭議點是其處理響應機制的缺失，而其他庫如 Solid 和 Preact 等已經采用了“信號”這一機制。盡管如此，React 的愛好者們對它提供的數據流的可預測性表示贊賞。

Parcel 的創始人 Devon Govett 在社交媒體上談到了信號的重要性：當更新流變得不可預測時，UI 作為狀態函數的簡單性就會喪失。

htmx

排名第二的 htmx 是一個獨特的庫，它為 HTML 頁面提供了與眾不同的交互性實現方式。開發者通過添加特定屬性，而不是編寫多行 JavaScript 代碼，來增強 HTML，從而實現實時交互和動態更新。

圖片

它因其小巧的文件大小和與現有服務端框架的無縫集成而備受贊譽。這符合“通過線路發送 HTML”的趨勢，即要求服務器發送部分 HTML 塊，而不是在客戶端處理 JSON。

在“HTML 庫”領域中，Alpine.js 也是一個備受歡迎的解決方案（今年排名第 13）。

Svelte

Svelte 的受歡迎程度持續上升，被認為是 React 的一個現代替代品。即將到來的 Svelte 5 版本被視為該項目歷史上最受期待的版本，它將引入符文來解決處理狀態反應時的一些痛點。

圖片

關于 Svelte 的一個故事引起了大量的爭論：Svelte 團隊決定使用帶有 JSDoc 注釋的 JavaScript，而不是 TypeScript，以避免額外的復雜性和缺點，同時仍然提供類型安全的好處。

其他框架

• Million 是一個輕量級的庫，使“React 組件能夠以原始 JavaScript 的速度運行”。
• Angular 17 在性能、更新文檔和新的品牌設計方面做出了重大改進
• Quik 在 4 月份達到了 v1。該框架用于構建“可恢復的”應用，這些應用（最初）不使用 JS，同時提供可立即交互的 HTML。

React 生態系統

2023 年 React 生態系統中的明星項目 Top 15 如下：

圖片

在 2023 年，隨著 React Server Components 的出現，React 正式步入第三個時代。

React 核心團隊與 Vercel 合作推出了首個穩定的實現：Next.js 13.4 的 App Router。盡管這一創新帶來了諸多令人振奮的突破，并投入了大量資源，但由于 Vercel 與 React 核心團隊的特權關系以及對實驗性功能的早期訪問，它也受到了一些批評。在 2023 年初，我們經常看到新的 React 功能首先在 Next.js 文檔中得到記錄。社區對某些設計決策表示不滿，例如對 fetch() API 的擴展，目前正在回退。同時，也有人對 App Router 的穩定性和開發服務器的性能表示不滿。盡管如此，早期采用 React Server Components 的用戶報告了許多積極的好處，如更小的捆綁包大小和簡化的代碼。

React 團隊明確了其新實驗性功能的立場和推出策略。對于框架來說，采用帶有破壞性變更的 canary 版本是可以接受的，并且這些變更將會有文檔記錄。他們還加緊了文檔工作，在年底進行了一次重大的 React 文檔更新，全面記錄了最新的 API（如useFormState、<form>、'use server'等）。

此外，我們還見證了 Server Actions 的出現，這是一項新的 React 核心功能，首次在 Next.js 14 中作為穩定版本實現，為表單提交和變更提供了無縫的 RPC 調用。與 Remix 的理念類似，Server Actions 的設計考慮了漸進增強。

展望 2024 年，其他框架采納 React Server Components 將會成為令人期待的事情。特別是：

• Remix 將 React Server Components 納入其路線圖中。
• Expo 引入了服務器端功能，并計劃支持跨平臺的通用 React Server Components。
• Redwood 全力支持 React Server Components。
• Waku 是一個新型輕量級 React 框架，支持 React Server Components。
• Docusaurus 計劃在構建時渲染靜態的 React Server Components。

我們翹首期待 React 19 的發布，相信它很快就會到來。

Vue 生態系統

2023 年 Vue 生態系統中的明星項目 Top 10 如下：

2023 年被視為 Vue 和其社區的轉折點，因為 Vue 2 宣布在年底停止維護，許多人開始升級到 Vue 3。

生態系統不斷發展，取得了令人矚目的成果！Nuxt 3 的下載量超過了 Nuxt 2。Vuetify 和 PrimeVue 等 UI 框架更加成熟，可以幫助構建大型和小型應用。VueUse、Pinia 和 TresJS 等庫持續壯大和改進，提供了更強大的功能。

開發者體驗仍然是重中之重。Vue 3.3 改進了對<script setup>的 TypeScript 支持。Nuxt 發布了 8 個次要版本，并推出了 Nuxt DevTools，這是一個創新而有洞察力的用戶界面，可以幫助我們更好地理解和快速開發應用。

展望未來，正如尤雨溪所說，2024 年將是 Vue 的激動人心的一年。Vue 3.4 已經發布，開源的 Vapor 模式也在取得進展。這一切都為新的一年帶來更多的性能改進和社區創新。

后端/全棧

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

圖片

今年，Next.js 在后端/全棧類別中依然占據領先地位。

Next.js 14 專注于提升服務端功能，并引入了全新的 Partial Preview 渲染模式。

通過 React Server Components，開發人員可以借助新方法構建 Web 應用，大幅簡化代碼：從異步組件直接獲取數據，并通過將表單綁定到服務端操作來改變數據。關于這一功能的演示引發了廣泛討論，演示中展示了如何直接從組件發出 SQL 請求。然而，人們可能忽略了關鍵點：React Server Components 能 夠像自包含組件一樣運作，可在應用的任何位置使用，無需復雜的連接過程。

圖片

Astro 的排名也在持續上升。除了其初始概念（生成無需 JavaScript 即可運行的超快靜態網站，并使用所選的 UI 框架添加交互性），它還適用于動態生成頁面。

Astro 4 引入了一個新的開發工具欄、自動國際化路由和一個新的視圖過渡 API，以改善用戶體驗。

構建工具

2023 年構建工具中的明星項目 Top 10 如下：

圖片

Bun 作為一個打包工具，今年也被納入“構建工具”類別。

Vite 作為最受歡迎的多功能打包工具，在 Astro、Nuxt、Remix、SolidStart、SvelteKit 等元框架中得到了廣泛應用。11 月發布的 Vite 5 版本基于 Rollup 4 構建，帶來了性能上的顯著提升。此外，尤雨溪宣布正在開發 Rolldown，這是一個使用 Rust 編寫的 Rollup 端口，未來將集成到 Vite 中。這一動態讓 Vite 的未來充滿期待！

今年的亮點之一是 Biome 的崛起。這與 Rome 的衰落有關，后者是一個旨在統一工具鏈（編譯、linting、格式化、打包、測試）的雄心勃勃的項目。由于背后的公司遭遇困境，該項目在今年停止了。值得慶幸的是，該項目被分叉并以 Biome 的名字重新啟動。

11 月，Biome 成功應對了 Prettier 挑戰，開發了一個“基于 Rust 的代碼格式化工具，通過了 95%以上的 Prettier 測試”。考慮到 Prettier 的地位，可以預期 2024 年將有更多開發者采用 Biome。

談到 Rust，Oxc 和 Rspack 這兩個新晉玩家來自字節跳動團隊。Rspack 不僅與 Webpack 兼容，還展現出卓越的性能。自“新興之星”評選以來，Webpack 首次未出現在排名中，考慮到使用 Webpack 的項目之多，這一現象有點奇怪！

移動端

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

圖片

在 2023 年，移動開發領域在統一 Web 與本地開發體驗方面取得了顯著進展，這一趨勢尤其體現在 Expo、Tamagui 和 Nativewind 這三個領先項目中。它們致力于最大限度地重用代碼，并提高 Web 開發人員的可訪問性。

在 React Native 領域，一種明顯的趨勢是更好的樣式解決方案的出現。Tamagui、Nativewind 和 React Native Paper 在這方面處于領先地位。這與 Web 社區的 shadcn-ui 受到高度歡迎的情況相呼應，預示著這一趨勢在 2024 年將得以持續。

從 2022 年開始，React 團隊建議從樣板解決方案如 Create React App 轉向以框架為先的解決方案，如 Remix 和 Next.js。在移動開發領域，我們也看到了類似的轉變，像 Expo、Tamagui 和 Ignite 這樣的工具在受歡迎程度上逐漸上升。這種轉變標志著從無框架的 React Native 向默認情況下更具觀點的解決方案的轉變，代表著移動開發范式的演進。預計這一趨勢將在 2024 年繼續發展。

從排名前十的項目中可以看出，React Native 在移動開發中的主導地位，其中七個是基于這個庫的。然而，也有三個基于 Webview 的項目，這表明將網站直接部署到應用商店的需求仍然存在。預測 2024 年將是我們看到這兩種方法開始融合的一年。

總體而言，對于移動開發來說，2023 年是令人振奮的一年。我預測在 2024 年，人們對 React Native 的樣式解決方案的興趣將持續增長，本地開發將出現更多渲染模式（可能采用 React Server Components 進行本地開發），更好的服務器集成以支持 AI 驅動的應用，并可能出現一些有趣的 visionOS 項目。

CSS in JS

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

圖片

測試

2023 年測試中的明星項目 Top 10 如下：

桌面端

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

圖片

靜態站點生成器

2023 年靜態站點生成器中的明星項目 Top 10 如下：

圖片

狀態管理

2023 年狀態管理中的明星項目 Top 10 如下：

圖片

GraphQL

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

圖片

總結

在 2023 年，前端開發領域經歷了許多重要的變革和事件。其中，Svelte 代碼庫決定放棄使用 TypeScript 文件，但同時確保類型安全性。這一決策引起了業界的關注，并引發了關于語言選擇和項目發展趨勢的討論。

此外，圍繞 React 的爭議持續不斷。一些開發者批評 React 過于復雜、過時或類似于 PHP 等。這些爭議進一步推動了前端開發社區對其他框架和解決方案的探索和嘗試。

值得注意的是，Rome 的衰落和 Biome 的崛起成為 2023 年的一個重要轉折點。隨著 Rome 項目的終止，Biome 作為新興的解決方案嶄露頭角，為前端開發帶來了新的機遇和挑戰。

同時，Angular 的復興也是今年的一大亮點。隨著新版本的發布和對現代化的關注，Angular 再次成為開發者們的熱門選擇。

此外，Bun v1 的發布和 Astro 4.0 的發布也引起了廣泛關注。Bun 作為一款快速的 JavaScript 打包工具，提供了出色的性能和功能。而 Astro 則以其簡潔性和強大的功能吸引了大量用戶。

值得一提的是，Meta 開源了 Stylex。這一項目為前端開發者提供了一種強大的新工具，以簡化 CSS 的構建和管理。

在 AI 工具方面，2023 年見證了根據提示甚至圖像生成 UI 的 AI 工具的崛起。這些工具的快速發展引發了人們對未來幾年前端開發人員角色的思考和預測。許多人開始探討是否隨著 AI 技術的進步，前端開發人員的需求將會減少或轉變。

總體而言，2023 年是充滿變革和機遇的一年。這些故事和事件不僅反映了前端開發的現狀，也為未來的發展提供了寶貴的啟示和動力。