2024 JavaScript Rising Stars

这是一篇关于 2024 JavaScript Rising Stars 的文章，主要是对 2024 年 JavaScript 生态中的一些新兴技术进行了梳理和总结。查看原文链接：。

欢迎阅读《JavaScript 新星》第 9 版，这是您了解 2024 年塑造 JS 生态系统的顶级趋势和项目的指南。

下图比较了过去 12 个月 GitHub 上新增的星星数量。我们分析了来自Best of JS 的项目，这是一份精选的与 Web 平台相关的最佳项目列表。请注意，您可以单击某个项目以获取更多信息。

总体最受欢迎项目

总冠军：再次获胜🏆

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

让开发人员拥有自己的组件代码，而不是提供必须的组件import，这个想法确实改变了游戏规则。

2024 年增加了很多功能：

由Recharts库提供支持的图表主题可生成可在代码库中自定义的 CSS 变量集区块：一组布局，用于满足典型 Web 应用程序的需求响应式和可扩展侧边栏等新组件新的 CLI 更加强大且灵活：

shadcn add现在可以安装组件、主题、钩子、实用程序、依赖项等。它支持多种框架：Next.js、Remix、Vite、Laravel 等。它可以更新你的 Tailwind 配置，而不是覆盖它支持 monorepos 其成功的另一个原因是与服务v0紧密集成，可以生成基于 shadcn/ui 构建的组件。

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

第二名：

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

AI 功能包括：文本到图表、美人鱼到 Excalidraw 和线框到代码。

第三名：

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

由于它是离线优先的，因此它是构建个人知识库的绝佳工具。

特别提名

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

：使用 WebAssembly 的 Postgres 数据库：在浏览器中运行的虚拟机

前端框架

在 2023 年排名第二，并在 2024 年荣登前端框架类别榜首。

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

如果您需要增强静态网站的交互性，或者您的应用程序状态是“服务器驱动”，那么它是一个很好的选择。通过仅使用 HTMLhx-*属性的组合，您可以实现数据获取等功能，而无需编写一行 JavaScript。

想看看它的实际效果吗？这个“Rising Stars”网站是用 Astro 构建的，并且 htmx 支持诸如向下滚动时延迟加载额外类别等功能。

在2 版中，React 不断自我重塑，这也是其成功的一部分。它花了三年多的时间才发布 19 版，但在经过与 Suspense API 相关的反复修改后，它终于。查看了解更多详细信息。

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

在3 版中，也发布了一个重要版本 5 。最突出的变化是引入了“runes”，这是一种用于。值得一提的是，Svelte 在JS 状态结果中获得了最高的正面评价。

React 生态

2024 年，React 变得既更加固执己见，又变得更加不固执己见。

一方面，随着服务器组件和服务器函数的引入，React 变得更加固执己见，引导开发人员走向跨网络运行的架构。另一方面，随着这些新原语被多个框架采用和抽象，React 也变得不那么固执己见，每个框架都采用自己的方法。

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

在整个转型过程中，React 始终致力于完善其核心。的持续开发侧重于提高性能和开发人员体验。随着的发布，引入了对自定义元素的支持，以及重新定义 React 中表单管理方式的新钩子和表单操作。

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

Vue 生态

今年是 Vue 生态系统丰收的一年。Vue 本身的核心团队发布周期更加活跃，新的小版本定期带来性能改进。例如，，另一项更改是使用新的、更轻量的外星信号方法，该方法已在主分支中实现。

生态系统信心最明显的标志之一就是其 UI 库。它们正在蓬勃发展。当然，部分原因是 Tailwind CSS。其基于约定的 CSS 编写方法和跨框架功能意味着或（即将更名为）等 UI 库可以直接从其 React 等效库中移植。同样，和等 Vue 原生库继续蓬勃发展，拥有专门的用户群和持续增长。

然而，所有 UI 库中最好的结果来自，它可以与Tailwind CSS 集成，但不需要它。PrimeVue 以 5.4k 颗星的惊人成绩位居第二。他们今年取得了持续的发展，并且在 React 和 Angular 生态系统中也雄心勃勃——这对整个Primefaces生态系统来说是个好消息。

我们还看到许多框架（如 Nuxt、Slidev、VitePress 和Vue Element Admin）确实表现非常出色。

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

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

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

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

后端/全栈

第一：连续四年成为最受欢迎的全栈框架。版本 15发行版支持 React 19，并利用新的 Cache API 带来性能改进，同时由于全面采用 Turbopack 作为构建工具，开发人员体验 (DX) 也得到增强。
第二：该类别的新人是 Web 服务器，位居第二。它可以被视为的现代替代品（尽管已有 15 年历史，但排名第 15 位！）并且能够在多个 JavaScript 运行时中运行：当然是 Node.js，还有 Deno、Bun 和无服务器环境，如 Lambda 或 Cloudflare Workers。它因其占用空间极小而脱颖而出。阅读其创建者的故事。
第三: 已成为构建内容密集型应用程序的多功能解决方案。版本 5引入了新的内容层，支持从任何来源（无论是文件系统还是外部 API）获取类型安全的数据。

我使用 Astro 建立了这个网站，DX（称你为宇航员的 CLI 太可爱了！）以及它提供的卓越网络性能给我留下了深刻的印象。

工具

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

今年再次成为大赢家，第二次荣获 State of JS 大奖，成为最受欢迎和采用率最高的技术。同时拥有高使用率和高留存率实属罕见，更不用说维持了。我们热切期待看到新公司明年将如何影响 Vite 生态系统！

值得一提的是，最成功的工具都很容易被采用：

几乎是 webpack 的替代品，它开始受到关注，并被 Docusaurus 和 Nuxt 成功采用。考虑到它的易用性和可以更快构建的现有 webpack 项目数量，它将在 2025 年爆发。

是一个一体化的 JS 工具链，由于其与 Node.js、npm 或 Jest 的兼容性，也旨在促进采用。它在 2024 年继续进行兼容性工作，特别是推出了Windows 支持和基于文本的 lockfile。

是一款快速打包器，具有与 Rollup 兼容的 API 和 esbuild 功能。它仍处于积极开发阶段，但进展迅速，最近发布了第一个v1.0 beta 版。这是最令人期待的项目之一，将于 2025 年为 Vite 提供支持。

是一个增量打包器，最初专注于成为 Next.js 的实现细节，您可以使用简单的 CLI 标志来启用它—turbo。Turbopack Dev被认为是稳定的，而Turbopack Prod正在积极开发中。未来计划推出 Turbopack 的独立版本。 Biome是 Prettier（兼容性超过 97%）和 ESLint 的更快替代品，已被社区广泛积极采用。

移动端

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

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

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

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

我还预测，随着 Expo DOM 组件的引入以及单命令应用程序部署工具（如EAS Build）的持续改进，原生社区将变得更加庞大，为所有开发人员带来更加熟悉和令人兴奋的空间。

2025年必定是令人兴奋的一年！

状态管理

继续迅速崛起，成为 React、React Native 及其他平台的首选状态管理库。Zustand 是“最基本的”状态管理库，显然人们对此非常渴望。

如果我们根据状态管理的风格来查看结果，就会发现一些有趣的模式。Zustand、和以及是单向的，您可以定义状态和更改状态的操作。使用、和，您可以将状态定义为原子，并创建依赖于其他原子的计算原子。Valtio是一个双向状态管理库。X-State 是一个状态机库。

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

但是，不容忽视。对于复杂的应用程序，状态机是一个绝佳的选择，因为它们将您的应用程序建模为一系列严格的状态和状态之间的转换。如果您还没有尝试过，X-State 的交互式编辑器和模拟器是必看的。

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

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

接下来的几年将是 React、Vue、JavaScript 等技术状态管理领域激动人心的几年。

人工智能

人工智能和大型语言模型 (LLM) 正在极大地改变开发人员的工作方式，彻底改变前端和后端开发。

第一: 是一个无代码自动化平台，它已经存在了一段时间，但由于其 AI 功能而人气飙升，它使开发人员能够使用本地运行的模型构建 AI 功能。它是入门套件的一部分，可以使用 Docker 快速设置本地 AI 环境。
第二：是另一款基于 LangChain 的自动化工具，专门用于使用本地 LLM 创建工作流。构建工作流非常简单，只需选择一个可用的构建块并通过 UI 连接输入和输出即可。
第三：是一个了不起的工具，它可以使用任何框架（Next.js、Remix、Astro、Nuxt 等）构建全栈应用程序，并以创纪录的时间部署它们（使用），只需一个提示即可完成。
第四：是一个 JavaScript 库，它将最先进的自然语言处理 (NLP) 模型（例如 Hugging Face 的模型）直接引入浏览器和 Node.js。它使开发人员能够在本地运行 AI 模型，而无需依赖云 API，从而使 NLP 任务更快、更私密、更易于访问。查看此简介中如何检测图像中的情绪和对象。
第五：是将 AI 代理集成到 Web 应用程序中的绝佳工具。SDK 提供了一个抽象，可让您连接到任何 LLM。它与 Next.js 应用程序无缝协作，允许开发人员利用流媒体等功能创造卓越的用户体验。虽然它在代理编排方面没有 LangChain 的灵活性，但它通常被认为是 TypeScript 生态系统中 LLM 交互的最佳选择。