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

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

圖片

最受歡迎的項目

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

圖片

?? 冠軍：shadcn/ui

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

圖片

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

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

?? 亞軍：Bun

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

Bun 的目標(biāo)是成為一個快速、全能型的工具包，適用于 JavaScript 和 TypeScript 應(yīng)用的部署、構(gòu)建、測試和調(diào)試。

Bun 于 9 月份發(fā)布了 1.0 版本，并宣稱已準(zhǔn)備好投入生產(chǎn)環(huán)境。9 月其 Github 新增數(shù)達(dá)到了明顯的峰值，顯示了其受到的廣泛關(guān)注和認(rèn)可。

圖片

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

在年底，Bun 提出了一個強(qiáng)有力的聲明：

• 目標(biāo)是在 2024 年將默認(rèn)的 avaScript 運行時從 Node.js 切換到 Bun。
• Bun 與大多數(shù) Node.js 生態(tài)系統(tǒng)具有良好的兼容性，包括對舊的 CommonJS 導(dǎo)入方式 require 的支持。此外，Bun 還對主流的全?？蚣埽ㄈ?Next.js、Nuxt、Astro 等）提供支持，這可能為實現(xiàn)這一目標(biāo)提供了可能性。

前端框架

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

圖片

React

2023 年，React 繼續(xù)在 JavaScript 生態(tài)系統(tǒng)中保持領(lǐng)先地位，這一趨勢自 2021 年和 2022 年以來一直持續(xù)，盡管偶爾會受到批評和爭議。

圖片

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

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

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

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

htmx

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

圖片

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

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

Svelte

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

圖片

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

其他框架

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

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

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

圖片

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

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

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

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

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

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

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

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

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

2023 年被視為 Vue 和其社區(qū)的轉(zhuǎn)折點，因為 Vue 2 宣布在年底停止維護(hù)，許多人開始升級到 Vue 3。

生態(tài)系統(tǒng)不斷發(fā)展，取得了令人矚目的成果！Nuxt 3 的下載量超過了 Nuxt 2。Vuetify 和 PrimeVue 等 UI 框架更加成熟，可以幫助構(gòu)建大型和小型應(yīng)用。VueUse、Pinia 和 TresJS 等庫持續(xù)壯大和改進(jìn)，提供了更強(qiáng)大的功能。

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

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

后端/全棧

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

圖片

今年，Next.js 在后端/全棧類別中依然占據(jù)領(lǐng)先地位。

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

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

圖片

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

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

構(gòu)建工具

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

圖片

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

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

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

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

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

移動端

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

圖片

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

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

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

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

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

CSS in JS

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

圖片

測試

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

桌面端

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

圖片

靜態(tài)站點生成器

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

圖片

狀態(tài)管理

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

圖片

GraphQL

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

圖片

總結(jié)

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

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

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

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

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

值得一提的是，Meta 開源了 Stylex。這一項目為前端開發(fā)者提供了一種強(qiáng)大的新工具，以簡化 CSS 的構(gòu)建和管理。

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

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