2023 JavaScript Rising Stars

年度最佳项目：shadcn/ui 🏆

年度最火的项目是 shadcn/ui，这是一个用 React 编写的 UI 组件集合，可通过 TailwindCSS 进行自定义样式的设置。

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

该项目的成功与 Tailwind CSS 的广泛流行（总体排名第 20 位）、对 React Server Components 的兼容性以及出色的文档密切相关。

似乎所有新的出众的 React 项目都采用了 shadcn/ui。甚至 Kent C. Dodds 也选择了它来开发 cutting-edge Epic Stack.

另一个涉及人工智能的例子：用户只需要提供 UI 的功能和外观等的描述，v0.dev 就可以生成由 shadcn/ui 组件组成的 JSX 代码。真神奇！

最后但同样重要的是，Best of JS 在我将其从单页应用程序（SPA）转换为 Next.js 后也使用了它们。

它也催生了其他项目：

• shad-cn/svelte 提供 Svelte 的组件。
• Draft UI 建立在 React Aria 而不是 Radix 之上。

对于深入分析，请参阅 The anatomy of shadcn/ui 一文。

排名第二：Bun

Bun，2022 年的冠军，仍然保持着巨大的势头。

它旨在成为一个快速、全能的工具包，用于运行、构建、测试和调试 JavaScript 和 TypeScript 应用程序。

version 1 于 9 月正式发布（图表中的峰值！），它声称已经 “可用于生产”。

它的文档提供了使用 Bun API 和常见任务（如文件操作和处理数据库交互）的出色方案，以帮助你快速入门。

Bun 年底时发表了一份 强有力的声明 :

我们 2024 年的目标是 将默认的后端 JavaScript 运行时从 Node.js 切换为 Bun

它对大多数 Node.js 生态系统（包括对旧的 CommonJS 通过 require 导入的支持）的兼容，以及对主要全栈框架（Next.js、Nuxt、Astro...）的支持，使其成为可能！

React

2023 年，React 在 JavaScript 生态系统中仍然保持着领先地位，这一趋势从 2021 年和 2022 年延续至今，尽管偶尔会受到批评和争议。

为了庆祝其成立 10 周年，React 还推出了一部纪录片 ( 点这里观看)；这充分说明了它受欢迎的程度！

然而，React 也并非没有质疑者。有些人认为它已经过时，这种观点在 这篇文章 中得到了巧妙的探讨，文章还探讨了其他替代方案。另一方面，支持者则称赞 React 具有出色的适应性和创新能力。

一个争议点是缺少 "signals"，这是 Solid 或 Preact 等库使用的一种反应性处理机制，而 React 的支持者则喜欢它提供的数据流程的可预测性。

从 Parcel 的创建者 Devon Govett 发布的一条 推文 中可以了解到关于 signals 的更多信息：

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

要了解更多关于 signals 的信息，请阅读 The Evolution of Signals, 这是对今年热门词汇之一的全面探讨。

htmx

第二名 htmx 是一个采用不同方法为 HTML 页面提供交互性的库：开发人员不是编写多行 JavaScript 代码，而是使用特定的属性来增强 HTML，从而实现实时交互和动态更新。

它因文件尺寸小、与现有服务器端框架的无缝集成而受到称赞，因为它是 "send HTML over the wire" 趋势的一部分：要求服务器发送 HTML 部分块，而不是在客户端处理 JSON。

在同类项目里，Alpine.js 是一个受欢迎的解决方案（今年排名第 13 位）。

Svelte

第三名 Svelte 的受欢迎程度持续增长。它常被视为 React 的现代替代品。 即将推出的 Svelte 5 是该项目历史上 “最受期待的版本” ，它引入了 runes 来解决处理状态反应性时的一些 “痛点” 。Rich Harris 制作的 This short video 很好地解释了 runes 解决的问题。

Svelte 今年还有一个故事，并引发了很多争论 (E.g. Hacker News)：Svelte 团队选择使用带有 JSDoc 注释的 JavaScript 而不是 TypeScript，以避免 TypeScript 带来的额外复杂性和缺点，但仍然提供类型安全。

其他框架更新

• Million v3 是一个轻量级库，可让 “React 组件以纯 JavaScript 的速度运行”。
• Angular 17 在性能、文档更新和新品牌（包括徽标颜色）方面有重大改进
• Qwik reached v1 4 月发布，用于构建 "resumable" 应用程序的框架，这些应用程序（最初）提供零 JS，同时提供即时交互的 HTML。

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 Docs Update 结束了这一年, 彻底记录了最新的 API (useFormState, , ‘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 Server Components 的最小 React 框架
• Docusaurus 计划 在构建时渲染静态 React Server Components

我们热切地等待着 React 19，它应该很快就会 发布。

随着 Vue 2 宣布在 2023 年底生命周期即将结束，今年被认为是 Vue 及其社区的转折点，许多人开始向版本 3 升级。

为此，进行了迁移方面的努力，生态系统也跟了上来并不断发展：取得了巨大的成果！ Nuxt 3 现在的下载量超过了 Nuxt 2. UI 框架，如 Vuetify 和 PrimeVue，比以往任何时候都更准备好帮助构建大型（和小型！）应用程序。诸如 VueUse, Pinia, 甚至 TresJS 等库不断发展壮大，以更好地为我们所有人提供支持。

与 2022 年一样，开发人员体验仍然是首要任务。 Vue 3.3 为 <script setup> 带来了改进的 TypeScript 支持。Nuxt 发布了 8 个小版本并推出了 Nuxt DevTools，这是一个创意和富有洞察力的 UI，可帮助我们更好地了解我们的应用程序并更快地开发它们。

展望未来，正如 Evan 所说，2024 年将是 Vue 令人兴奋的一年。Vue 3.4 即将发布， Vapor mode 现已开源，进展顺利。所有这些都为新的一年提供了更多的性能改进和社区创新。

今年，Next.js 仍然是后端/全栈类别的领先项目。

next-14 专注于改进服务器操作并引入了新的局部预览渲染模式。

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

这个介绍 展示了直接从组件进行 SQL 请求，但人们可能错过了重点：React Server Components 可以像独立的组件一样工作，可以将其放在应用程序中的任何位置，而无需任何繁琐的连接，该视频很好地帮助建立了由 RSC 实现的新思维模型，展示了服务器和客户端组件的无缝混合。

排名第二的 Astro 继续攀升。除了原始概念（生成无需 JavaScript 即可运行的超快速静态站点，并使用您选择的 UI 框架添加交互性的模块）之外，它还可以用于动态生成页面。

我对 .astro 文件的模板系统的简洁性（非常接近 JSX）以及出色的 DX（CLI 非常漂亮！）印象深刻。

astro-4 引入了用于开发的新工具栏、自动 i18n 路由和新的视图转换 API，以改善用户体验。

Bun 也是一个 bundler 所以我们今年将其纳入了 “构建工具” 类别。

第二名 Vite 仍然是最受欢迎的通用 bundler ，为 Astro、Nuxt、Remix、SolidStart、SvelteKit 等元框架提供支持。

11 月发布的 version 5 建立在 rollup 4 的基础上，带来了性能改进。

Evan You 宣布 他正在研究 Rolldown，这是 Rollup 的 Rust 替代品，将集成到 Vite 中。因此，Vite 的未来一片光明！

第三名 Biome 的崛起是今年的故事之一。它与 Rome 衰落 有关，这是一个雄心勃勃的项目，旨在统一工具（编译、 linting、格式化、打包、测试）。但这个项目背后的公司垮台了，该项目也随即停止。

不过幸运的是，该项目被 forked 并以 Biome 的名义重生。

11 月，Biome 赢得了 Prettier Challenge：创建 “一个可以通过 Prettier 95% 以上测试的 Rust 驱动的代码格式化程序” 。Prettier 都认可了，那我们可以期待 2024 年 Biome 的更多可能。

说到 Rust，Oxc 和 Rspack 是这个领域的新参与者，来自 ByteDance 团队。 Rspack 提供了与 Webpack 的兼容性，同时提供了无与伦比的性能。自我们发布 Rising Stars 以来，这是第一次 Webpack 没有进入榜单，我们感觉很奇怪，因为毕竟用它的人这么多！