JavaScript领域的2021年度总结

---

highlight: a11y-dark

theme: cyanosis

大家好，我是前端晚间课，现在是2022年1月份，马上就要过年了，在这里提前预祝大家新年快乐，过去的一年，javascript、css与往年一样，技术框架、技术栈依旧百花齐放，身为前端开发者，也体验"新的还没学会，就已经淘汰、更新换代"的处境，但是呢，技术还得学，工作还得干，别给自己压力，努力无悔便可。

关于CSS领域的2021年总结在前不久也发布了，但是Javascript却延迟了，但是迟到了，不代表不会来，今天我们休息一下摆脱 JavaScript学习疲劳，来看看这篇JavaScript Rising Stars第 6 版，JavaScript领域的2021年度总结。

下图比较了过去 12 个月在 GitHub 上热门项目添加的⭐数量。分析了来自Best of JS的项目，从而整理出这份与Web 平台相关的最佳项目的精选列表（均展示前十名）。

总体上最受欢迎的项目

今年最流行的项目是zx，这是 Google 的一个全新命令行工具，可以用 JavaScript 或 TypeScript 编写简单的命令行脚本。

基本上，它允许你在代码中嵌入任何 bash 表达式（ls, cat, git... 任何东西！），并await使用JavaScript 模板文字作为结果。

它包括几个流行包提供的实用程序：

• node-fetch使用与fetch浏览器中相同的 API 发出 HTTP 请求
• fs-extra处理文件系统操作
• globby匹配给定用户友好模式的文件名

script.mjs文件

#!/usr/bin/env zx

await $`cat package.json | grep name`

let branch = await $`git branch --show-current`
await $`dep deploy --branch=${branch}`

await Promise.all([
  $`sleep 1; echo 1`,
  $`sleep 2; echo 2`,
  $`sleep 3; echo 3`,
])

let name = 'foo bar'
await $`mkdir /tmp/${name}`

运行

zx ./script.mjs

哇，排名第一竟然是命令行工具，不过这样的命令行工具确实让人眼前一亮，我赶紧去按个star。

Vite排名第二，我觉得是实至名归，用过的人，我觉得第一感受就是快，而且用户体验、使用手册都是延续Vue文档的一贯风格。

Next.js、React也是名列第三第四，Next.js，是为你提供生产环境所需的所有功能以及最佳的开发体验：包括静态及服务器端融合渲染、 支持 TypeScript、智能化打包、 路由预取等功能 无需任何配置，据说引入swc后，速度更是吊打babel。

第五名，Tauri是一种使用 Web 技术构建桌面应用程序的解决方案。

与Electron相比，它是用 Rust 编写的，并且不会随每个应用程序附带 Node.js 运行时。1.0版在 5 月发布了测试版。

Vue排名第十，但Angular已经没出现在十名内了。

令我比较感兴趣的是Tailwind CSS和Astro。

之前写过一篇关于Tailwind CSS的介绍，《一次就能看懂的Tailwind CSS介绍》，Tailwind CSS 是一个利用公用程序类（Utilize Class，下文皆称Utilize Class）的 CSS 框架，预构建css，本人挺好奇它未来的发展，这里排第六，说明热度相当可以。

Astro没有出现在上图排名榜，但Astro是今年最引人注目的项目之一。Astro 是一种构建加载速度更快的网站的工具，因为它们发布的 JavaScript 更少。

这个概念接近于静态站点生成 (SSG)，但主要区别在于Astro支持在页面中使用动态交互内容。

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

• 页面加载时
• 如果页面是低优先级组件，则当页面空闲时（考虑跟踪。）
• 当组件使用浏览器Intersection Observer API可见时
• 最好的部分之一是 Astro 页面可以使用 HTML 和使用任何框架编写的组件的组合构建：React、Vue.js 或 Svelte...

没有进前十名的还有许多引人注目的项目，如swc、Deno、Remix、esbuild、`
Svelte`...

前端框架

这里可能比较陌生的就是Svelte、Solid了，

Svelte之前也有转发过一篇文章《Svelte 原理浅析与评测》，Svelte 是一个构建 web 应用程序的工具，与 React 和 Vue 等 JavaScript 框架类似，有一个关键的区别：Svelte 在 构建/编译阶段 将你的应用程序转换为理想的 JavaScript 应用，而不是在 运行阶段 解释应用程序的代码。这里最大的变化是Svelte的崛起，它在Angular之前排名第三。

排名第五的是Solid，是React的替代工具之一。其组件采用JSX编写，但与React不同的是，Solid并不依赖虚拟DOM。

node.js框架

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

• React 拥有Next.js，该类别的获胜者，可以被认为是该领域的先驱
• Vue.js 有Nuxt，现在分为 Vue.js v2 和 v3 的版本
• Svelte 有SvelteKit

Remix，这个我是在2021年尾声才了解到还有怎么一个框架的，是一个全栈 Web 框架，可让你专注于用户界面，并通过 Web 基础知识来提供快速、流畅和弹性的用户体验。

除了这些元框架之外，Nest是更传统的服务器端 Node.js 框架的领导者，不依赖于任何 UI 库。

最后，Strapi是“无头 CMS”的领导者。

构建工具

越来越多人开始采用原生ES模块。Vite得到广泛采用（其发展速度比snowpack更快），因而催生出新的工具生态系统（例如基于ES的现代测试框架Vitest）。Node.js生态圈中也开始采用ES模块，但难度要更大。TypeScript甚至推迟了对Node.js中ES模块的支持。

出于性能的考虑，越来越多的前端工具采用其他语言进行开发。

Lee Robinson认为，Rust是JavaScript基础设施的未来(之前转发这样的一篇文章，同时也发布了一篇关于Rust的简单实践文章，WebAssembly+Rust应用于React 组件)。Rust有着良好的性能，同时与JavaScript的互操作性较强。NAPI-RS可让JavaScript和Rust进行交互。

而Next.js则非常看好swc的发展，作为一个可扩展的Rust编译器，swc可将Babel插件移植到Rust上。

Rust是最受欢迎的的非JS语言，但它并不是唯一的语言。Bun采用的是Zig，而Turborepo和esbuild均采用的是Go。

在monorepo(单体仓库设计)中广泛采用的仍然是Lerna，之前也有对这个单体仓库设计介绍（《基于 lerna 实现 Monorepo 项目管理》）。

Vue 生态系统

Vue 3 正式发布一年后，我们看到生态系统正在迅速发展，并带来了许多伟大的创新。

像<script setup>Vue 3 核心中的新语法将组件创作体验提升到一个新的水平。新的 VS Code 扩展Volar为 Vue 带来了一流的 TypeScript 支持；一个新的状态管理器Pinia，它是基于新的 Composition API 构建的，成为 Vuex 的继承者。

随着Vite成为 Vue 的新默认工具，Nuxt 3、Quasar和VitePress等元框架现在使用 Vite 作为其默认引擎。提供巨大的开发人员体验改进并为创新打开许多新大门。

社区还为使 Vue 2 的 DX 与 Vue 3 保持一致，并使迁移过程更加顺畅方面付出了很多努力。对于 Vue 开发人员来说，这是伟大的一年，他们的 DX 和应用程序的性能都得到了巨大的改进。很高兴看到 2022 年即将发生的事情！

React 生态系统

React 18 应该很快就会发布，但它已经可以使用RC 版本并受益于一些开箱即用的改进，例如自动批处理以减少渲染或对 Suspense 的 SSR 支持。

React 18 向Suspense添加了期待已久的并发渲染器和更新，而没有任何重大的重大更改。一些并发的功能，如startTransition将在18.0最初的版本可用，但我们将不得不等待多一点，以获得服务器组件中所提到的前一版的JavaScript的新星。

React 在浏览器和服务端都在不断进步，随着React Native 的多平台愿景，它变得越来越无处不在。

之前也阅读《React技术揭秘》这本小册，把里面对React源码的解析以流程图方式表达出来，这种方式也让我对React源码有个更深的理解。《画流程图学React17源码》

CSS in Javascript

测试

移动端

桌面应用

静态站点

状态管理

GraphQL

寄语

希望2022年对我们好一些，别再出一些新框架让我们学习了，学不动了，哈哈！

参考资料

2021 JavaScript Rising Stars