欢迎来到第七期 JavaScript Rising Stars!

像每年一样,我们尝试对过去 12 个月里 JavaScript 生态中的趋势性项目做一个总结。

今年的冠军是一个带有微笑标志的美味面包,用微笑开启新的一年是不错的开始!


下列图表对比了各个项目在 GitHub 上于过去 12 个月新增的 star 数量。分析的数据来源为 Best of JS 网站 ,一个 web 领域优秀项目的精选网站。通过点击项目,可以查看更多信息。

目录

  1. 最受欢迎项目
    BunTauriReactNext.jsVitetRPCAstroVS CodeTabbyPlaywright
  2. 前端框架
    ReactQwikSolidSvelteVue.js 2
  3. React 生态圈
    Next.jstRPCMantineExcalidrawZustand
  4. Vue 生态圈
    SlidevNuxt 3Vue Element AdminAutoAnimateHeadless UI
  5. 后端/全栈
    Next.jstRPCAstrocreate-t3-appRemix
  6. 构建工具
    ViteTurboreposwcNxRome
  7. 移动开发
    React NativeExpoReact Native SkiaIonicQuasar
  8. CSS in JavaScript
    UnoCSSvanilla-extractStyled ComponentsStitchesEmotion
  9. 测试框架
    PlaywrightStorybookCypressPuppeteerVitest
  10. 桌面开发
    TauriElectronNativefierNeutralinoelectron-builder
  11. 静态网站生成器
    Next.jsAstroDocusaurusNuxt 3Nextra
  12. 状态管理
    ZustandPiniaJotaiXStateRecoil
  13. GraphQL
    TanStack QueryDirectusRedwoodHasura GraphQL EngineGatsby
  14. 总结

最受欢迎项目

1
Bun

Bun

Incredibly fast JavaScript runtime, bundler, transpiler and package manager – all in one.
+36.6k☆

2022 趋势

80
40
116
104
99
6.9k
21.7k
3.7k
1.3k
1.2k
697
716
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月

GitHub 数据

创建于
2021-04
star 总数
37.4k☆

链接

GitHub
oven-sh/bun
项目主页
bun.sh
Best of JS
bestofjs.org/projects/bun
2
Tauri

Tauri

Build smaller, faster, and more secure desktop applications with a web frontend.
+30.5k☆
3
React

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
+19.8k☆
4
Next.js

Next.js

The React Framework
+19.4k☆
5
Vite

Vite

Next generation frontend tooling. It's fast!
+15.5k☆
6
tRPC

tRPC

Move Fast and Break Nothing. End-to-end typesafe APIs made easy.
+15.2k☆
7
Astro

Astro

A website build tool for the modern web — powerful developer experience meets lightweight output.
+15.0k☆
8
VS Code

VS Code

Visual Studio Code
+15.0k☆
9
Tabby

Tabby

A terminal for a more modern age
+14.4k☆
10
Playwright

Playwright

A framework for Web Testing and Automation. It allows testing Chromium, Firefox and WebKit with a single API.
+14.3k☆

年度总冠军: Bun 🏆

今年最流行的项目是 Bun:一个专注性能与开发者体验的全新 JavaScript 运行时。它的流行程度伴随着在今年夏天发布的第一个 Beta 版而爆炸性增长:仅一个月内,就在 GitHub 上获得了超过两万颗星星。自从我们在 Best of JS 开始统计项目以来,我们还从未见过这样的爆炸。

那么,是什么让 Bun 与众不同呢?与两年前的总冠军 Deno 一样,它也为 TypeScript 提供了一流的支持。

但 Bun 不仅仅是一个运行时。它也是:

  • 一个包管理器 (类似 Yarn、 NPM、 PNPM)
  • 一个构建工具 (类似 Webpack、 ESBuild、 Parcel)
  • 一个测试运行器
  • ... 以及很多其他东西!

所以 Bun 可以通过读取你的 package.json 来安装依赖项。Bun 还可以运行你的脚本。不管它做什么都比其他工具更快。

Bun 在 JavaScript 生态系统的许多方面都有新的尝试,其中的重点是性能。

它优先支持标准的 Web API,如 Fetch。它也支持许多 Node.js APIs,使其能与大多数 NPM 包兼容。

它可能还没到 “能用于生产” 的阶段(缺乏 Windows 支持),但它依旧是一个非常有前途的工具。与 Deno 相比,它的生态系统相当新,但它已经有一个名为 Elysia 的网络框架,其声称是最快的 HTTP 框架。

Bun 最不可思议的是,它的创造者 Jarred Sumner 用的是一种名为 Zig 的低级语言从零开始实现了所有这些功能。

更多细节,请阅读《彻底整顿 JavaScript 生态系统》一文。

Tauri

2021 年排名第五的 Tauri 在 2022 年更受欢迎了,新增了 3 万颗星星。 这是一个由 Rust 编写的项目,利用 Web 技术创建跨平台的桌面应用程序。

它在 6 月份发布了 1.0 版

它创建之初就考虑到了安全和性能问题。与 Electron 相比,它占用的空间很小,因为开发者必须指定应用程序所需的 API 和能力。

React 与 Next.js

在第三的 React 和第四的 Next.js 得到了类似的成绩,新增近两万颗星星。

10月发布的 Next.js 13,利用了 2020 年 React 17 推出的 React Server 组件

React 的维护者之一 Andrew Clark 在这篇推文中对它们在未来的发展做了大胆的陈述。

Server 组件是 React 的未来,我们的目标是将这一架构推广到整个 React 生态系统,不管是什么框架。

Vite

第五名的 Vite 是最流行的构建工具,用于构建基于 Web 技术的应用程序,同时提供令人惊喜的开发者体验。

它在今年有两个主要版本( 7 月的 v312 月的 v4)。

它为越来越多的项目提供支持,包括框架 SvelteKitQwik 以及测试运行器 Vitest

前端框架

1
React

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
+19.8k☆
2
Qwik

Qwik

The HTML-first framework. Instant apps of any size with ~ 1kb JS
+12.8k☆
3
Solid

Solid

A declarative, efficient, and flexible JavaScript library for building user interfaces.
+11.1k☆
4
Svelte

Svelte

Cybernetically enhanced web apps
+10.0k☆
5
Vue.js 2

Vue.js 2

A progressive, incrementally-adoptable framework for building UI on the web
+9.7k☆

在 2022 年,React 仍然是冠军,但如果考虑到 Vue.js 的星星在 v2 和 v3 版本的仓库中被分割,那么 Vue.js 的受欢迎程度也很接近了。

主要的变化是 Qwik 跃升至第 2 位。Qwik 与 React 类似,它也使用 JSX 编写模板组件,但主要的区别是专注于在浏览器中执行最少的 JavaScript。

它是 “零基线 JavaScript” 框架趋势的一部分。网站和应用程序经常被繁重的 JavaScript 资产所臃肿,影响了浏览器的性能:即使页面在服务端渲染,用户也必须等待 JavaScript 被加载、解析和执行,才能与页面互动。

Qwik 没有依靠 hydration 为服务端生成的页面增加互动性,而是使用一种叫做 resumability 的技术来提供即时互动的 HTML。它的原理在 HTML 中序列化应用程序的状态。

该项目由 Miško Hevery 领导,他是 AngularJS 的创建者,AngularJS 的口号是 “为 Web 应用增强 HTML”,而Qwik是 "HTML 优先框架"...不知为何,它们在良好的古老 HTML 之上构建应用的意图是一样的。

React 生态圈

1
Next.js

Next.js

The React Framework
+19.4k☆
2
tRPC

tRPC

Move Fast and Break Nothing. End-to-end typesafe APIs made easy.
+15.2k☆
3
Mantine

Mantine

React components library with native dark theme support
+12.8k☆
4
Excalidraw

Excalidraw

Virtual whiteboard for sketching hand-drawn like diagrams
+12.8k☆
5
Zustand

Zustand

Bear necessities for state management in React
+12.5k☆

特邀作者:Lee Robinson

Lee Robinson 是一名开发者、作家和创作者,在 Vercel 担任开发者体验副总裁。

Guest Writer leerob

2022 年,React 变得更加有主见。

React 仍然是一个可以用在任何网页上的库,但它也演变成了一个框架可以遵循的架构,以创建可互动、有弹性和高性能的前端模式。

React 18 版本(3 月)包括了并发的功能和 API,主要是为框架提供架构模式。考虑到 React Server 组件,旨在与这些新的架构模式一起实现。一些约定现在已经在 React 框架之间实现了标准化(例如,使用客户端),而其他的约定正在测试期中孵化(例如,Server 组件中的 async/await)。

在 2023 年,我们将继续看到使用 React 新基元的创新,但也会看到在更大的 React 生态系统中的创新。用于改进类型安全的库以及 UI 组件的增长将继续上升。

Vue 生态圈

1
Slidev

Slidev

Presentation Slides for Developers
+7.2k☆
2
Nuxt 3

Nuxt 3

The Intuitive Web Framework, based on Vue 3.
+7.0k☆
3
Vue Element Admin

Vue Element Admin

A magical vue admin
+6.8k☆
4
AutoAnimate

AutoAnimate

A zero-config, drop-in animation utility that adds smooth transitions to your web app. You can use it with React, Vue, or any other JavaScript application.
+6.4k☆
5
Headless UI

Headless UI

Completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS.
+5.9k☆

特邀作者:Anthony Fu

vuejs、ViteNuxt 的核心团队成员。VueUseSlidev 的作者。

Guest Writer antfu

使得向 Vue 3 的过渡更加顺畅。<script setup> 变得稳定并普遍可用,处于实验阶段的全新 "Reactivity Transform" 即将到来,它将进一步增强开发者体验。团队还在研究一个新的渲染策略,叫做 "Vapor mode",灵感来自 Solid.js,它可以使 Vue 在关键部分的性能更强。

Nuxt 3Vuetify 3 的稳定发布表明,Vue 的生态系统已经足够成熟。Vite 在这一年里成倍增长,我们看到了 Vue 用户的大量采用,从 create-vue、Nuxt、QuasarAstro 和许多新框架。借助 Vite 的力量,Vue 用户还通过 VitestHistoire 获得了更好的测试/开发体验。我们也看到了 Vue 的创造性用法,比如用 vue-termui 渲染一个命令行界面。

对于开发者体验的改进来说,这是多么好的一年啊! 希望社区能够发现这些能够改善他们的工作流程的工具,并期待着接下来的发展!

后端/全栈

1
Next.js

Next.js

The React Framework
+19.4k☆
2
tRPC

tRPC

Move Fast and Break Nothing. End-to-end typesafe APIs made easy.
+15.2k☆
3
Astro

Astro

A website build tool for the modern web — powerful developer experience meets lightweight output.
+15.0k☆
4
create-t3-app

create-t3-app

The best way to start a full-stack, typesafe Next.js app
+12.4k☆
5
Remix

Remix

Build Better Websites. Create modern, resilient user experiences with web fundamentals.
+11.4k☆

前端和后端框架之间的界限有点模糊,因为与 SPA 方式相比,现在有一种明显的趋势是在服务端做更多的事情(包括渲染和路由),而后端只负责API。所以本节包括全栈框架、元框架和后端框架。

Next.js

与去年一样,Next.js 在排名中领先,其第 13 版带来了较大的功能,包括 React Server 组件以及新文件系统结构,使用 app 文件夹让开发者将与他们的功能相关的代码都放在一起,并以强大的方式处理嵌套路由。

tRPC

最大的变化是 tRPC 的崛起,位居第二。 抛开 REST 与 GraphQL 不谈:还有为 tRPC 提供动力的 JSON RPC 2.0协议。 它的特点是可以从客户端导入服务器中定义的类型,以提供 “端到端类型安全”。

值得一提的是 t3-stack 项目,它将 tRPC、Next.js 和 Tailwind CSS 结合在了一个流行的模板中(位于总排名第16)。

Astro

在第三的 Astro 在2021年作为一个静态网站生成器崛起,并使部分 hydration 的概念流行起来。

Astro 团队对创造流畅的开发者体验的一丝不苟,在 Astro 1.0 的发布中得到强调。

新的 SSR 支持与任何前端工具(如 React 和 SCSS)的“烘烤”整合,使 web 应用开发感觉太干脆了

Remix

第四,Remix 保持快速增长。它于 2021 年开源,仅仅一年后就被 Shopify 收购

在博文 The Web Next Transition 中,Kent C. Dodds 很好地解释了 Remix 与众不同的模式。

Remix 不依赖于静态生成的页面,而是利用分布式计算和本地浏览器功能,在浏览器中提供出色的性能和惊人的开发者体验。

构建工具

1
Vite

Vite

Next generation frontend tooling. It's fast!
+15.5k☆
2
Turborepo

Turborepo

Incremental bundler and build system optimized for JavaScript and TypeScript, written in Rust – including Turbopack and Turborepo.
+13.9k☆
3
swc

swc

A super-fast compiler written in rust
+6.4k☆
4
Nx

Nx

Smart, Fast and Extensible Build System
+6.0k☆
5
Rome

Rome

Unified developer tools for JavaScript, TypeScript, and the web
+5.1k☆

特邀作者:Sébastien Lorber

Sébastien 是 React 的早期用户,在 Docusaurus 上与 Facebook Open-Source 合作。

他经营着一份关于 React 和 React Native 的周报:This Week in React

Guest Writer slorber

今年,Vite 继续保持其发展势头,成为最流行的前端工具之一。其先驱 Snowpack 已不再维护,并推荐使用 Vite。它的发展并不限于 Vue 生态系统:Vite 也被用于SvelteKitStorybookVitest,甚至作为Create-React-App的现代替代品。

我们也看到了 NxTurborepo 等支持 monorepo 的构建工具的崛起。Nwrl(Nx 背后的公司)已经接管了 Lerna 的维护,并发布了 Lerna 6,它默认启用了 Nx 的优化。

尽管 Babel 仍然很流行,但 swcesbuild 已被许多项目和元框架广泛采用。这些新的工具可以大大提升构建和转译的性能。swc 是一个更加模块化的选择,因为它提供了一个插件系统

Vercel 发布了 Turbopack(alpha),这是一个由 Rust 驱动的非常快的全新构建工具,Tobias Koppers(Webpack 的原始创造者)正在研究它。

Rome 工具链已经发布了它的第一个稳定版本,包含一个 linter 和一个具有有趣属性的 formatter。不过开发者采用率很低,但今年可能会增加。

Rust 中的许多前端工具在今年应该都造就了不少新闻:

移动开发

1
React Native

React Native

A framework for building native applications using React
+6.5k☆
2
Expo

Expo

An open-source platform for making universal native apps with React. Expo runs on Android, iOS, and the web.
+2.9k☆
3
React Native Skia

React Native Skia

High-performance React Native Graphics using Skia
+2.8k☆
4
Ionic

Ionic

A powerful cross-platform UI toolkit for building native-quality iOS, Android, and Progressive Web Apps with HTML, CSS, and JavaScript.
+2.6k☆
5
Quasar

Quasar

Responsive Single Page Apps, Server-side Render Apps, Progressive Web Apps, Hybrid Mobile Apps (that look native!) & Electron Apps, all using the same codebase.
+2.5k☆
Loading
Loading
Loading
Loading
Loading
Loading

总结

2022年以混乱开局,两个非常受欢迎的软件包被其创建者故意破坏:Faker.js 和 colors.js

Lerna 这个流行的 mono-repos 工具被宣布为无人维护,巨大生态系统的脆弱性再次被证明... 直到 Nx 背后的公司 Nrwl 宣布接手 Lerna 的管理权。

JavaScript 正在吞噬世界,你可能听说过 2009 年的这个预言:

任何可以用 JavaScript 编写的应用程序,最终都会用 JavaScript 编写。

...在 13年后的今天,我们可以添加上 “或用 TypeScript 编写” 这样一句话,因为 TypeScript 正在成为编写 JavaScript 的事实标准(DenoBun 的一流支持,Next.js 的默认设置,Vite 的开箱支持...)。

JavaScript 在代码库和工具中的地位伴始终随着一些问题,对开发者和终端用户来说都是如此:

  • 在大型代码库中,构建时间失去控制
  • JavaScript 的平均大小不断增加,导致性能下降

在 2022 年,我们看到了在堆栈的不同层次解决这两类问题的巨大创新。

工具的改进与这些解决方案有关:

  • Bun,今年的冠军采取了激烈的方法来加快安装和构建时间
  • Rome 现在是一个 linter 和一个 formatter,旨在成为管理用 JS/TS 编写的应用程序的唯一工具。
  • 构建工具 Vite

在浏览器的性能方面,不同的模式百家争鸣:

  • 零基线 JavaScript 框架,几乎不向浏览器提供任何 JS(Qwik 正在引领这一潮流)
  • 部分 hydration,为静态页面提供交互性的岛屿(Astro)。
  • React Server 组件(由 Next.js 13和 Gatsby 实现),将更多的工作委托给服务器端。
  • Remix 实现的逐步增强的单页应用程序架构在不影响任何动态行为的情况下,在浏览器中同时提供了很好的开发体验和性能

由于从静态 “页面” 到完全动态的 “应用程序” 的范围很大,所以没有简单方案能全部解决这些问题。

JavaScript 环境曾经非常分散:一边是多种浏览器,另一边是拥有自己的 CommonJS 模块系统和自己的 API 的 Node.js。

随着边缘计算的兴起,现在有一个明显的趋势,就是到处使用相同的标准化 API 子集(fetch、HTTP 请求和响应...)。

我们的特邀作家 Lee Robinson 在《为什么我对 JavaScript 的未来持乐观态度》一文中对这种趋势做了很好的总结。

我们对他的结论也持乐观态度!

作为一个 web 开发者,这是一个多么不可思议的时代。

Chinese (simplified) version

KimYang

Web Developer

Authors

Available Translations

English

Español

日本語