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 zxawait $`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