近日，JavaScript Rising Stars 第 8 期正式发布，该榜单公布了 2023 年 JavaScript 生态系统发展趋势，让我们看看生态系统中的这些项目是如何风靡全球的！

下图比较了过去 12 个月中 GitHub 上新增项目的 Star 数量，内容包括最受欢迎的项目总览、前端框架、React 生态系统、Vue 生态系统、后端/全栈、构建工具、移动端、CSS-IN-JS、测试工具、桌面应用、静态站点、状态管理、GraphQL 等，基本覆盖到了前端技术体系包含的相关技术。

1.最受欢迎的项目总览

总冠军：shadcn/ui 🏆

本年度最热门的项目是 shadcn/ui，它是一个用 React 编写的 UI 组件集，允许通过 TailwindCSS 定制样式。

shadcn/ui 建立在 Radix 之上，Radix 是一套无头组件，为可访问性和键盘交互等问题提供了原型，shadcn/ui 区别于其他流行的库（如MUI、ChakraUI、React Spectrum），它不是一个可下载的 NPM 包。相反，你可以通过一个终端命令来集成 shadcn/ui 组件，该命令会安装底层依赖项，并将组件源代码直接拷贝到你的代码库中供进一步修改。

该项目的成功与 Tailwind CSS 的广泛流行（总排名第 20 位）、与 React Server Components 的兼容性以及出色的文档密切相关。似乎所有新的 React 项目都采用了 shadcn/ui。Kent C. Dodds 甚至在他最前沿的 Epic Stack 中选择了它。

另一个涉及人工智能的例子：根据用户描述用户界面的功能和外观的提示，应用程序 v0.dev 生成了由 shadcn/ui 组件组成的 JSX 代码。令人着迷！Vercel 发布新产品 v0：基于AI的生成式用户界面系统

在从 SPA 过渡到 Next.js 应用程序的重写之后，Best of JS 也使用了它们。

它的方法已经启发了其他项目：

• shad-cn/svelte 是 Svelte 框架的移植版本。
• Draft UI 基于 React Aria 而非 Radix 构建。

如需深入分析，请参阅文章《The anatomy of shadcn/ui》https://manupa.dev/blog/anatomy-of-shadcn-ui。

第二名：Bun

作为 2022 年的冠军，Bun 仍旧保持着强劲的势头。

Bun 的目标是成为一个快速、一体化的工具包，用于运行、构建、测试和调试 JavaScript 和 TypeScript 应用程序。第一版已于 9 月正式发布（查看图表中的峰值！），Bun 声称自己已经 "可以投入生产"。文档提供了许多示例来帮助尽快使用 Bun 的 API 和常见任务，如文件操作和处理数据库交互。

在年底，Bun 发表了一份强烈的声明：在 2024 年有一个目标，就是将默认的后端 JavaScript 运行时从 Node.js 转换为 Bun 对于大多数Node.js 生态系统的兼容性（包括通过 require 支持的传统的 CommonJS 导入）以及对主要全栈框架（Next.js、Nuxt、Astro等）的支持，这使得这一目标成为可能！Bun 为什么火了？

2.前端框架

React

2023 年，React 保持了其在 JavaScript 生态系统中的领先地位，尽管偶尔会受到批评和争议，但这一趋势从 2021 年和 2022 年一直持续到现在。React.js 的未来：热门趋势与预测

在庆祝 React 推出十周年之际，React 制作了一部纪录片（https://youtu.be/8pDqJVdNa44）；这足以说明它的受欢迎程度！

然而，React并非没有批评者。有些人认为它是过去的产物，这一观点在文章（https://joshcollinsworth.com/blog/antiquated-react）中得到了独到的探讨，该文章还深入探讨了替代方案。另一方面，支持者赞扬 React 的适应性和自我重塑能力。

React 的一个争论点是缺少 "信号"（Solid 或 Preact 等库采用的反应性处理机制），而 React 爱好者则赞赏 React 数据流提供的可预测性。

摘自 Parcel 的创建者 Devon Govett 关于信号的推文：

The simplicity of UI as a function of state is lost when updates flow unpredictably.

欲了解信号的更多信息，请阅读《The Evolution of Signals》（https://dev.to/this-is-learning/the-evolution-of-signals-in-javascript-8ob），这是对今年流行语之一的全面探讨。

htmx

htmx 排名第二，它是一个采用不同方法为HTML页面提供交互性的库：与其编写大量的JavaScript代码，开发人员可以使用特定属性增强HTML，以实现实时交互和动态更新。人们赞扬它的小文件大小以及与现有服务器端框架的无缝集成，因为它是“通过网络发送HTML”的趋势的一部分：请服务器发送HTML的部分块，而不是在客户端处理JSON。在“标记库”领域，Alpine.js是一个流行的解决方案（今年排名第13）。

Svelte

排名第三的是 Svelte， 它的受欢迎程度继续增长。它常常被视为 React 的现代替代品。一个重大的变化即将到来，Svelte 5 即将发布，这是项目历史上最受期待的发布，它引入了符文（runes），以解决处理状态响应性时的一些“痛点”。Rich Harris 的这个简短视频（https://www.youtube.com/watch?v=RVnxF3j3N8U）很好地解释了符文解决的问题。今年的一个故事与 Svelte 有关，并引发了很多辩论（例如Hacker News）：Svelte团队选择使用带有JSDoc注解的JavaScript而不是TypeScript，以避免与TypeScript相关的额外复杂性和缺点，同时仍提供类型安全性的好处。

推荐阅读：最近最火的话题：Turbo8 放弃 Typescript

其他框架

• Million v3 是一个轻量级库，使 “React组件运行速度与原生JavaScript一样快”。
• Angular 17 在性能方面有了重大改进，文档进行了更新，并采用了新的品牌形象（包括徽标的漂亮颜色）。
• Quik 在 4 月份发布了 v1。这是一个用于构建“可暂停”应用程序的框架，可以在初始情况下不使用任何JavaScript来传送即时的互动HTML。

3.React生态系统

在 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团队明确了其新实验性功能的立场和推出策略。对于框架来说，采用会有重大变化的金丝雀版本是可以接受的，并且这些变化会有文档进行记录。他们还赶上了文档更新，以优雅地结束了这一年，详细记录了最新的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 Server Component 综合指南

我们急切地等待 React 19 的发布，它应该很快就会到来。

4.Vue 生态系统

随着 Vue 2 被宣布将于 2023 年底停止维护，今年被视为 Vue 及其社区的一个转折点，很多人已经开始了升级到 Vue 3 的旅程。Vue 2 即将停止维护！

为了帮助迁移，生态系统追赶并不断发展：取得了巨大的成果！Nuxt 3 现在的下载量超过了 Nuxt 2。UI 框架（如 Vuetify 和 PrimeVue）比以往任何时候都更容易帮助构建大型（或更小的）应用程序。VueUse、Pinia 甚至 TresJS 等库不断发展壮大，以更好地增强我们所有人的能力。状态管理工具 Pinia 和 Vuex 对比指南

与 2022 年一样，开发者体验仍然是重中之重。Vue 3.3 为 <script setup> 带来了更好的 TypeScript 支持。Nuxt 发布了 8 个次要版本，并推出了 Nuxt DevTools，这是一个富有创造力和洞察力的用户界面，可以帮助我们更好地理解应用程序，并更快地进行开发。新一代 Vuejs 开发者工具正式开源

展望未来，正如尤雨溪所说，2024 年将是 Vue 令人兴奋的一年。近期 Vue 3.4 已经发布，现在开源的 Vapor 模式进展顺利。所有这些都将在新的一年里带来更多性能改进和社区创新。2024 年对 Vue.js 有哪些期待？

5.后端/全栈

今年，Next.js 在后端/全栈类别中再次位居榜首！

Next.js 14.x 重点改进了服务器操作，并引入了新的部分预览渲染模式。Next.js 14 终于来了！

借助 React Server Components，开发人员可以使用新的范例构建 Web 应用程序，可以大大简化代码：通过将组件设置为异步组件，从组件直接获取数据，并通过将表单绑定到服务器操作来更改数据。

这段视频（https://www.youtube.com/watch?v=9CN9RCzznZc）展示了直接从组件发出 SQL 请求的过程，人们对此议论纷纷，但可能忽略了一点：React 服务器组件可以像独立的组件一样工作，无需繁琐的布线，就可以将其放置在应用程序的任何位置。这段视频很好地帮助我们建立了由 RSC 实现的新的心智模型，展示了服务器和客户端组件无缝工作的组合。

Astro 排名第二，排名不断攀升。除了最初的概念（生成无需 JavaScript 即可运行的超快静态网站，并使用自己选择的用户界面框架为岛屿添加交互性），它还可用于动态生成页面。

.astro 文件模板系统的简洁性（非常接近 JSX）和出色的 DX（CLI 非常漂亮！）给开发者留下了深刻印象。第 4 版引入了新的开发工具栏、自动 i18n 路由和新的视图转换 API，以改善用户体验。

6.构建工具

Bun 也是一个捆绑工具，因此我们今年将其列入了 "构建工具" 类别。Bun 为什么火了？

目前，Vite 仍然是最受欢迎的多功能捆绑工具，它为 Astro、Nuxt、Remix、SolidStart、SvelteKit 等元框架提供支持。11 月发布的 Vite 5 版建立在第 4 版的基础上，在性能上有所改进。Evan You 宣布他们正在开发 Rolldown，这是 Rollup 在 Rust 中的移植版，将集成到 Vite 中。因此，Vite 的前景一片光明！Vite 5 正式发布！

Biome 的崛起是今年的故事之一。它与Rome的陨落有关，Rome是一个雄心勃勃的项目，旨在统一工具（编译、衬垫、格式化、捆绑、测试）。该项目背后的公司失败了，项目也于今年停止。幸运的是，该项目已被分叉，并以 Biome 的名称重新诞生。11 月，Biome 赢得了 Prettier 挑战赛：创建 "一个由 Rust 驱动的代码格式化器，能通过超过 95% 的 Prettier 测试"。Prettier 作为一项标准，我们可以期待 Biome 在 2024 年获得更多采用。

说到 Rust，ByteDance 团队推出的 Oxc 和 Rspack 是这一领域的新成员。Rspack提供了与Webpack的兼容性，同时提供无与伦比的性能。自从我们开始进行 Rising Stars 评选以来，这是第一次看不到 Webpack 在榜单中，考虑到使用该工具的项目数量，这真的很奇怪！Rspack Family 介绍

7.移动端

2023 年，移动领域在统一 Web 和本地开发体验方面取得了重大进展。这一点从 Expo（排名第一）、Tamagui（排名第三）和 Nativewind（排名第六）等顶级项目中可见一斑，这些项目的共同目标是最大限度地提高代码重用率和网络开发人员的可访问性。

在 React Native 中，一个明显的趋势是采用更好的样式解决方案，Tamagui（第 3 位）、Nativewind（第 6 位）和 React Native Paper（第 7 位）在这方面处于领先地位。这与Web社区类似，其中shadcn-ui在整体流行度上排名第一。这一趋势在 2024 年应该不会减缓。

2022 年，React 团队的官方建议从 Create React App 这样的模板式解决方案转向 Remix 和 Next.js 这样的框架优先解决方案。一年后，我们可以在 React Native 生态系统中看到类似的转变。像 Expo、Tamagui 和 Ignite 这样的工具，提供了许多以框架为先的特点，它们的流行度都在上升。这种转变表明，移动开发范式正在从无框架的 React Native 转向更具默认偏好的解决方案，标志着移动开发范式的演变。我预计这一趋势将在 2024 年持续下去。

React Native 的主导地位在前十名项目中明显可见。然而，这个列表中存在三个基于 webview 的项目，这表明人们对将网站直接部署到应用商店的兴趣仍然存在。也许 2024 年将是这两种方法开始融合的一年。

总体而言，对于移动开发来说，这是很棒的一年。预测 2024 年开发者将继续对 React Native 的样式解决方案、原生渲染模式、更好地支持 AI 驱动应用的服务器集成以及一些有趣的 visionOS 项目产生兴趣。

8.Styling / CSS in JS

2023 年 CSS-in-JS Github Rising Star 项目 TOP 10：

推荐阅读：StyleX：Meta 公司开源的 CSS-in-JS 解决方案，CSS-in-JS 零运行时库对比指南

9.测试工具

2023 年测试工具 Github Rising Star 项目 TOP 10：

推荐阅读：2023 年测试自动化的演进与未来趋势，Node.js 测试运行器 Test Runner 初探

10.桌面应用

2023 年桌面应用 Github Rising Star 项目 TOP 5：

推荐阅读：Electron 28.0.0 正式发布

11.静态站点

2023 年静态站点 Github Rising Star 项目 TOP 10：

12.状态管理

2023 年状态管理 Github Rising Star 项目 TOP 10：

推荐阅读：状态管理工具 Pinia 和 Vuex 对比指南

13.GraphQL

2023 年 GraphQL Github Rising Star 项目 TOP 10：

推荐阅读：4种流行的 API 架构风格对比 🚀

结论

2023 年是发展的一年，让我们回顾一下这一年的重要变革和事件：

• Svelte 代码库放弃了 TypeScript 文件（同时保留类型安全性）
• React 的争议（过于陈旧、过于复杂、类似 PHP 等）
• Rome 的衰落和 Riome 的兴起
• Angular 焕发生机，
• Bun v1 发布
• Astro 4.0 发布
• Meta 开源了 Stylex

同时，我们看到了人工智能（AI）工具的崛起，这些工具可以根据提示甚至图片生成用户界面，让人不禁怀疑几年后是否还会有前端开发人员。