画风一剑

盘点2021年最值得关注的前端项目

1/17/2022

原文链接:https://risingstars.js.org/2021/en (opens new window)

欢迎来到 JavaScript Rising Stars 第6版，这是我们对Javascript领域的年度总结。希望你不要错过2021年有关于Javascript的年度盘点。我们将会谈论到元框架以及时尚流行的前端技术。

但是首先，今年我们有了一个新的“冠军”，这是没有人预料到的，它是一个命令行工具！ 下面的图表比较了过去12个月在GitHub上添加的star数。我们分析了来自Best of JS的项目，这是一份精心策划的与web平台相关的最佳项目列表。

# 本年度最受欢迎项目

# 前三名

今年最流行的项目是zx (opens new window)，这是谷歌开发的一个全新工具，可以用JavaScript或TypeScript编写简单的命令行脚本。

# google zx

stars: +24.3k

基本上，它可以让你嵌入任何bash表达式(ls, cat, git…任何!)，并使用JavaScript[模板字符串](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Template_literals)等待结果。它包括由几个流行的包提供的实用程序:

其次，Vite (opens new window)是一个构建工具，它使用esbuild (opens new window)编译器来提供卓越的性能。一开始它链接到Vue.js社区，但现在它已经设置了主要的UI框架:React, Svelte (opens new window), Lit (opens new window)。

再次,Next.js (opens new window)保持了它在React世界中“元框架”的领先地位。

# Tauri

第五名，Tauri (opens new window)是一个使用web技术构建桌面应用程序的解决方案。与Electron相比，它是用Rust编写的，而且它不会在每个应用程序中都提供Node.js运行时。1.0版在5月发布了测试版。

# Special Pick

虽然没有进入前10名，但Astro (opens new window)是今年最值得关注的项目之一。Astro是一个构建Web加载速度更快的工具，因为它提供了更少的JavaScript。

这个概念接近于静态网站生成(SSG)，但关键的区别是Astro允许你在页面中包含动态的交互性片段，称为“孤岛”。

在客户端渲染动态组件可以采用不同的策略:

最好的一点是Astro页面可以用HTML和任何框架编写的组件的组合来构建:React, Vue.js或Svelte…

# 前端框架

# React

Tauri

自从我们运行JavaScript Rising Stars以来，React第一次成为最受欢迎的UI框架，但如果我们考虑到Vue.js被分成两个库(版本2和版本3)，Vue.js实际上是领先者。

# Svelte

Tauri

最大的变化是Svelte的崛起，它排在了Angular之前，位居第三。

越来越多的工具或组件在目标框架中包含了Svelte(例如，我们提到了Vite)。

今年的头条新闻之一是，Svelte的创造者Rich Harris加入了Vercel的Next.js (opens new window)团队。

像Next.js一样，Svelte也有自己的元框架来构建高性能应用:SvelteKit (opens new window)。

# Solid

Tauri

第五，Solid是React的有趣替代品。组件是用JSX编写的，但它不像React那样依赖于Virtual DOM。

它启发了Mitosis (opens new window)，一个可以针对任何框架编写和编译组件的工具:React、Vue.js、Angular、Svelte……

# node.js 框架

# Next.js && Nuxt && SvelteKit

主要的UI框架都有自己的“元框架”来构建现代的、可伸缩的应用程序，提供了诸如路由、服务器端渲染、页面的静态生成、为生产优化构建等功能。

# Remix

Remix (opens new window)是一个构建React应用程序的全栈框架，是这一领域的新成员。这是今年最大的新闻之一。它是由React Router (opens new window)的作者创建的，直到10月份才对付费的支持者开放。

自从这个项目被公开以来，它获得了很多关注(以及300万美元的种子资金 (opens new window)，这也很有帮助!)它的座右铭很明确:“Web基础，现代用户体验”，因为它的api尽可能地遵循Web标准(HTTP响应，表单提交……)。

下面是两个让我大吃一惊的例子:

要处理表单提交，你只需要做…正常的表单提交。这似乎是显而易见的，但开发人员已经习惯于编写event.preventDefault()来避免表单提交。最好的部分是，它允许表单工作，即使JavaScript被禁用!Remix如何挑战我们认为理所当然的行为是非常有趣的，它将旧的原则与专注于用户和开发者体验的新方法“重新组合”。

此外，它还以一种非常智能的方式处理嵌套路由，能够以一种高效的方式加载给定页面上所有组件所需的数据，而不是生成一个瀑布式的HTTP调用，这通常会导致屏幕上出现许多旋转指示器。

# Nest

除了这些元框架，其次，Nest (opens new window)是更传统的服务器端Node.js框架的领导者，它不绑定任何UI库。

# Strapi

最后，Strapi (opens new window)是“无头CMS”的领导者，这些应用程序提供丰富的仪表盘，让用户管理数据，以及一个现代API，让开发人员可以从数据构建任何东西。最新版本(4)提供了一个建立在React组件库之上的设计系统。

# 构建工具

# 特邀作者：Sébastien Lorber (opens new window)

Sébastien 是 React 的早期布道者，在 Docusaurus (opens new window) 上与 Facebook 开源合作。

他运营着一份关于 React 和 React Native 的周报--This Week in React (opens new window)

在 2021 年，早已存在的趋势更进一步。

对原生 ES 模块的接纳仍在继续。Vite 已经被广泛采用（比 snowpack 更快），引领了一个新的工具生态系统（如 Vitest (opens new window)，一个基于 ES 的现代测试框架）。ES 模块也在 Node.js 生态系统中逐渐被接纳，但这并不容易。TypeScript 甚至在Node.js中推迟了对ES模块的支持 (opens new window)。

出于对性能的考虑，越来越多的前端工具开始用其他语言构建的（见awesome-js-tooling-not-in-js (opens new window)）。

Lee Robinson 写道，Rust 是 JavaScript 基础设施的未来 (opens new window)。Rust 特别有趣，因为它既有很好的性能，又与 JavaScript 有互操作性。NAPI-RS (opens new window) 允许 JavaScript 和 Rust 在没有任何序列化成本的情况下相互通信。Next.js 正押注 SWC (opens new window)，这是一个可扩展的 Rust 编译器，允许他们将最流行的 Babel 插件移植到 Rust。

Parcel (opens new window)2 已经发布了一个新的 Rust 编译器 (opens new window)。Rome (opens new window) 工具链也正在用 Rust 重写 (opens new window)，但其创始人之一 Jamie Kyle 刚悄无声息地离开了公司 (opens new window)。

Rust 显然是领先的非 JS 语言，但它并不是唯一提供出色性能的语言。Bun (opens new window) 是用 Zig 写的。Turborepo (opens new window) 和 esbuild (opens new window) 是用 Go 写的。值得注意的是，Evan Wallace 离开了Figma (opens new window)：这可能让他有更多的时间来研究 esbuild。

在 monorepo 领域，Lerna (opens new window) 仍然被广泛使用，但维护得不是很好。Nx (opens new window)，一个有助于大幅减少构建时间的单引擎工具，一直在快速增长。其较新的竞争者 Turborepo (opens new window) 在被 Vercel 收购 (opens new window)后受益于巨大的营销。

# Vue 生态

# 特邀作者：Anthony Fu (opens new window)

Vue.js、Vite 以及 Nuxt 团队核心成员，VueUse (opens new window) 与 Slidev (opens new window)作者。

在 Vue 3 正式发布一年后，我们看到这个生态系统正伴随着许多伟大的创新迅速发展。

新的语法，如 Vue 3 核心中的setup，将组件创作的体验提升到一个新的水平。新的 VS Code 扩展 Volar (opens new window) 为 Vue 带来了一流的 TypeScript 支持；以 Composition API 为基础建立的新状态管理器 Pinia (opens new window) 成为 Vuex 的继承者。

随着 Vite 成为 Vue 新的默认工具，Nuxt 3、Quasar (opens new window) 和 VitePress (opens new window) 等元框架现在都使用 Vite 作为其默认引擎。让开发者体验有了巨大的改进，并为创新打开了许多新的大门。

社区还在调整 Vue2 到 Vue3 的开发者体验上付出了许多努力，使迁移过程更加顺利。对于 Vue 开发者来说，这是伟大的一年，他们的应用在开发者体验和性能方面都得到了巨大的改善。迫不及待想看到 2022 年即将发生什么!

# React 生态

# 特邀作者：Manuel Vila (opens new window)

Manuel 是一位独立的 JS/TS 工程师和开源贡献者。他创建了 Layr (opens new window) 和 CodebaseShow (opens new window)。

React 18 很快就会发布，现在已经可以使用 RC 版 (opens new window)，并从一些开箱即用的改进中获益，比如自动批处理以减少渲染 (opens new window)或 SSR 对 Suspense 的支持 (opens new window)。

React 18 增加了期待已久的并发渲染器和对 Suspense (opens new window) 的更新，但没有任何重大的突破性变化。一些并发功能如 startTransition (opens new window) 将在 18.0 的初始版本中提供，但我们还得再等等，才能得到 JavaScript Rising Stars 的前一版 (opens new window)中提到的服务端组件 (opens new window)。

React 继续发力于浏览器和服务端，而且在 React Native 的多平台愿景下 (opens new window)，它正变得无处不在。

# CSS-in-JS

# 测试相关

# 移动端

# 桌面端

# 静态站点

# 状态管理

# GraphQL

# 结论

为了构建现代网站和应用程序，我们似乎已经进入了元框架时代:Next.js、Nuxt、SvelteKit……还有前途无量的新人Remix (opens new window)。

JavaScript社区的知名成员加入了技术公司，致力于这些解决方案:

Kent C. Dodds加入了Remix团队，并高度评价了它是如何让他“建立令人惊叹的用户体验，同时仍然对代码感到满意”。

Vercel似乎雇佣了其他所有人:Rich Harris, Svelte (opens new window)的创造者，来自React核心团队的Sebastian Markbåge, Jared Palmer和他现在的开源解决方案来管理monorepos (Turborepo (opens new window))……看起来像一支梦之队!

关于工具，对速度的需求导致了转向Rust和Go等语言，而不是JavaScript。

Lee Robinson发表了一个强有力的声明:Rust是JavaScript基础设施的未来 (opens new window)，我们多次提到Rust语言的崛起:

Tauri (opens new window)是内置Rust的.

这个名为Rome (opens new window)的项目大大促进了JavaScript转向Rust (opens new window)

js最新版本(12)包括swc (opens new window)编译器，用Rust编写

SWC也被Deno (opens new window)使用，服务器端运行时是2020年的获胜者。我们可以看出Deno还存在 (opens new window)!它不断得到增强，并且公开了Deno Deploy (opens new window):它是边缘计算以及serveless的解决方案之一。

谈到“无服务器架构”(Serverless functions)，就不得不提到2021年的另外一个重要主题--边缘计算。我们有解决方案，如Vercel Edge Functions (opens new window), CloudFlare Workers (opens new window)或Netlify Edge (opens new window)运行后端代码接近用户。像Next.js或Remix这样的元框架利用了边缘计算，使得后端代码继承进入 React 项目中变得轻而易举。

我们会在2022年进入JavaScript全栈应用的黄金时代吗?

CSS国际化