2024 JavaScript Rising Star

本文翻译自2024 JavaScript Rising Star

最受欢迎的项目

总冠军:shadcn/ui 再次获得🏆

As in 2023, shadcn-ui is the hottest project of the year. It found a perfect balance between robust foundations (provided by headless component libraries such as Radix Primitives) and customization possibilities.

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

The idea of letting developers own the code of their components, instead of providing components you have to import, was really a game changer.

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

A lot of features were added in 2024:

2024 年添加了很多功能:

  • Charts powered by the library Recharts
    由 Recharts 库提供支持的图表
  • Themes to generate sets of CSS variables you can customize in your codebase
    用于生成可在代码库中自定义的 CSS 变量集的主题
  • Blocks: a collection of layouts to address the needs of typical web apps
    Blocks:满足典型 Web 应用程序需求的布局集合
  • New components such as a responsive and extensible sidebar
    新组件,例如响应式和可扩展的侧边栏

The new CLI is much more powerful and flexible:

新的 CLI 更加强大和灵活:

  • shadcn add can now install components, themes, hooks, utils, dependencies, etc.
    shadcn add 现在可以安装组件、主题、挂钩、实用程序、依赖项等。
  • It supports multiple frameworks: Next.js, Remix, Vite, Laravel, etc.
    它支持多种框架:Next.js、Remix、Vite、Laravel 等。
  • It can update your Tailwind config instead of overriding it
    它可以更新您的 Tailwind 配置而不是覆盖它
  • Support for monorepos 支持单一仓库

Another reason for its success is the tight integration with the service v0 that can generate components built on top of shadcn/ui.

其成功的另一个原因是与服务 v0 的紧密集成,可以生成构建在 shadcn/ui 之上的组件。

It's also a great learning resource to show how to create composable components that are easy to extend, as components are right in your source folder.

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

Number 2: Excalidraw

Excalidraw is an open-source online tool designed for creating digital drawings and visualizations with a distinctive hand-drawn style that makes it the perfect tool to brainstorm ideas or explain concepts and workflows.

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

AI features include: Text to Diagram, Mermaid to Excalidraw, and Wireframe to Code.

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

Number 3: AFFiNE

AFFiNE is an open-source knowledge base and project management tool that combines the capabilities of tools like Notion (with documents made of blocks) and Miro (infinite canvas for drawing).

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

Being offline-first, it's a great tool to build one's Personal Knowledge Base.

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

Special mentions 特别提及

If you want to see what a browser is capable of, check out:

如果您想了解浏览器的功能,请查看:

  • PGlite: a Postgres database using WebAssembly
    PGlite:使用 WebAssembly 的 Postgres 数据库
  • WebVM: a virtual machine running in the browser
    WebVM:运行在浏览器中的虚拟机

前端框架

At number two in 2023, htmx reached the top of the frontend framework category in 2024.

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

It can be considered an extension of the HTML language (hence its name) and is often regarded as a library rather than a framework. However, the boundary is blurry. Check out this article explaining why htmx is another framework.

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

It's a great choice if you need to enhance a static site with interactivity or if your application's state is "server-driven." By using only a combination of HTML hx-* attributes, you can implement features like data fetching without writing a single line of JavaScript.

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

Want to see it in action? This "Rising Stars" site is built with Astro, and htmx powers features such as the lazy loading of extra categories when you scroll down.

想看看它的实际效果吗?这个"新星"网站是用 Astro 构建的,htmx 提供了一些功能,例如向下滚动时延迟加载额外类别。

At 2 , React keeps reinventing itself, which is part of its success. It took more than three years to release version 19, but it finally launched in December after back-and-forth changes related to the Suspense API. Check out the React 19 cheatsheet for more details.

第2名,React 不断自我改造,这是其成功的一部分。版本 19 历时三年多才发布,经过 Suspense API 相关的反复修改,最终于 12 月推出。查看 React 19 备忘单了解更多详细信息。

Among the new features, the support of web components ("Custom Elements") is great news. Speaking of web components, Ryan Carnato, the creator of Solid (number 8) wrote why Web Components Are Not the Future, creating some controversy. An interesting response came from Lea Vera in this post concluding we should use "whatever tools we find most productive".

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

At 3 , Svelte also had a major release with version 5. The standout change is the introduction of "runes," an explicit mechanism for declaring reactive state. It's worth mentioning that Svelte has the highest positive opinion in the State of JS results.

第3名,Svelte 3 还发布了版本 5 的主要版本。最突出的变化是引入了"runes",这是一种用于声明反应状态的显式机制。值得一提的是,Svelte 在 State of JS 结果中的积极评价最高。

React 生态

撰稿人:Robin Wieruch

2024 saw React paradoxically become both more opinionated and less opinionated.

2024 年,React 矛盾地变得更加固执己见和不那么固执己见。

On one hand, React has grown more opinionated with the introduction of Server Components and Server Functions, steering developers toward architectures that operate across the wire. On the other hand, it has become less opinionated as these new primitives are being adopted and abstracted by several frameworks, each taking its own approach.

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

React is no longer just a library. It is evolving into a specification for frameworks, representing a significant shift in the ecosystem toward a framework-first mindset. However, it still allows developers to opt-out of this mindset and stay closer to the client if they prefer.

React 不再只是一个库。它正在演变成框架规范,代表着生态系统向框架优先思维方式的重大转变。然而,它仍然允许开发人员选择退出这种思维方式,并根据需要与客户保持更密切的关系。

During all this transformation, React remains committed to refining its core. The ongoing development of the React Compiler focuses on improving both performance and the developer experience. With the release of React 19, support for custom elements has been introduced, along with new hooks and form actions that redefine how forms are managed in React.

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

I'm now excited by the possibilities React 19 unlocks. React is becoming a full-stack framework, and it's fascinating to see how this will shape the future of web development with all the players in the React ecosystem.

我现在对 React 19 所释放的可能性感到兴奋。 React 正在成为一个全栈框架,很高兴看到这将如何与 React 生态系统中的所有参与者共同塑造 Web 开发的未来。

Vue 生态

撰稿人:Daniel Roe

This year has been a good one in the Vue ecosystem. Vue itself has seen a much more active release cycle from the core team, with new minors delivering regular performance improvements. For example, the the reactivity system was reworked in v3.5, with another change to use the new, lighter, alien-signals approach already landing in the main branch .

今年对于 Vue 生态系统来说是美好的一年。 Vue 本身也看到了核心团队发布更加频繁,其中新的小版本带来性能提升。 例如,响应式系统在 v3.5 中进行了重构,并且另一项使用新的、更轻量的 alien-signals 方法的更改已经合并到主分支。

One of the most marked signs of the ecosystem's confidence can be seen in its UI libraries. They are flourishing. Of course, part of what's enabling this is Tailwind CSS. Its convention-based approach to writing CSS and cross-framework capability means that UI libraries like shadcn-vue or Radix Vue (soon to be Reka UI ) could be straightforwardly ported from their React equivalents. Equally, Vue-native libraries like Element Plus and Naive UI continue to thrive, with dedicated user bases and consistent growth.

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

However, the best result of all UI libraries has come from PrimeVue , which can integrate with Tailwind CSS but doesn't require it. PrimeVue made it into the 2nd place spot with a whopping 5.4k stars. They have seen sustained development this year, and have ambitions in the React and Angular ecosystems as well - good news for the Primefaces ecosystem as a whole.

然而,所有 UI 库中表现最出色的要数 PrimeVue,它可以与 Tailwind CSS 集成,但不是强制性的。PrimeVue 获得了令人瞩目的 5.4k 个 star,位居第二。 今年他们一直保持着持续的开发,并且也有在 React 和 Angular 生态系统中发展的雄心------这对整个 Primefaces 生态系统来说是个好消息。

We also see a number of frameworks like Nuxt, Slidev, VitePress and Vue Element Admin which are doing very well indeed.

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

Slidev offers an incredible, interactive experience for developing slides, with significant improvements rolled out this year including Twoslash improvements and Magic Move support.

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

VitePress continues to be a case-study in generating static sites built with Vue, and offers rock-solid performance and a great developer experience. It remains the go-to for documentation websites in the Vue ecosystem and beyond, but can be used much more broadly.

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

Nuxt tops the list. As the most used meta-framework in the Vue space, a big part of this year's work has been solidifying the changes made in Nuxt 3, and preparations for a smooth transition to the next Nuxt major in v4. But we've also seen the release of new core modules like Nuxt Fonts (zero config optimised web fonts) and Nuxt Scripts (performant third-party script loading), and development on nuxt-auth-utils, which is being developed into a core Nuxt auth solution.

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

For all of the libraries we see on the list, developer experience remains a top priority and the next year promises some pretty exciting things for Vue developers, like Vapor mode (at last), stabilised Suspense in Vue 3.6, a next Nuxt major release - and more.

对于榜单上列出的所有库来说,开发者体验依然是重中之重。展望明年,Vue 开发者们可以期待一些令人兴奋的新功能,例如(终于到来的)Vapor 模式,Vue 3.6 中稳定版的 Suspense,以及 Nuxt 的下一个主要版本,等等

后端/全栈

For the 4th consecutive year, Next.js remains the most popular full-stack framework. The version 15 release supports React 19 and brings performance improvements, leveraging the new Cache API, as well as enhanced developer experience (DX) thanks to the full adoption of Turbopack as the build tool.

Next.js 连续第四年保持最受欢迎的全栈框架的地位。版本 15 版本支持 React 19,并利用新的 Cache API 带来性能改进,并由于全面采用 Turbopack 作为构建工具而增强了开发人员体验 (DX)。

The newcomer in the category is the web server Hono , taking the second spot. It can be seen as a modern replacement for Express (ranked 15th despite being 15 years old!) and is capable of running in multiple JavaScript runtimes: Node.js, of course, but also Deno, Bun, and serverless environments like Lambda or Cloudflare Workers. It stands out for its incredibly small footprint. Read the story from its creator.

该类别中的新晋者是 Web 服务器 Hono,它占据了第二名的位置。 它可以被视为 Express 的现代替代品(尽管已经有 15 年历史了,但排名第 15 位!),并且能够在多种 JavaScript 运行时环境中运行:当然包括 Node.js,还有 Deno、Bun 以及像 Lambda 或 Cloudflare Workers 这样的无服务器环境。 它以极其小巧的体积而著称。 阅读其创建者的故事

At 3 , Astro has become a versatile solution for building content-heavy applications. The version 5 release introduced a new Content Layer, enabling type-safe data fetching from any source---whether it's from the file system or external APIs.

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

I've used Astro to build this site, and I'm impressed by the DX (the CLI that calls you an astronaut is so cute!) and the exceptional web performance it delivers.

我使用 Astro 构建了这个网站,并且我对它的开发者体验(那个称呼你为宇航员的命令行界面真是太可爱了!)以及它带来的卓越的 Web 性能印象深刻。

构建工具

撰稿人: Sébastien Lorber

2024 is another great year for JS tooling, with ongoing work to innovate and improve performance. Many projects have matured and gained momentum, while other super exciting projects are still being developed.

2024 年对于 JS 工具生态来说又将是精彩的一年,持续不断的工作致力于创新和提升性能。许多项目已经成熟并获得发展势头,而其他一些超级令人兴奋的项目仍在开发中。

Vite has been the big winner again this year, renewing for the second time its State of JS awards as the most adopted and loved technology. It's rare to have both high usage and retention, let alone maintain it. We are eagerly waiting to see how the new void(0) company will impact the Vite ecosystem next year!

Vite 今年又成最大赢家了,第二次拿下 State of JS 大奖,是最受欢迎和被广泛采用的技术。 同时兼具高使用率和高留存率可太少见了,能一直保持就更不容易。 我们特别想知道,明年新的 void(0) 公司会对 Vite 生态产生什么影响!

It's worth mentioning that the most successful tools are making themselves easy to adopt:

顺便一提,那些最成功的工具都努力让自己用起来很方便:

  • Rspack is an almost drop-in alternative to webpack that started to gain traction, successfully adopted by Docusaurus and Nuxt. It should explode in 2025, given its ease of adoption and the number of existing webpack projects that could build faster.
    Rspack 几乎是 webpack 的直接替代品,开始受到关注,并被 Docusaurus 和 Nuxt 成功采用。鉴于其易于采用以及可以更快构建的现有 webpack 项目的数量,它应该会在 2025 年爆发。
  • Bun is an all-in-one JS toolchain, also designed to facilitate adoption thanks to its compatibility with Node.js, npm, or Jest. It continued its ongoing compatibility work in 2024, notably shipping Windows support and text-based lockfile.
    Bun 是一个一体化的 JS 工具链,由于它与 Node.js、npm 或 Jest 的兼容性,也旨在促进采用。它在 2024 年继续进行兼容性工作,特别是提供 Windows 支持和基于文本的锁定文件。
  • Rolldown is a fast bundler with a Rollup-compatible API and esbuild feature parity. It's still in active development but progressing fast and recently published the first v1.0 beta. One of the most eagerly awaited projects, set to power Vite in 2025.
    Rolldown 是个速度很快的打包工具,它的 API 和 Rollup 兼容,功能也跟 esbuild 差不多。它现在还在积极开发中,但进展很快,最近刚发布了第一个 v1.0 beta 版。这是大家期待已久的项目之一,计划在 2025 年给 Vite 提供动力。
  • Turbopack is an incremental bundler that initially focuses on being an implementation detail of Next.js, that you can turn on with a simple CLI --turbo flag. Turbopack Dev is considered stable, and Turbopack Prod is being actively worked on. A standalone version of Turbopack is planned in the future.
    Turbopack 是一个增量捆绑器,最初专注于 Next.js 的实现细节,您可以使用简单的 CLI --turbo 标志来打开它。 Turbopack Dev 被认为是稳定的,而 Turbopack Prod 正在积极开发中。未来计划推出 Turbopack 的独立版本。
  • Biome, a faster alternative to Prettier (with 97%+ compatibility) and ESLint, has been widely and positively adopted by the community.
    Biome 是 Prettier(兼容性超过 97%)和 ESLint 的更快替代品,已被社区广泛积极采用。

On the TypeScript side, it's also worth mentioning:

在 TypeScript 方面,也值得一提:

  • TypeScript 5.5 shipped Isolated Declarations, unlocking improved build parallelization
    TypeScript 5.5 提供独立声明,解锁改进的构建并行化
  • Node.js now supports TypeScript by default and can run .ts files directly. It's coming in the very next v23.6 release and should be backported in v22. Both Bun and Deno already had support.
    Node.js 现在默认支持 TypeScript,可以直接运行 .ts 文件。它会在下一个 v23.6 版本中出现,并且应该会在 v22 中向后移植。 Bun 和 Deno 都已经支持。

移动端

撰稿人:Evan Bacon

In 2024, React Native continues to dominate the mobile app space, maintaining its status as the most popular framework for building cross-platform applications. Expo, for the second consecutive year, remains the top-ranked project, growing substantially since 2023.

2024 年,React Native 还是移动应用这块儿的扛把子,依然是最火的跨平台应用开发框架。Expo 连续第二年排第一,而且从 2023 年开始增长了不少。

One of the biggest trends this year is the growing emphasis on web/universal support in React Native. Expo Router has made substantial progress in bridging the web-native gap, introducing Expo DOM components ('use dom') to enable incremental migration between React web and universal React. This can also be observed in Meta's shift away from React Native for Web towards the more web-focused React Strict DOM and Stylex which they're using internally. Further the majority of the top trending projects are focused on web/native unification.

今年最大的趋势之一就是 React Native 越来越重视 Web/通用支持。Expo Router 在弥合 Web 和 Native 之间的差距方面取得了很大进展,它推出了 Expo DOM 组件('use dom'),让 React Web 和通用的 React 之间可以逐步迁移。而且,Meta 也开始放弃 React Native for Web,转而使用更偏向 Web 的 React Strict DOM 和 Stylex 了,他们内部都在用。还有啊,现在最火的项目,大部分也都是在搞 Web 和 Native 的统一。

Styling is still a key focus in the ecosystem. This can especially be observed with Yoga v3 (React Native styling engine) which has brought a number of enhancements to built-in React Native styles, primarily driven by Meta's work on first-party apps like Instagram and Facebook for Quest (built with React Android). Meanwhile, community-driven solutions continue to thrive, with multiple approaches and opinions all generally bringing the best parts of the web over to native.

样式这块儿仍然是生态系统里挺受关注的一个点。Yoga v3(React Native 的样式引擎)就给 React Native 内置的样式带来了一堆增强功能,这主要得归功于 Meta 在 Instagram 和 Facebook for Quest 这些第一方应用上的努力(它们是用 React Android 开发的)。同时呢,社区驱动的解决方案也仍然很活跃,各种方法和观点都有,但总的来说,都是想把 Web 上最好的东西搬到 Native 这边来。

Looking ahead, I expect AI to play an even larger role in native development tooling and application experiences. Expo Router's early preview of universal React Server Components will likely inspire new composable server libraries to emerge. Additionally, native UIs will likely evolve even further, with more bindings into SwiftUI and Jetpack Compose, overall widening the 'pit of success'.

展望未来,我觉得 AI 会在原生开发的工具和应用体验方面发挥更大的作用。Expo Router 提前预览的通用 React 服务端组件,可能会启发新的可组合服务端库冒出来。还有,原生的 UI 肯定还会继续发展,会有更多跟 SwiftUI 和 Jetpack Compose 的绑定,总的来说,会扩大"成功之坑"。

I also predict that the native community will grow even larger with the introduction of Expo DOM components and continued improvements to single-command app deployment tools like (EAS Build), making it a much more familiar and exciting space for all developers.

我还预测,随着 Expo DOM 组件的出现,以及像 EAS Build 这种一键部署工具的持续改进,原生社区肯定会变得更大,对所有开发者来说,这都会变成一个更熟悉、更令人兴奋的领域。。

2025 will definitely be an exciting year!

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

状态管理

撰稿人:Jack Herrington

Zustand continues its meteoric rise as the go-to state management library for React, as well as React Native and beyond. Zustand is the "bare bones" state management library and it's clear that folks are thirsty for that.

Zustand 继续迅速崛起,成为 React 以及 React Native 等的首选状态管理库。 Zustand 是"最基本的"状态管理库,很明显人们对此非常渴望。

If we look at the results by the style of state management some interesting patterns emerge. Zustand, Pinia and Redux, and Boardgame are unidirectional and you define your state and the actions that change it. With Jotai, Nano stores, and Legend-State you define your state as atoms and create computed atoms that depend on other atoms. Valtio is a bi-directional state management library. And X-State is a state machine library.

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

A conclusion we can draw from these results is that formal Redux style state management (though not the Redux library itself) continues to be the most popular style of state management. While the atomic model is making great strides as well (Recoil, the original atomic library, is just off this top ten).

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

XState cannot be overlooked though. When it comes to complex applications, state machines are a fantastic choice because they model your application into a strict series of states and transitions between states. If you haven't tried it yet the interactive editor and simulator for X-State is a must see.

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

Boardgame and TinyBase are very interesting additions on the top ten. Boardgame is specifically geared towards building games. And Tinybase is geared round local first data storage and syncing that data with backend services. Both of these libraries are highly verticalized, which could indicate a trend. Problems like syncing local first data with backend services is a complex problem, so having libraries (like Tinybase and Legend State) that focus specifically on that is a good thing.

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

One thing I don't see on this list is signals. I'm not sure if that's because folks are waiting on the TC39 proposal to be finalized and widely adopted, or because it's baked into frameworks like Solid, Svelte, and Qwik. Signals might not have made the top ten, but they are still an outstanding way to model state efficiently.

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

The next few years are lining up to be an exciting time in state management for React, Vue, JavaScript and beyond.

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

AI

AI and Large Language Models (LLMs) are significantly transforming how developers work, revolutionizing both frontend and backend development.

人工智能和大型语言模型 (LLMs) 正在显着改变开发人员的工作方式,彻底改变前端和后端开发。

Number one this year, n8n is a no-code automation platform that has been around for a while but saw a surge in popularity due to its AI capabilities, enabling developers to build AI features with models running locally. It's part of a starter kit that quickly sets up a local AI environment with Docker.

今年排名第一的 n8n 是一个无代码自动化平台,它已经存在了一段时间,但由于其 AI 功能而受到欢迎,使开发人员能够使用本地运行的模型来构建 AI 功能。它是入门套件的一部分,可使用 Docker 快速设置本地 AI 环境。

At two, Flowise is another automation tool, built on top of LangChain, that specializes in creating workflows with local LLMs. Building workflows is as simple as picking one of the available building blocks and connecting inputs and outputs through the UI.

第2名,Flowise 是另一个自动化工具,构建在 LangChain 之上,专门用于使用本地 LLMs 创建工作流程。构建工作流程非常简单,只需选择可用的构建块之一并通过 UI 连接输入和输出即可。

At three, bolt.new is an amazing tool that can build full-stack applications using any framework (Next.js, Remix, Astro, Nuxt, etc.) and deploy them (using Supabase ) in record time, all from a single prompt.

第3名,bolt.new 是一个令人惊叹的工具,可以使用任何框架(Next.js、Remix、Astro、Nuxt 等)构建全栈应用程序,并在创纪录的时间内部署它们(使用 Supabase),所有这一切都来自一个提示。

At four, Transformers.js is a JavaScript library that brings state-of-the-art natural language processing (NLP) models, like those from Hugging Face, directly to the browser and Node.js. It enables developers to run AI models locally without relying on cloud APIs, making NLP tasks faster, more private, and accessible. Check how to detect sentiment and objects in images in this introduction.

第4名, Transformers.js 是一个 JavaScript 库,它将最先进的自然语言处理 (NLP) 模型(例如 Hugging Face 的模型)直接引入浏览器和 Node.js。它使开发人员能够在本地运行 AI 模型,而无需依赖云 API,从而使 NLP 任务更快、更私密且易于访问。在本简介中查看如何检测图像中的情感和对象。

At five, Vercel AI SDK is a great tool for integrating AI agents into web applications. The SDK provides an abstraction that lets you connect to any LLM. It works seamlessly with Next.js applications, allowing developers to create exceptional user experiences by leveraging features like streaming. While it doesn't have LangChain's flexibility in terms of agent orchestration, it's often considered the best choice for LLM interaction in the TypeScript ecosystem.

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

Styling / CSS in JS

组件库

测试

桌面端

静态站点

GraphQL

总结

2024 was full of exciting releases:

2024 年充满了令人兴奋的发布:

  • JSR: a new package registry from the Deno team that supports TypeScript natively.
    JSR:来自 Deno 团队的新包注册表,原生支持 TypeScript。
  • Deno v2: an important milestone for the JS runtime, focused on using Deno at scale , including interoperability with legacy JS infrastructure, the ability to import any NPM package, and a stable Standard Library. Deno is also a package manager with its own caching mechanism to provide lightning-fast installs.
    Deno v2:JS 运行时的一个重要里程碑,专注于大规模使用 Deno,包括与遗留 JS 基础设施的互操作性、导入任何 NPM 包的能力以及稳定的标准库。 Deno 也是一个包管理器,拥有自己的缓存机制,可提供闪电般的安装速度。
  • Bun v1.1 now supports Windows.
    Bun v1.1 现在支持 Windows。
  • TanStack Start: it started as a boilerplate built around TanStack router and morphed into a server-bound framework all of its own!
    TanStack Start:它最初是围绕 TanStack 路由器构建的样板,后来演变成自己的服务器绑定框架!
  • Tauri v2 comes with a better developer experience (DX), a new plugin system, and mobile support.
    Tauri v2 提供了更好的开发者体验 (DX)、新的插件系统和移动支持。
  • Astro 5: the web framework for building content-driven websites, praised for its amazing DX. It introduces a new content layer to fetch content from any source in a flexible and type-safe way.
    Astro 5:用于构建内容驱动网站的 Web 框架,因其令人惊叹的 DX 而受到赞誉。它引入了一个新的内容层,以灵活且类型安全的方式从任何来源获取内容。
  • The new company VoidZero, dedicated to a high-performance and unified dev toolchain for the JS ecosystem.
    新公司VoidZero致力于为JS生态系统提供高性能、统一的开发工具链。
  • Vite 6 with the new Environment API that opens new possibilities to expand beyond the browser.
    Vite 6 具有新的环境 API,为扩展至浏览器之外开辟了新的可能性。
  • TailwindCSS 4 provides CSS-first configuration and better performance.
    TailwindCSS 4 提供 CSS 优先的配置和更好的性能。
  • React Router v7 brings back to the library features and improvements coming from Remix. The merger between projects is made clear by the docs that mention two ways to start, using either the library or the full framework.
    React Router v7 恢复了来自 Remix 的库功能和改进。文档明确了项目之间的合并,提到了两种启动方式,即使用库或完整框架。

One of the biggest news items came at the very end of the year: Node.js 23 supports TypeScript without the need for an experimental flag.

最大的新闻之一出现在今年年底:Node.js 23 支持 TypeScript,无需实验标志。

However, the most significant changes are not related to the libraries or frameworks we use to write code. Instead, they revolve around the incredible tools powered by AI. IDEs like Cursor and services such as bolt.new, Lovable, Replit, and v0.dev can generate and even deploy full-stack applications with just a few prompts. If you can say it, you can build it! In 2025, competition in this field will skyrocket, and developers will need to adapt to leverage these powerful tools to their fullest potential.

然而,最重要的变化与我们用来编写代码的库或框架无关。相反,它们围绕着人工智能驱动的令人难以置信的工具。 Cursor 等 IDE 以及 Bolt.new、Lovable、Replit 和 v0.dev 等服务只需几个提示即可生成甚至部署全栈应用程序。如果你能说出来,你就能建造它!到 2025 年,该领域的竞争将急剧加剧,开发人员将需要适应这些强大的工具,以充分发挥其潜力。

相关推荐
GISer_Jing26 分钟前
从0开始分享一个React项目(二):React-ant-admin
前端·react.js·前端框架
明月看潮生27 分钟前
青少年编程与数学 02-006 前端开发框架VUE 12课题、表单绑定
前端·javascript·vue.js·青少年编程·编程与数学
zlting~30 分钟前
【VUE+ElementUI】通过接口下载blob流文件设置全局Loading加载进度
前端·vue.js·elementui
努力的小玖心1 小时前
Java将String类型的html文本中的img路径替换前缀
java·前端·html
菜鸟xy..1 小时前
html 前端进行浮动布局设置
前端·html
赔罪1 小时前
HTML - <link>
前端·vscode·html·webstorm
一只小爪子1 小时前
通过 ulimit 和 sysctl 调整Linux系统性能
linux·运维·前端
一点一木1 小时前
前端报告 2024:全新数据,深度解析未来趋势
前端·javascript·vue.js
失眠的咕噜1 小时前
vue 导出excel接口请求和axios返回值blob类型处理
前端·javascript·vue.js
HelloZheQ2 小时前
CSS 伪类和伪元素:为你的选择器注入更多活力
前端·css