歡迎來到 JavaScript Rising Stars 第6版，這是我們對(duì)Javascript領(lǐng)域的年度總結(jié)。希望你不要錯(cuò)過2021年有關(guān)于Javascript的年度盤點(diǎn)。我們將會(huì)談?wù)摰皆蚣芤约皶r(shí)尚流行的前端技術(shù)。

但是首先，今年我們有了一個(gè)新的“冠軍”，這是沒有人預(yù)料到的，它是一個(gè)命令行工具！ 下面的圖表比較了過去12個(gè)月在GitHub上新增的star數(shù)。分析的數(shù)據(jù)來源為Best of JS網(wǎng)站，這是一份精心策劃的與web平臺(tái)相關(guān)的最佳項(xiàng)目列表。

Top20

前三甲

今年最流行的項(xiàng)目是 zx [1] ，這是谷歌推出的一個(gè)全新工具，可以用JavaScript或TypeScript編寫簡單的命令行腳本。

google zx

stars: +24.3k

基本上，通過 使用 a wait 操作符與 JavaScript 模板字符串 ,它可以讓你嵌入任何bash表達(dá)式(ls, cat, git…任何!)。它包括由幾個(gè)流行的包提供的實(shí)用程序:

• node-fetch [2] 在瀏覽器中使用相同的API進(jìn)行HTTP請(qǐng)求
• Fs-extra [3] 用于處理文件系統(tǒng)操作
• globby [4] 匹配給定用戶友好模式的文件名

其次， Vite [5] 是一個(gè)構(gòu)建工具，它使用 esbuild [6] 編譯器來提供卓越的性能。一開始它鏈接到Vue.js社區(qū)，但現(xiàn)在它已經(jīng)可以支持前端業(yè)內(nèi)主流的UI框架如:React, Svelte [7] ,  Lit [8] 。

再次, Next.js [9] 保持了它在React世界中“元框架”的領(lǐng)先地位。

Tauri

第五名， Tauri [10] 是一個(gè)使用web技術(shù)構(gòu)建桌面應(yīng)用程序的解決方案。與Electron相比，它是用Rust編寫的，而且它不會(huì)在每個(gè)應(yīng)用程序中都搭載Node.js運(yùn)行時(shí)。1.0版在5月發(fā)布了測試版。

特選

雖然沒有進(jìn)入前10名，但 Astro [11] 是今年最值得關(guān)注的項(xiàng)目之一。Astro是一個(gè)構(gòu)建Web加載速度更快的工具，因?yàn)樗峁┝烁俚腏avaScript。

這個(gè)概念接近于靜態(tài)網(wǎng)站生成(SSG)，但關(guān)鍵的區(qū)別是Astro允許你在頁面中引入被 稱為“孤島” 的動(dòng)態(tài)交互性片段。

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

• 當(dāng)頁面加載時(shí)
• 當(dāng)頁面空閑時(shí)，如果它是一個(gè)低優(yōu)先級(jí)組件(考慮跟蹤)。
• 當(dāng)組件使用瀏覽器的 Intersection Observer API [12] 可見時(shí)

最好的一點(diǎn)是Astro頁面可以用HTML和任何框架編寫的組件的組合來構(gòu)建:React, Vue.js或Svelte…

前端框架

React

自從我們運(yùn)行JavaScript Rising Stars以來，React第一次成為最受歡迎的UI框架，但如果我們考慮到Vue.js被分成兩個(gè)庫(版本2和版本3)，Vue.js實(shí)際上是領(lǐng)先者。

Svelte

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

越來越多的工具或組件都將 Svelte 納入在目標(biāo)框架中(例如，我們提到了Vite)。

今年的頭條新聞之一是，Svelte的創(chuàng)造者Rich Harris加入了 Next.js [13] 背后的Vercel的團(tuán)隊(duì)。

像Next.js一樣，Svelte也有自己的元框架來構(gòu)建高性能應(yīng)用: SvelteKit [14] 。

Solid

第五，Solid是React的有趣替代品。組件是用JSX編寫的，但它不像React那樣依賴于Virtual DOM。

它啟發(fā)了 Mitosis [15] ，一個(gè)可以針對(duì)任何框架編寫和編譯組件的工具:React、Vue.js、Angular、Svelte……

node.js 框架

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

• React的Next.js是這個(gè)類別的贏家，可以被認(rèn)為是這個(gè)領(lǐng)域的先驅(qū)
• Vue.js有 Nuxt [15] ，現(xiàn)在分裂為Vue.js v2和v3版本
• Svelte也有SvelteKit

Remix

Remix [16] 是一個(gè)構(gòu)建React應(yīng)用程序的全棧框架，是這一領(lǐng)域的新秀。這是今年最大的新聞之一。它是由 React Router [17] 的作者創(chuàng)建的，直到10月份才對(duì)付費(fèi)的支持者開放。

自從這個(gè)項(xiàng)目被公開以來，它獲得了很多關(guān)注(以及300萬美元的種子資金，這也很有幫助!)它的座右銘很明確:“Web基礎(chǔ)，現(xiàn)代用戶體驗(yàn)”，因?yàn)樗腶pi盡可能地遵循Web標(biāo)準(zhǔn)(HTTP響應(yīng)，表單提交……)。

下面是兩個(gè)讓我大吃一驚的例子:

要處理表單提交，你只需要做…正常的表單提交。這似乎是顯而易見的，但開發(fā)人員已經(jīng)習(xí)慣于編寫event.preventDefault()來避免表單提交。最好的部分是，它允許表單工作，即使JavaScript被禁用,表單也能正常工作!Remix挑戰(zhàn)了我們認(rèn)為理所當(dāng)然的行為，用注重用戶和開發(fā)者體驗(yàn)的新方法去'remixing'舊原則，這真的太有趣了。

此外，它還以一種非常智能的方式處理嵌套路由，能夠以一種高效的方式加載給定頁面上所有組件所需的數(shù)據(jù)，而不是生成一個(gè)瀑布式的HTTP調(diào)用，而這通常會(huì)導(dǎo)致屏幕上出現(xiàn)許多旋轉(zhuǎn)指示器。

Nest

除了這些元框架，其次， Nest 是更傳統(tǒng)的服務(wù)器端Node.js框架的領(lǐng)導(dǎo)者，它不與任何UI庫產(chǎn)生聯(lián)系。

Strapi

最后， Strapi [18] 是“無頭CMS”的領(lǐng)導(dǎo)者，這些應(yīng)用程序提供豐富的儀表盤，讓用戶管理數(shù)據(jù)，以及利用現(xiàn)代API，讓開發(fā)人員可以從數(shù)據(jù)構(gòu)建任何東西。最新版本(4)提供了一個(gè)建立在React組件庫之上的設(shè)計(jì)系統(tǒng)。

構(gòu)建工具

特邀作者：Sébastien Lorber

Sébastien 是 React 的早期布道者，在 Docusaurus [19] 上與 Facebook 開源合作。

他運(yùn)營著一份關(guān)于 React 和 React Native 的周報(bào)--This Week in React

在 2021 年，早已存在的趨勢(shì)更進(jìn)一步。

對(duì)原生 ES 模塊的接納仍在繼續(xù)。Vite 已經(jīng)被廣泛采用（比 snowpack 更快），引領(lǐng)了一個(gè)新的工具生態(tài)系統(tǒng)（如 Vitest，一個(gè)基于 ES 的現(xiàn)代測試框架）。ES 模塊也在 Node.js 生態(tài)系統(tǒng)中逐漸被接納，但這并不容易。TypeScript 甚至在Node.js中推遲了對(duì)ES模塊的支持。

出于對(duì)性能的考慮，越來越多的前端工具開始用其他語言構(gòu)建的（見awesome-js-tooling-not-in-js）。

Lee Robinson 寫道，Rust 是 JavaScript 基礎(chǔ)設(shè)施的未來。Rust 特別有趣，因?yàn)樗扔泻芎玫男阅埽峙c JavaScript 有互操作性。NAPI-RS 允許 JavaScript 和 Rust 在沒有任何序列化成本的情況下相互通信。Next.js 正押注 SWC，這是一個(gè)可擴(kuò)展的 Rust 編譯器，允許他們將最流行的 Babel 插件移植到 Rust。

Parcel 2 已經(jīng)發(fā)布了一個(gè) 新的 Rust 編譯器 。 Rome  工具鏈也 正在用 Rust 重寫 ，但其創(chuàng)始人之一  Jamie Kyle 剛悄無聲息地離開了公司 。

Rust 顯然是領(lǐng)先的非 JS 語言，但它并不是唯一提供出色性能的語言。Bun 是用 Zig 寫的。Turborepo 和 esbuild 是用 Go 寫的。值得注意的是，Evan Wallace 離開了Figma：這可能讓他有更多的時(shí)間來研究 esbuild。

在 monorepo 領(lǐng)域，Lerna 仍然被廣泛使用，但維護(hù)得不是很好。Nx，一個(gè)有助于大幅減少構(gòu)建時(shí)間的單引擎工具，一直在快速增長。其較新的競爭者 Turborepo 在被 Vercel 收購后受益于巨大的營銷。

Vue 生態(tài)

特邀作者：Anthony Fu

Vue.js、Vite 以及 Nuxt 團(tuán)隊(duì)核心成員，VueUse 與 Slidev作者。

在 Vue 3 正式發(fā)布一年后，我們看到這個(gè)生態(tài)系統(tǒng)正伴隨著許多偉大的創(chuàng)新迅速發(fā)展。

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

隨著 Vite 成為 Vue 新的默認(rèn)工具，Nuxt 3、Quasar 和 VitePress 等元框架現(xiàn)在都使用 Vite 作為其默認(rèn)引擎。讓開發(fā)者在體驗(yàn)上有了巨大的改進(jìn)，并為后續(xù)的創(chuàng)新打開了許多新的大門。

社區(qū)還在調(diào)整 Vue2 到 Vue3 的開發(fā)者體驗(yàn)上付出了許多努力，使遷移過程更加順利。對(duì)于 Vue 開發(fā)者來說，這是偉大的一年，他們的應(yīng)用在開發(fā)者體驗(yàn)和性能方面都得到了巨大的改善。迫不及待想看到 2022 年即將發(fā)生什么!

React 生態(tài)

特邀作者：Manuel Vila

Manuel 是一位獨(dú)立的 JS/TS 工程師和開源貢獻(xiàn)者。他創(chuàng)建了 Layr 和 CodebaseShow。

React 18 很快就會(huì)發(fā)布，現(xiàn)在已經(jīng)可以使用 RC 版，并從一些開箱即用的改進(jìn)中獲益，比如自動(dòng)批處理以減少渲染或 SSR 對(duì) Suspense 的支持。

React 18 增加了期待已久的并發(fā)渲染器和對(duì) Suspense 的更新，但沒有任何重大的突破性變化。一些并發(fā)功能如 startTransition 將在 18.0 的初始版本中提供，但我們還得再等等，才能得到 JavaScript Rising Stars 的前一版中提到的服務(wù)端組件。

React 繼續(xù)發(fā)力于瀏覽器和服務(wù)端，而且在 React Native 的多平臺(tái)愿景下，它正變得無處不在。

CSS-in-JS

測試相關(guān)

移動(dòng)端

桌面端

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

狀態(tài)管理

GraphQL

總結(jié)

為了構(gòu)建現(xiàn)代網(wǎng)站和應(yīng)用程序，我們似乎已經(jīng)進(jìn)入了元框架時(shí)代:Next.js、Nuxt、SvelteKit……還有前途無量的新秀--Remix。

JavaScript社區(qū)的知名成員加入了技術(shù)公司，致力于這些解決方案:

Kent C. Dodds加入了Remix團(tuán)隊(duì)，并高度評(píng)價(jià)了它是如何讓他“建立令人驚嘆的用戶體驗(yàn)，同時(shí)仍然對(duì)代碼感到滿意”。

Vercel似乎雇傭了其他所有人:Rich Harris, Svelte的創(chuàng)造者，來自React核心團(tuán)隊(duì)的Sebastian Markb?ge, Jared Palmer和他現(xiàn)在的開源解決方案來管理monorepos (Turborepo)……看起來像一支夢(mèng)之隊(duì)!

關(guān)于工具，對(duì)速度的需求導(dǎo)致了轉(zhuǎn)向Rust和Go等語言，而不是JavaScript。

Lee Robinson發(fā)表了一個(gè)強(qiáng)有力的聲明:Rust是JavaScript基礎(chǔ)設(shè)施的未來，我們多次提到Rust語言的崛起:

Tauri是內(nèi)置Rust的.

Rome項(xiàng)目實(shí)現(xiàn)了從JavaScript轉(zhuǎn)變到Rust

Next.js最新版本(12)引入了用Rust編寫的 swc編譯 器

SWC也被Deno使用，該服務(wù)器端運(yùn)行時(shí)是2020年的獲勝者。并且我們想說的是，Deno 仍然是一個(gè)新事物!它不斷得到增強(qiáng)，并且公開了Deno bu'shu:它是邊緣計(jì)算以及serveless的解決方案之一。

談到“無服務(wù)器架構(gòu)”(Serverless functions)，就不得不提到2021年的另外一個(gè)重要主題--邊緣計(jì)算。我們有解決方案，如Vercel Edge Functions, CloudFlare Workers或Netlify Edge等在靠近用戶的地方 運(yùn)行后端代碼 。

像Next.js或Remix這樣的元框架利用了邊緣計(jì)算，使得后端代碼與React 集成變得 so easy~

我們會(huì)在2022年進(jìn)入JavaScript全棧應(yīng)用的黃金時(shí)代嗎?