共计 3676 个字符，预计需要花费 10 分钟才能阅读完成。
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
