2024 年最受欢迎的前端项目

最新推荐文章于 2025-03-31 11:03:20 发布

奇舞周刊

最新推荐文章于 2025-03-31 11:03:20 发布

阅读量619

点赞数 1

文章标签：前端

原文链接：https://mp.weixin.qq.com/s?__biz=Mzg4MTYwMzY1Mw==&mid=2247514131&idx=1&sn=cc038cdd2faab9e0fe5e73c355f0b49e&chksm=ce48b60bfe45a59d576a698a683b6e75a854dddc2c1fc4fa273ea125c7a8d860c3d8c370a4bc&scene=126&sessionid=0

版权

本文译者为 360 奇舞团前端开发工程师
原文标题：2024 JavaScript Rising Stars
原文作者：Michael Rambeau
原文地址：https://risingstars.js.org/2024/en

带你了解 2024 年 JS 生态系统的主要发展趋势和项目。

最受欢迎的项目排名

shadcn/ui 又一次获得了总冠军 🏆

和去年一样，shadcn-ui 是今年最热门的项目。它在强大的基础能力（由 radix 等无头组件库^[1]提供）和个性化定制之间找到了完美的平衡。

让开发人员拥有组件代码，而不是用 import 引用组件的想法，确实是个很棒的主意。

2024 年增加的功能有：

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

新的 CLI 更加强大、灵活：

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

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

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

第二名: Excalidraw

Excalidraw 是一个开源的在线工具，可以创建具有独特手绘风格的绘图和可视化，使它成为头脑风暴、阐述概念和工作流的完美工具。

AI 功能包括：文本转图表、Mermaid^[2] 转 Excalidraw 和 Wireframe（线框图）转代码。

第三名: AFFiNE

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

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

下面是分类排行

前端框架

第一名：htmx

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

它可以被认为是 HTML 语言的扩展（因此得名），并且通常被视为库而不是框架。然而，这个界限是模糊的。《why htmx is another framework》（https://htmx.org/essays/is-htmx-another-javascript-framework/)这篇文章解释了为什么 htmx 是另一个框架。

如果你需要给一个静态站点增强交互性，或者你的应用程序是由“服务端驱动的”，那么通过仅使用 HTML hx-* 属性的组合，在不需要编写任何 JavaScript 的情况下，即可实现数据获取等功能。

第二名：React

React 不断自我重塑，这是它成功的原因之一。发布第 19 版花了三年多的时间，但在与 Suspense API 相关的反复更改后，它终于在 12 月推出了。可通过查看 React 19（https://www.epicreact.dev/react-19-cheatsheet）备忘单了解更多详情。

在新功能中，对 web components（“Custom Elements”）的支持是个好消息。说到 web components，Solid（第 8 名）的创建者 Ryan Carnato写了《为什么 Web Components 不是未来》 (《Web Components Are Not the Future》 https://dev.to/ryansolid/web-components-are-not-the-future-48bh)，引起了一些争议。Lea Vera 在这篇文章中给出了一个有趣的回应，她认为我们应该使用 “我们认为最有成效的任何工具”。

第三名：Svelte

Svelte 也发布了版本 5 。最大的变化是引入了 “runes”，这是一种声明反应式状态的显式机制。值得一提的是，Svelte 在 State of JS （https://2024.stateofjs.com/en-US/libraries/front-end-frameworks/）结果中的正面评价最高。

React 生态

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

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

React 不再只是一个库。它正在向框架规范做转变，意味着生态系统也在向框架优先的思维方式做转变。但是，它仍然允许开发人员选择退出这种思维方式，去选择更接近客户。

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

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

Vue 生态

今年的 Vue 生态系统是不错的一年。Vue 核心团队的发布周期更加活跃，会定期通过次版本更新进行性能改进。例如，在 v3.5 中响应系统被重新设计（https://github.com/vuejs/core/pull/10397），另一个更改是使用更新、更轻的 alien-signals（https://github.com/stackblitz/alien-signals）信号库，已经合并到 main 分支。

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

但是，所有 UI 库的最佳实践来自 PrimeVue (https://primevue.org/) ，它可以与 Tailwind CSS 集成，但又不需要它。PrimeVue 以高达 5.4k 的星星排名第二。他们今年还会持续发展，并且在 React 和 Angular 生态系统方面也有雄心壮志——这对整个 Primefaces 生态系统来说是个好消息。

我们还看到许多框架，如 Nuxt、Slidev、VitePress 和 Vue Element Admin（https://github.com/PanJiaChen/vue-element-admin），它们确实做得非常好。

Slidev（https://sli.dev/）为开发幻灯片提供了令人难以置信的交互体验，今年推出了重大改进，包括 Twoslash（https://twoslash.netlify.app/）改进和 Magic Move 支持。

VitePress（https://vitepress.dev/）仍是使用 Vue 构建静态站点的框架，并提供坚如磐石的性能和出色的开发人员体验。它仍然是 Vue 生态系统及其他领域文档类网站的首选，以及更广泛地使用。

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

对于排行中所有的库来说，开发人员的体验仍然是重中之重，明年将为 Vue 开发人员带来一些非常令人兴奋的事情，例如 Vapor mode（最新版）、Vue 3.6 中的 Suspense、Nuxt 的下一个主版本——等等。

后端 / 全栈

第一名：Next.js

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

第二名：Hono

该类别中的新成员是 Web 服务器 Hono，位居第二。它可以被视为 Express（尽管已有 15 年历史，但排名第 15 位）的现代替代品，并且能够在多个 JavaScript 运行时中运行：Node.js，还有 Deno、Bun 以及 Lambda 和 Cloudflare Workers 等无服务器（serverless）环境。它以其极小的体量而著称。如有兴趣，可阅读其创作者的故事（《The story of web framework Hono, from the creator of Hono》https://blog.cloudflare.com/the-story-of-web-framework-hono-from-the-creator-of-hono/）。

第三名：Astro

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

工具

2024 年是 JS 工具的又一个丰收年，大家在努力创新和提高性能。许多项目已经成熟并被推进，还有一些其他超级令人兴奋的项目正在开发中。

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

值得一提的是，最成功的工具是那些易于被采用的工具：

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

在 TypeScript 方面，值得一提的是：

TypeScript 5.5 发布了 Isolated Declarations（https://devblogs.microsoft.com/typescript/announcing-typescript-5-5/#isolated-declarations），解锁了改进的并行化构建
Node.js 现在默认支持 TypeScript，并且可以直接运行 .ts 文件。它将在下一个 v23.6 版本中推出，会在 v22 中向后移植。Bun 和 Deno 都已经得到了支持。

移动端

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

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

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

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

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

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

状态管理

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

如果我们按状态管理的风格来分类，就会出现一些有趣的情况。Zustand、Pinia、 Redux 以及 Boardgame 是单向的，你可以定义你的状态（state）并使用 actions 对其进行改变。Jotai、Nano stores 和 Legend-State，则可以将状态（state）定义为原子，并创建依赖于其他原子的计算原子（computed atoms）。Valtio 是一个双向状态管理库。X-State 是一个状态机库。

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

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

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

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

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

AI

AI 和大语言模型（LLM）正在显著改变开发人员的工作方式，彻底改变前端和后端开发。

第一名：n8n

今年排名第一的 n8n 是一个无代码（no-code）自动化平台，它已经存在了一段时间，但由于其 AI 功能而广受欢迎，使开发人员能够使用本地运行的模型构建 AI 功能。它是使用 Docker 快速设置本地 AI 环境的初学者工具包的一部分。

第二名：Flowise

Flowise 是另一个基于 LangChain 构建的自动化工具，专门用于使用本地 LLM 创建工作流。构建工作流就像选择一个可用的构建块并通过 UI 连接输入和输出一样简单。

第三名：bolt.new

bolt.new 是一个了不起的工具，仅需一个简单的 prompt，它就可以使用任何框架（Next.js、Remix、Astro、Nuxt 等）构建全栈应用程序，并在极短的时间内部署它们（使用 Supabase）。

第四名：Transformers.js

Transformers.js 是一个 JavaScript 库，它将最先进的自然语言处理（NLP）模型（如 Hugging Face 中的模型）直接引入浏览器和 Node.js。它使开发人员能够在本地运行 AI 模型，而无需依赖云 API，从而使 NLP 任务更快、更私密且更易于访问。可以在这个文章（《Using Transformers.js for AI in the Browser》https://www.raymondcamden.com/2024/12/03/using-transformersjs-for-ai-in-the-browser）中，了解如何检测图像中的情绪和物体。

第五名：Vercel AI SDK

Vercel AI SDK 是将 AI agents 集成到 Web 应用程序中的绝佳工具。SDK 提供了一个抽象东西，允许连接到任何 LLM。它与 Next.js 应用程序无缝协作，使开发人员能够利用流式传输等功能创建卓越的用户体验。虽然它在 agent 编排方面没有 LangChain 的灵活性，但它通常被认为是 TypeScript 生态系统中 LLM 交互的最佳选择。

总结

2024 年是激动人心的一年，涌现了众多令人兴奋的新版本发布:

JSR: 一个新包注册表。来自 Deno 团队的新包注册表，原生支持 TypeScript。
Deno v2: JS 运行时的一个重要里程碑，专注于大规模使用 Deno，包括与传统 JS 基础设施的互操作性、导入任何 NPM 包的能力以及稳定的标准库。Deno 也是一个包管理器，拥有自己的缓存机制，可提供闪电般的安装速度。
Bun v1.1 现已支持 Windows系统。
TanStack Start: 它最初是围绕 TanStack router 构建的模板项目，现已演变成为一个独立的服务器端框架！
Tauri v2 具有更好的开发体验（DX）、全新的插件系统和移动端支持。
Astro 5: 用于构建内容驱动网站的 Web 框架，因其出色的开发体验而受到赞誉。它引入了一个新的内容层，以灵活且类型安全的方式从任何来源获取内容。
新公司 VoidZero 致力于为 JS 生态系统提供高性能和统一的开发工具链。
Vite 6 具有新的环境 API（《Increasing Vite's potential with the Environment API》https://green.sapphi.red/blog/increasing-vites-potential-with-the-environment-api），为扩展到浏览器之外开辟了新的可能性。
TailwindCSS 4 提供了 CSS 优先配置和更好的性能。
React Router v7 将 Remix 的功能和改进带回了库。文档清楚地说明了项目之间的合并，其中提到了两种使用方法，即作为库或作为完整框架。

2024 年年末，一个重磅消息传来: Node.js 23 原生支持 TypeScript，而无需再使用实验性标志。

然而，最重要的变化与我们用于编写代码的库或框架无关，则是围绕着由 AI 提供支持的令人难以置信的工具展开。Cursor 等 IDE 以及 bolt、Lovable、Replit 和 v0.dev 等服务只需几个提示即可生成甚至部署全栈应用程序。如果你能描述出来，你就能建造它！到 2025 年，该领域的竞争将急剧上升，开发人员将需要适应以及充分利用这些强大的工具。

参考资料

[1]

无头组件库: 不包含任何样式，只提供结构和交互逻辑的UI组件库。

[2]

Mermaid: https://mermaid.nodejs.cn/intro/

[3]

Notion: https://notion.pengchengxinxi.cn/index.html

[4]

Miro: https://miro.com/

- END -

如果您关注前端+AI 相关领域可以扫码进群交流