大家好，我是前端晚間課，現(xiàn)在是2022年1月份，馬上就要過(guò)年了，在這里提前預(yù)祝大家新年快樂(lè)，過(guò)去的一年，javascript、css與往年一樣，技術(shù)框架、技術(shù)棧依舊百花齊放，身為前端開(kāi)發(fā)者，也體驗(yàn)'新的還沒(méi)學(xué)會(huì)，就已經(jīng)淘汰、更新?lián)Q代'的處境，但是呢，技術(shù)還得學(xué)，工作還得干，別給自己壓力，努力無(wú)悔便可。

關(guān)于CSS領(lǐng)域的2021年總結(jié)在前不久也發(fā)布了，但是Javascript卻延遲了，但是遲到了，不代表不會(huì)來(lái)，今天我們休息一下擺脫 JavaScript學(xué)習(xí)疲勞，來(lái)看看這篇JavaScript Rising Stars第 6 版，JavaScript領(lǐng)域的2021年度總結(jié)。

下圖比較了過(guò)去 12 個(gè)月在 GitHub 上熱門(mén)項(xiàng)目添加的?數(shù)量。分析了來(lái)自Best of JS的項(xiàng)目，從而整理出這份與Web 平臺(tái)相關(guān)的最佳項(xiàng)目的精選列表（均展示前十名）。

總體上最受歡迎的項(xiàng)目

今年最流行的項(xiàng)目是zx，這是 Google 的一個(gè)全新命令行工具，可以用 JavaScript 或 TypeScript 編寫(xiě)簡(jiǎn)單的命令行腳本。

基本上，它允許你在代碼中嵌入任何 bash 表達(dá)式（ls, cat, git... 任何東西！），并await使用JavaScript 模板文字作為結(jié)果。

它包括幾個(gè)流行包提供的實(shí)用程序：

• node-fetch使用與fetch瀏覽器中相同的 API 發(fā)出 HTTP 請(qǐng)求
• fs-extra處理文件系統(tǒng)操作
• globby匹配給定用戶友好模式的文件名

script.mjs文件

運(yùn)行

zx ./script.mjs

哇，排名第一竟然是命令行工具，不過(guò)這樣的命令行工具確實(shí)讓人眼前一亮，我趕緊去按個(gè)star。

Vite排名第二，我覺(jué)得是實(shí)至名歸，用過(guò)的人，我覺(jué)得第一感受就是快，而且用戶體驗(yàn)、使用手冊(cè)都是延續(xù)Vue文檔的一貫風(fēng)格。

Next.js、React也是名列第三第四，Next.js，是為你提供生產(chǎn)環(huán)境所需的所有功能以及最佳的開(kāi)發(fā)體驗(yàn)：包括靜態(tài)及服務(wù)器端融合渲染、 支持 TypeScript、智能化打包、 路由預(yù)取等功能 無(wú)需任何配置，據(jù)說(shuō)引入swc后，速度更是吊打babel。

第五名，Tauri是一種使用 Web 技術(shù)構(gòu)建桌面應(yīng)用程序的解決方案。

與Electron相比，它是用 Rust 編寫(xiě)的，并且不會(huì)隨每個(gè)應(yīng)用程序附帶 Node.js 運(yùn)行時(shí)。1.0版在 5 月發(fā)布了測(cè)試版。

Vue排名第十，但Angular已經(jīng)沒(méi)出現(xiàn)在十名內(nèi)了。

令我比較感興趣的是Tailwind CSS和Astro。

之前寫(xiě)過(guò)一篇關(guān)于Tailwind CSS的介紹，《一次就能看懂的Tailwind CSS介紹》，Tailwind CSS 是一個(gè)利用公用程序類（Utilize Class，下文皆稱Utilize Class）的 CSS 框架，預(yù)構(gòu)建css，本人挺好奇它未來(lái)的發(fā)展，這里排第六，說(shuō)明熱度相當(dāng)可以。

Astro沒(méi)有出現(xiàn)在上圖排名榜，但Astro是今年最引人注目的項(xiàng)目之一。Astro 是一種構(gòu)建加載速度更快的網(wǎng)站的工具，因?yàn)樗鼈儼l(fā)布的 JavaScript 更少。

這個(gè)概念接近于靜態(tài)站點(diǎn)生成 (SSG)，但主要區(qū)別在于Astro支持在頁(yè)面中使用動(dòng)態(tài)交互內(nèi)容。

可以應(yīng)用不同的策略在客戶端渲染動(dòng)態(tài)組件：

• 頁(yè)面加載時(shí)
• 如果頁(yè)面是低優(yōu)先級(jí)組件，則當(dāng)頁(yè)面空閑時(shí)（考慮跟蹤。）
• 當(dāng)組件使用瀏覽器Intersection Observer API可見(jiàn)時(shí)
• 最好的部分之一是 Astro 頁(yè)面可以使用 HTML 和使用任何框架編寫(xiě)的組件的組合構(gòu)建：React、Vue.js 或 Svelte...

沒(méi)有進(jìn)前十名的還有許多引人注目的項(xiàng)目，如swc、Deno、Remix、esbuild、Svelte...

前端框架

這里可能比較陌生的就是Svelte、Solid了，

Svelte之前也有轉(zhuǎn)發(fā)過(guò)一篇文章《Svelte 原理淺析與評(píng)測(cè)》，Svelte 是一個(gè)構(gòu)建 web 應(yīng)用程序的工具，與 React 和 Vue 等 JavaScript 框架類似，有一個(gè)關(guān)鍵的區(qū)別：Svelte 在 構(gòu)建/編譯階段 將你的應(yīng)用程序轉(zhuǎn)換為理想的 JavaScript 應(yīng)用，而不是在 運(yùn)行階段 解釋?xiě)?yīng)用程序的代碼。這里最大的變化是Svelte的崛起，它在Angular之前排名第三。

排名第五的是Solid，是React的替代工具之一。其組件采用JSX編寫(xiě)，但與React不同的是，Solid并不依賴虛擬DOM。

node.js框架

主要的 UI 框架都有自己的“元框架”來(lái)構(gòu)建現(xiàn)代和可擴(kuò)展的應(yīng)用程序，提供路由、服務(wù)器端渲染、提前靜態(tài)生成頁(yè)面、為生產(chǎn)優(yōu)化構(gòu)建等功能......

• React 擁有Next.js，該類別的獲勝者，可以被認(rèn)為是該領(lǐng)域的先驅(qū)
• Vue.js 有Nuxt，現(xiàn)在分為 Vue.js v2 和 v3 的版本
• Svelte 有SvelteKit

Remix，這個(gè)我是在2021年尾聲才了解到還有怎么一個(gè)框架的，是一個(gè)全棧 Web 框架，可讓你專注于用戶界面，并通過(guò) Web 基礎(chǔ)知識(shí)來(lái)提供快速、流暢和彈性的用戶體驗(yàn)。

除了這些元框架之外，Nest是更傳統(tǒng)的服務(wù)器端 Node.js 框架的領(lǐng)導(dǎo)者，不依賴于任何 UI 庫(kù)。

最后，Strapi是“無(wú)頭 CMS”的領(lǐng)導(dǎo)者。

構(gòu)建工具

越來(lái)越多人開(kāi)始采用原生ES模塊。Vite得到廣泛采用（其發(fā)展速度比snowpack更快），因而催生出新的工具生態(tài)系統(tǒng)（例如基于ES的現(xiàn)代測(cè)試框架Vitest）。Node.js生態(tài)圈中也開(kāi)始采用ES模塊，但難度要更大。TypeScript甚至推遲了對(duì)Node.js中ES模塊的支持。

出于性能的考慮，越來(lái)越多的前端工具采用其他語(yǔ)言進(jìn)行開(kāi)發(fā)。

Lee Robinson認(rèn)為，Rust是JavaScript基礎(chǔ)設(shè)施的未來(lái)(之前轉(zhuǎn)發(fā)這樣的一篇文章，同時(shí)也發(fā)布了一篇關(guān)于Rust的簡(jiǎn)單實(shí)踐文章，WebAssembly Rust應(yīng)用于React 組件)。Rust有著良好的性能，同時(shí)與JavaScript的互操作性較強(qiáng)。NAPI-RS可讓JavaScript和Rust進(jìn)行交互。

而Next.js則非常看好swc的發(fā)展，作為一個(gè)可擴(kuò)展的Rust編譯器，swc可將Babel插件移植到Rust上。

Rust是最受歡迎的的非JS語(yǔ)言，但它并不是唯一的語(yǔ)言。Bun采用的是Zig，而Turborepo和esbuild均采用的是Go。

在monorepo(單體倉(cāng)庫(kù)設(shè)計(jì))中廣泛采用的仍然是Lerna，之前也有對(duì)這個(gè)單體倉(cāng)庫(kù)設(shè)計(jì)介紹（《基于 lerna 實(shí)現(xiàn) Monorepo 項(xiàng)目管理》）。

Vue 生態(tài)系統(tǒng)

Vue 3 正式發(fā)布一年后，我們看到生態(tài)系統(tǒng)正在迅速發(fā)展，并帶來(lái)了許多偉大的創(chuàng)新。

像<script setup>Vue 3 核心中的新語(yǔ)法將組件創(chuàng)作體驗(yàn)提升到一個(gè)新的水平。新的VS Code 擴(kuò)展Volar為 Vue 帶來(lái)了一流的 TypeScript 支持；一個(gè)新的狀態(tài)管理器Pinia，它是基于新的Composition API 構(gòu)建的，成為 Vuex 的繼承者。

隨著Vite成為 Vue 的新默認(rèn)工具，Nuxt 3、Quasar和VitePress等元框架現(xiàn)在使用 Vite作為其默認(rèn)引擎。提供巨大的開(kāi)發(fā)人員體驗(yàn)改進(jìn)并為創(chuàng)新打開(kāi)許多新大門(mén)。

社區(qū)還為使 Vue 2 的 DX 與 Vue 3 保持一致，并使遷移過(guò)程更加順暢方面付出了很多努力。對(duì)于 Vue 開(kāi)發(fā)人員來(lái)說(shuō)，這是偉大的一年，他們的 DX 和應(yīng)用程序的性能都得到了巨大的改進(jìn)。很高興看到 2022 年即將發(fā)生的事情！

React 生態(tài)系統(tǒng)

React 18 應(yīng)該很快就會(huì)發(fā)布，但它已經(jīng)可以使用RC 版本并受益于一些開(kāi)箱即用的改進(jìn)，例如自動(dòng)批處理以減少渲染或?qū)?Suspense 的 SSR 支持。

React 18 向Suspense添加了期待已久的并發(fā)渲染器和更新，而沒(méi)有任何重大的重大更改。一些并發(fā)的功能，如startTransition將在18.0最初的版本可用，但我們將不得不等待多一點(diǎn)，以獲得服務(wù)器組件中所提到的前一版的JavaScript的新星。

React 在瀏覽器和服務(wù)端都在不斷進(jìn)步，隨著React Native 的多平臺(tái)愿景，它變得越來(lái)越無(wú)處不在。

之前也閱讀《React技術(shù)揭秘》這本小冊(cè)，把里面對(duì)React源碼的解析以流程圖方式表達(dá)出來(lái)，這種方式也讓我對(duì)React源碼有個(gè)更深的理解。畫(huà)流程圖學(xué)React17源碼 - 掘金

CSS in Javascript

測(cè)試

移動(dòng)端

桌面應(yīng)用

靜態(tài)站點(diǎn)

狀態(tài)管理

GraphQL

寄語(yǔ)

希望2022年對(duì)我們好一些，別再出一些新框架讓我們學(xué)習(xí)了，學(xué)不動(dòng)了，哈哈！

參考資料

2021 JavaScript Rising Stars