2023前端各类明星项目排行榜

欢迎来到JavaScript Rising Stars的第八版，这是一个展示2023年JS生态系统趋势的地方。

让我们看看您用的UI组件是如何席卷全球的！

以下图表比较了过去12个月在GitHub上新增的星标数量。我们分析了来自Best of JS的项目，这是一个精选的与Web平台相关的最佳项目列表

最受欢迎的项目总览

第一名：shadcn/ui 🏆

今年最热门的项目是shadcn/ui，这是一个使用React编写的UI组件集合，通过TailwindCSS实现可定制的样式。

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

该项目的成功与Tailwind CSS（总体排名第20）、与React Server Components的兼容性以及出色的文档有着密切的关系。

似乎所有新的React项目都采用了shadcn/ui。甚至Kent C. Dodds也选择了它作为他的前沿技术堆栈。

另一个涉及人工智能的例子是：根据用户描述的UI特性和外观，应用程序v0.dev生成由shadcn/ui组件构成的JSX代码。令人着迷！

最后但并非最不重要的是，Best of JS也在重写过程中使用了它，以从SPA过渡到Next.js应用程序。

它的方法已经启发了其他项目：

shad-cn/svelte是Svelte框架的移植版本。 Draft UI是基于React Aria而不是Radix构建的。 有关深入分析，请参阅文章《shadcn/ui的解剖》。

第二名：Bun

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

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

版本1于9月正式发布（请查看图表中的峰值！），Bun声称已经“准备好投入生产”。

文档提供了很好的示例，以帮助尽快开始使用Bun的API和常见任务，如文件操作和处理数据库交互。

在年底，他们发表了一项强烈声明：

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

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

最受欢迎的前端框架

React

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

React庆祝其成立10周年，还发布了一部纪录片，这充分说明了它的受欢迎程度！

然而，React并非没有怀疑者。一些人认为它是过去的产物，这一观点在这篇文章中得到了很好的探讨，该文章还深入探讨了替代解决方案。另一方面，支持者赞扬React的适应能力和重塑能力。

一个争议点围绕着"signals"的缺失，"signals"是Solid或Preact等库使用的一种处理响应性的机制，而React的数据流则提供了可预测性，React的支持者对此表示赞赏。

关于信号，Parcel的创建者Devon Govett在一条推文中说道：

当更新流变得不可预测时，UI作为状态函数的简洁性就会丧失。

htmx

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

它因其小文件大小和与现有服务器端框架的无缝集成而受到赞赏，因为它是"通过网络发送HTML"的趋势的一部分：向服务器请求发送部分HTML块，而不是在客户端处理JSON。

在"标记库"的同一领域，Alpine.js是一个受欢迎的解决方案（今年排名第13）。

Svelte

在第三位，Svelte的受欢迎程度不断增长。它经常被视为React的现代替代品。即将推出的Svelte 5是一个重大变革，它是"该项目历史上最受期待的发布"，引入了符文（runes）来解决处理状态响应性时的一些"痛点"。Rich Harris的这个短视频很好地解释了符文解决的问题。

今年的一个故事与Svelte有关，引发了很多争议（例如Hacker News）：Svelte团队选择使用带有JSDoc注释的JavaScript，而不是TypeScript，以避免与TypeScript相关的额外复杂性和缺点，同时仍提供类型安全的好处。

其他框架的更新

Million v3是一个轻量级库，使"React组件可以以原始JavaScript的速度运行"。 Angular 17在性能方面进行了重大改进，更新了文档，并进行了新的品牌推广（包括徽标的漂亮颜色）。 Qwik在4月份达到了v1。这是一个用于构建"可恢复"应用程序的框架，它在交付HTML时不需要任何JavaScript（最初），而HTML会立即变得交互起来。

React生态系统排行

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文档更新，全面记录了最新的API（useFormState，

，‘use server’…）。

我们还看到了Server Actions的出现，这是一个新的React核心功能，首次在Next.js 14中作为稳定版本实现，为表单提交和变更提供了无缝的RPC调用。与Remix的理念类似，Server Actions的设计考虑了渐进增强。

2024年，其他框架采用React Server Components将是令人兴奋的，特别是：

• Remix将React Server Components添加到其路线图中
• Expo引入了服务器端功能，并揭示了其支持跨平台Universal React Server Components的计划
• Redwood将全力以赴支持React Server Components
• Waku是一个支持React Server Components的新型极简React框架
• Docusaurus计划在构建时渲染静态React Server Components

我们迫切期待React 19的到来，这应该很快就会发布。

vue生态系统排行

随着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模式也在稳步发展。所有这些都为新的一年调整了更多的性能改进和社区创新。

后端/全栈排行

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

版本14专注于改进服务器操作，并引入了新的部分预览渲染模式。

通过React Server Components，开发人员可以使用新的范例构建Web应用程序，这可以极大地简化代码：直接从异步组件中获取数据，并通过将表单绑定到服务器操作来改变数据。

关于这个演示展示了如何直接从组件中进行SQL请求的讨论很多，但人们可能忽略了重点：React Server Components可以像自包含组件一样行为，可以在应用程序的任何位置放置，而无需进行任何繁琐的连接。视频很好地帮助构建由RSC可能实现的新的心智模型，展示了无缝工作的服务器和客户端组件的混合。

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

我对.astro文件的模板系统的简洁性印象深刻（非常接近JSX），以及出色的开发体验（CLI非常好用！）。

版本4引入了一个新的开发工具栏，自动i18n路由和一个新的视图过渡API来改善用户体验。

构建工具排行

Bun也是一个打包工具，所以我们将其包含在今年的“构建工具”类别中。

Vite仍然是最受欢迎的多功能打包工具，为Astro、Nuxt、Remix、SolidStart、SvelteKit等元框架提供支持。

11月发布的版本5是基于Rollup 4构建的，带来了性能改进。

Evan You宣布他正在开发Rolldown，这是一个用Rust编写的Rollup端口，将集成到Vite中。因此，Vite的未来是光明的！

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

幸运的是，该项目被分叉并以Biome的名字重新诞生。

11月，Biome赢得了Prettier挑战：创建了一个“由Rust驱动的代码格式化工具，可以通过95%以上的Prettier测试”。由于Prettier是如此的标准化，我们可以预期在2024年会有更多的人采用Biome。

说到Rust，Oxc和Rspack是这个领域的新玩家，来自字节跳动团队。Rspack提供了与Webpack的兼容性，同时提供了无与伦比的性能。自从我们进行“新星崛起”以来，这是第一次在排名中没有看到Webpack，考虑到使用它的项目数量，这有点奇怪！

移动端排行

在2023年，移动领域在统一Web和原生开发体验方面取得了重大进展。这一点可以从排名前三的项目Expo、Tamagui和Nativewind中看出，它们的目标是最大限度地重用代码，并提高Web开发人员的可访问性。

在React Native中，对更好的样式解决方案的需求明显增加，Tamagui、Nativewind和React Native Paper等项目处于领先地位。这与Web社区的情况相似，其中shadcn-ui在总体上的受欢迎程度排名第一。我怀疑这种趋势在2024年不会放缓。

在2022年，React团队的官方推荐从Create React App等样板解决方案转向了Remix和Next.js等以框架为先的解决方案。一年后，我们可以看到React Native生态系统中出现了类似的转变。像Expo、Tamagui和Ignite这样提供许多以框架为先属性的工具，在受欢迎程度上都呈上升趋势。这种转变表明了从无框架的React Native向更具默认偏好的解决方案转变，标志着移动开发范式的演变。我预测这一趋势将在2024年继续。

React Native的主导地位可以从基于该库的前十个项目中看出。然而，这个列表中存在三个基于Webview的项目，这表明人们对直接将网站部署到应用商店的兴趣仍然存在。也许2024年将是我们看到这两种方法开始融合的一年。

总体而言，对于移动开发来说，2023年是一个非常棒的一年。我预测在2024年，人们对于React Native的样式解决方案、原生渲染模式（可能使用React Server Components在原生上）、更好的服务器集成以支持基于AI的应用程序，以及一些有趣的visionOS项目将继续保持兴趣。

css in js

测试

桌面端

静态网站构建

状态管理

GraphQL

译自: risingstars.js.org/2023/en#sec…