2024年 JavaScript 明星项目

年度冠军项目: shadcn/ui 蝉联榜首 🏆

与 2023 年一样，shadcn-ui 是今年最热门的项目。它在强大的基础（由 Radix 等无头组件库提供）和定制可能性之间找到了完美的平衡。

让开发人员本身项目中拥有其组件代码，而不是提供您需要import导入的组件，这种想法确实改变了以往的游戏规则。

2024 年添加了很多功能：

• 图表 由 Recharts库提供支持的图表
• 主题 用于生成可在代码库中自定义的 CSS 变量集合
• 块: 满足典型 Web 应用程序需求的布局集合
• 新组件，例如响应式和可扩展的侧边栏

新的命令行 CLI 更加强大和灵活

• shadcn add 现在可以安装组件、主题、钩子、工具类、依赖项等。
• 它支持多种框架：Next.js、Remix、Vite、Laravel 等。
• 它可以更新您的 Tailwind 配置，而不是覆盖它
• 支持 monorepo

它成功的另一个原因是与 v0 服务的紧密集成，该服务可以生成基于 shadcn/ui 构建的组件。

它也是一个很好的学习资源，可以展示如何创建易于扩展的可组合组件，因为组件就位于您的源文件夹中。

第二名: Excalidraw

Excalidraw 是一个开源的在线工具，旨在创建具有独特手绘风格的数字绘图和可视化，使其成为集思广益或解释概念和工作流程的完美工具。

AI 功能包括：文本到图表、Mermaid 到 Excalidraw 和 Wireframe 到代码。

第三名: AFFiNE

AFFiNE 是一个开源知识库和项目管理工具，它结合了 Notion（由块组成的文档）和 Miro（用于绘图的无限画布）等工具的功能。

作为离线优先，它是构建个人知识库的绝佳工具。

特别提及

如果您想了解浏览器的功能，请查看：

• PGlite: 使用 WebAssembly 的 Postgres 数据库
• WebVM: 在浏览器中运行的虚拟机

htmx 在 2023 年排名第二，在 2024 年达到前端框架类别的榜首。

它可以被认为是 HTML 语言的扩展（因此得名），并且通常被视为库而不是框架。然而，这个界限是模糊的。查看这篇文章，解释为什么 htmx 是另一个框架。

如果您需要增强具有交互性的静态站点，或者如果您的应用程序的状态是“服务端驱动的”，那么这是一个不错的选择。通过仅使用 HTML hx-* 属性的组合，您无需编写任何 JavaScript 即可实现数据获取等功能。

想看看它的实际效果吗？这个 “Rising Stars” 网站是用 Astro 构建的，htmx 提供了诸如向下滚动时延迟加载额外内容等功能。

第二名，React 不断重塑自我，这是其成功的一部分。发布第 19 版花了三年多的时间，但在与 Suspense API 相关的来回更改后，它终于在 12 月推出。查看 React 19 备忘单了解更多详情。

在新功能中，对 Web 组件（“自定义元素”）的支持是个好消息。说到 Web 组件，Solid 的创建者 Ryan Carnato（第 8 名）写了为什么 Web Components 不是未来，引起了一些争议。Lea Vera 在这篇文章中给出了一个有趣的回应，她认为我们应该使用 “我们认为最有成效的任何工具”。

第三名，Svelte 也发布了版本 5 的主要版本。突出的变化是引入了 “runes”，这是一种声明反应式状态的显式机制。值得一提的是，Svelte 在 State of JS 结果中的正面评价最高。

2024 年，React 自相矛盾地变得更加固执己见，也变得不那么固执己见。

一方面，随着 Server Components 和 Server Functions 的引入，React 变得更加固执己见，将开发人员引导到跨线运行的架构。另一方面，随着这些新的原语被多个框架采用和抽象化，每个框架都采用自己的方法，它变得不那么固执己见。

React 不再只是一个库。它正在演变为框架规范，代表着生态系统向框架优先思维方式的重大转变。但是，它仍然允许开发人员选择退出这种思维方式，如果他们愿意，可以更接近客户。

在所有这些转型过程中，React 仍然致力于完善其核心。React 编译器的持续开发侧重于提高性能和开发人员体验。随着 React 19 的发布，引入了对自定义元素的支持，以及重新定义在 React 中管理表单的新钩子和表单操作。

我现在对 React 19 解锁的可能性感到兴奋。React 正在成为一个全栈框架，看到它将如何与 React 生态系统中的所有参与者一起塑造 Web 开发的未来，这着实令人着迷。

今年在 Vue 生态系统中是不错的一年。Vue 本身已经看到了核心团队更加活跃的发布周期，新的次要版本会定期提供性能改进。例如，在 v3.5 中响应性系统被重新设计，另一个更改是使用新的、更轻的alien-signals方法，已经登陆 main 分支。

生态系统信心最明显的标志之一可以在其 UI 库中看到。他们正在蓬勃发展。当然，实现这一点的部分原因是 Tailwind CSS。它基于约定的 CSS 编写方法和跨框架功能意味着像 shadcn-vue 或 Radix Vue（很快成为 Reka UI）这样的 UI 库可以直接从它们的 React 等效项移植而来。同样，Element Plus 和 Naive UI 等 Vue 原生库继续蓬勃发展，拥有专门的用户群和持续增长。

但是，所有 UI 库的最佳结果来自 PrimeVue ，它可以与 Tailwind CSS 集成，但不需要它。PrimeVue 以高达 5.4k 的星星排名第二。他们今年看到了持续的发展，并且在 React 和 Angular 生态系统方面也有雄心壮志——这对整个 Primefaces 生态系统来说是个好消息。

我们还看到许多框架，如 Nuxt、Slidev、VitePress 和 Vue Element Admin，它们确实做得非常好。

Slidev 为开发幻灯片提供了令人难以置信的交互式体验，今年推出了重大改进，包括 Twoslash 改进和 Magic Move 支持。

VitePress 仍然是生成使用 Vue 构建的静态站点的案例研究，并提供坚如磐石的性能和出色的开发人员体验。它仍然是 Vue 生态系统及其他领域文档网站的首选，但可以更广泛地使用。

Nuxt 位居榜首。作为 Vue 领域使用最多的元框架，今年的很大一部分工作是巩固 Nuxt 3 中所做的更改，并为顺利过渡到 v4 中的下一个 Nuxt 专业做准备。但我们也看到了新核心模块的发布，如 Nuxt Fonts（零配置优化的 Web 字体）和 Nuxt Scripts（高性能第三方脚本加载），以及 nuxt-auth-utils 的开发，它正在开发成核心 Nuxt 身份验证解决方案。

对于我们在列表中看到的所有库，开发人员体验仍然是重中之重，明年将为 Vue 开发人员带来一些非常令人兴奋的事情，例如 Vapor 模式（最新版）、Vue 3.6 中的稳定 Suspense、下一个 Nuxt 主要版本——等等。

Next.js 连续 4 年成为最受欢迎的全栈框架。版本 15 支持 React 19，并带来了性能改进，利用了新的缓存 API，以及由于完全采用 Turbopack 作为构建工具而增强了开发人员体验 （DX）。

该类别中的新成员是 Web 服务器 Hono，位居第二。它可以被视为 Express（尽管已有 15 年历史，但排名第 15 位）的现代替代品，并且能够在多个 JavaScript 运行时中运行：Node.js当然，还有 Deno、Bun 以及 Lambda 或 Cloudflare Workers 等无服务器环境。它以其极小的占地面积而著称。阅读其创作者的故事。

第三名，Astro 已成为构建内容密集型应用程序的多功能解决方案。版本 5 引入了一个新的内容层，支持从任何来源（无论是来自文件系统还是外部 API）获取类型安全的数据。

我使用 Astro 构建了这个网站，开发体验（那个称呼你为宇航员的命令行界面太可爱了！）和它提供的卓越网络性能给我留下了深刻的印象。

2024 年是 JS 工具的又一个丰收年，我们正在努力创新和提高性能。许多项目已经成熟并获得动力，而其他超级令人兴奋的项目仍在开发中。

Vite 今年再次成为大赢家，第二次将其 State of JS awards 评为最被采用和喜爱的技术。同时具有高使用率和保留率的情况很少见，更不用说维护它了。我们热切期待看到新的 void(0) 公司 明年将如何影响 Vite 生态系统！

值得一提的是，最成功的工具是让自己易于采用：

• Rspack 几乎是 webpack 的直接替代品，它开始受到关注，被 Docusaurus 和 Nuxt 成功采用。考虑到它的易用性和可以更快地构建的现有 webpack 项目的数量，它应该会在 2025 年爆炸式增长。
• Bun 是一个多合一的 JS 工具链，由于它与 Node.js、npm 或 Jest 的兼容性，也旨在促进采用。它在 2024 年继续其正在进行的兼容性工作，特别是提供 Windows 支持和基于文本的锁定文件。
• Rolldown 是一个快速的打包器，具有与 Rollup 兼容的 API 和 esbuild 比肩的功能。它仍在积极开发中，但进展迅速，最近发布了第一个 v1.0 测试版。最受期待的项目之一，将于 2025 年为 Vite 提供支持。
• Turbopack 是一个增量捆绑程序，最初专注于成为 Next.js 的实现细节，您可以使用简单的命令行标志 --turbo 来打开它。Turbopack Dev 被认为是稳定的，Turbopack Prod 正在积极开发中。Turbopack 的独立版本计划在未来推出。
• Biome 是 Prettier（兼容性为 97%+）和 ESLint 的更快替代品，已被社区广泛而积极地采用。

在 TypeScript 方面，也值得一提：

• TypeScript 5.5 发布了 Isolated Declarations，解锁了改进的并行化构建
• Node.js 现在默认支持 TypeScript，并且可以直接运行 .ts 文件。它将在下一个 v23.6 版本中推出，应该在 v22 中向后移植。Bun 和 Deno 都已经得到了支持。

2024 年，React Native 将继续主导移动应用领域，保持其作为构建跨平台应用程序最流行的框架的地位。世博会连续第二年保持排名第一的项目，自 2023 年以来大幅增长。

今年最大的趋势之一是 React Native 中对 Web/通用支持的日益重视。Expo Router 在弥合 Web 原生差距方面取得了重大进展，引入了 Expo DOM 组件（“use dom”）来实现 React Web 和通用 React 之间的增量迁移。这也可以从 Meta 从 React Native for Web 转向更专注于 Web 的 React Strict DOM 和 Stylex 中观察到，他们内部正在使用这些 StrictDom。此外，大多数最热门的项目都集中在 Web/原生统一上。

样式仍然是生态系统中的一个关键焦点。这在 Yoga v3（React Native 样式引擎）中尤其明显，它为内置的 React Native 样式带来了许多增强功能，这主要是由 Meta 在 Instagram 和 Facebook for Quest（使用 React Android 构建）等第一方应用程序上的工作驱动的。与此同时，社区驱动的解决方案继续蓬勃发展，多种方法和观点通常都将 Web 的最佳部分带到本地。

展望未来，我预计 AI 将在原生开发工具和应用程序体验中发挥更大的作用。Expo Router 的通用 React Server Components 的早期预览版可能会激发新的可组合服务器库的出现。此外，原生界面可能会进一步发展，更多地绑定到 SwiftUI 和 Jetpack Compose 中，从而总体上扩大“成功的坑”。

我还预测，随着 Expo DOM 组件的引入和对 （EAS Build） 等单命令应用程序部署工具的持续改进，本机社区将变得更大，使其成为所有开发人员更加熟悉和令人兴奋的空间。

2025 年绝对是激动人心的一年！

Zustand 继续迅速崛起，成为 React 以及 React Native 等的首选状态管理库。Zustand 是 “基本” 状态管理库，很明显，人们渴望它。

如果我们按状态管理的风格来看结果，就会出现一些有趣的模式。Zustand、Pinia 和 Redux 以及 Boardgame 是单向的，你可以定义你的状态和改变它的操作。使用 Jotai、Nano stores 和 Legend-State，您可以将状态定义为原子，并创建依赖于其他原子的计算原子。Valtio 是一个双向状态管理库。X-State 是一个状态机库。

我们可以从这些结果中得出的结论是，正式的 Redux 风格的状态管理（尽管不是 Redux 库本身）仍然是最流行的状态管理风格。虽然原子模型也取得了长足的进步（最初的原子库 Recoil 刚刚排在前十名之外）。

不过，XState 也不容忽视。当涉及到复杂的应用程序时，状态机是一个不错的选择，因为它们将您的应用程序建模为一系列严格的状态和状态之间的转换。如果您还没有尝试过，那么 X-State 的交互式编辑器和模拟器是必看的。

Boardgame 和 TinyBase 是前十名中非常有趣的补充。Boardgame 专门用于构建游戏。而 Tinybase 则专注于本地优先数据存储，并将该数据与后端服务同步。这两个库都是高度垂直化的，这可能表明一种趋势。将本地优先数据与后端服务同步等问题是一个复杂的问题，因此拥有专门关注此目的的库（如 Tinybase 和 Legend State）是一件好事。

我在这个列表中没有看到的一件事是信号。我不确定这是因为人们正在等待 TC39 提案最终确定并被广泛采用，还是因为它已经融入到 Solid、Svelte 和 Qwik 等框架中。Signals 可能没有进入前十名，但它们仍然是高效建模状态的出色方式。

未来几年将是 React、Vue、JavaScript 等状态管理的激动人心的时刻。