盤點2021年最受關注的Javascript專案

語言: CN / TW / HK

本文譯者是360奇舞團前端開發工程師

原文標題:2021 Javascript Rising  Stars

原文作者:Michael Rambeau

原文地址:https://risingstars.js.org/2021/en

歡迎來到 JavaScript Rising Stars 第6版,這是我們對Javascript領域的年度總結。希望你不要錯過2021年有關於Javascript的年度盤點。我們將會談論到元框架以及時尚流行的前端技術。

但是首先,今年我們有了一個新的“冠軍”,這是沒有人預料到的,它是一個命令列工具! 下面的圖表比較了過去12個月在GitHub上新增的star數。分析的資料來源為Best of JS網站,這是一份精心策劃的與web平臺相關的最佳專案列表。

Top20

前三甲

今年最流行的專案是 zx [1] ,這是谷歌推出的一個全新工具,可以用JavaScript或TypeScript編寫簡單的命令列指令碼。

google zx

stars: +24.3k

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

  • node-fetch [2] 在瀏覽器中使用相同的API進行HTTP請求

  • Fs-extra [3] 用於處理檔案系統操作

  • globby [4] 匹配給定使用者友好模式的檔名

其次, Vite [5] 是一個構建工具,它使用 esbuild [6] 編譯器來提供卓越的效能。一開始它連結到Vue.js社群,但現在它已經可以支援前端業內主流的UI框架如:React, Svelte [7] Lit [8]

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

Tauri

第五名, Tauri [10] 是一個使用web技術構建桌面應用程式的解決方案。與Electron相比,它是用Rust編寫的,而且它不會在每個應用程式中都搭載Node.js執行時。1.0版在5月釋出了測試版。

特選

雖然沒有進入前10名,但 Astro [11] 是今年最值得關注的專案之一。Astro是一個構建Web載入速度更快的工具,因為它提供了更少的JavaScript。

這個概念接近於靜態網站生成(SSG),但關鍵的區別是Astro允許你在頁面中引入被 稱為“孤島” 的動態互動性片段。

在客戶端渲染動態元件可以採用不同的策略:

  • 當頁面載入時

  • 當頁面空閒時,如果它是一個低優先順序元件(考慮跟蹤)。

  • 當元件使用瀏覽器的 Intersection Observer API [12] 可見時

最好的一點是Astro頁面可以用HTML和任何框架編寫的元件的組合來構建:React, Vue.js或Svelte…

前端框架

React

自從我們執行JavaScript Rising Stars以來,React第一次成為最受歡迎的UI框架,但如果我們考慮到Vue.js被分成兩個庫(版本2和版本3),Vue.js實際上是領先者。

Svelte

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

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

今年的頭條新聞之一是,Svelte的創造者Rich Harris加入了 Next.js [13] 背後的Vercel的團隊。

像Next.js一樣,Svelte也有自己的元框架來構建高效能應用: SvelteKit [14]

Solid

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

它啟發了 Mitosis [15] ,一個可以針對任何框架編寫和編譯元件的工具:React、Vue.js、Angular、Svelte……

node.js 框架

主要的UI框架都有自己的“元框架”來構建現代的、可伸縮的應用程式,提供了諸如路由、伺服器端渲染、頁面的靜態生成、為生產優化構建等功能。

  • React的Next.js是這個類別的贏家,可以被認為是這個領域的先驅

  • Vue.js有 Nuxt [15] ,現在分裂為Vue.js v2和v3版本

  • Svelte也有SvelteKit

Remix

Remix [16] 是一個構建React應用程式的全棧框架,是這一領域的新秀。這是今年最大的新聞之一。它是由 React Router [17] 的作者建立的,直到10月份才對付費的支持者開放。

自從這個專案被公開以來,它獲得了很多關注(以及300萬美元的種子資金,這也很有幫助!)它的座右銘很明確:“Web基礎,現代使用者體驗”,因為它的api儘可能地遵循Web標準(HTTP響應,表單提交……)。

下面是兩個讓我大吃一驚的例子:

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

此外,它還以一種非常智慧的方式處理巢狀路由,能夠以一種高效的方式載入給定頁面上所有元件所需的資料,而不是生成一個瀑布式的HTTP呼叫,而這通常會導致螢幕上出現許多旋轉指示器。

Nest

除了這些元框架,其次, Nest 是更傳統的伺服器端Node.js框架的領導者,它不與任何UI庫產生聯絡。

Strapi

最後, Strapi [18] 是“無頭CMS”的領導者,這些應用程式提供豐富的儀表盤,讓使用者管理資料,以及利用現代API,讓開發人員可以從資料構建任何東西。最新版本(4)提供了一個建立在React元件庫之上的設計系統。

構建工具

特邀作者:Sébastien Lorber

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

他運營著一份關於 React 和 React Native 的週報--This Week in React

在 2021 年,早已存在的趨勢更進一步。

對原生 ES 模組的接納仍在繼續。Vite 已經被廣泛採用(比 snowpack 更快),引領了一個新的工具生態系統(如 Vitest,一個基於 ES 的現代測試框架)。ES 模組也在 Node.js 生態系統中逐漸被接納,但這並不容易。TypeScript 甚至在Node.js中推遲了對ES模組的支援。

出於對效能的考慮,越來越多的前端工具開始用其他語言構建的(見awesome-js-tooling-not-in-js)。

Lee Robinson 寫道,Rust 是 JavaScript 基礎設施的未來。Rust 特別有趣,因為它既有很好的效能,又與 JavaScript 有互操作性。NAPI-RS 允許 JavaScript 和 Rust 在沒有任何序列化成本的情況下相互通訊。Next.js 正押注 SWC,這是一個可擴充套件的 Rust 編譯器,允許他們將最流行的 Babel 外掛移植到 Rust。

Parcel 2 已經發布了一個 新的 Rust 編譯器 Rome  工具鏈也 正在用 Rust 重寫 ,但其創始人之一  Jamie Kyle 剛悄無聲息地離開了公司

Rust 顯然是領先的非 JS 語言,但它並不是唯一提供出色效能的語言。Bun 是用 Zig 寫的。Turborepo 和 esbuild 是用 Go 寫的。值得注意的是,Evan Wallace 離開了Figma:這可能讓他有更多的時間來研究 esbuild。

在 monorepo 領域,Lerna 仍然被廣泛使用,但維護得不是很好。Nx,一個有助於大幅減少構建時間的單引擎工具,一直在快速增長。其較新的競爭者 Turborepo 在被 Vercel 收購後受益於巨大的營銷。

Vue 生態

特邀作者:Anthony Fu

Vue.js、Vite 以及 Nuxt 團隊核心成員,VueUse 與 Slidev作者。

在 Vue 3 正式釋出一年後,我們看到這個生態系統正伴隨著許多偉大的創新迅速發展。

新的語法,如 Vue 3 核心中的setup,將元件創作的體驗提升到一個新的水平。新的 VS Code 擴充套件 Volar 為 Vue 帶來了一流的 TypeScript 支援;以 Composition API 為基礎建立的新狀態管理器 Pinia 成為 Vuex 的繼承者。

隨著 Vite 成為 Vue 新的預設工具,Nuxt 3、Quasar 和 VitePress 等元框架現在都使用 Vite 作為其預設引擎。讓開發者在體驗上有了巨大的改進,併為後續的創新打開了許多新的大門。

社群還在調整 Vue2 到 Vue3 的開發者體驗上付出了許多努力,使遷移過程更加順利。對於 Vue 開發者來說,這是偉大的一年,他們的應用在開發者體驗和效能方面都得到了巨大的改善。迫不及待想看到 2022 年即將發生什麼!

React 生態

特邀作者:Manuel Vila

Manuel 是一位獨立的 JS/TS 工程師和開源貢獻者。他建立了 Layr 和 CodebaseShow。

React 18 很快就會發布,現在已經可以使用 RC 版,並從一些開箱即用的改進中獲益,比如自動批處理以減少渲染或 SSR 對 Suspense 的支援。

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

React 繼續發力於瀏覽器和服務端,而且在 React Native 的多平臺願景下,它正變得無處不在。

CSS-in-JS

測試相關

移動端

桌面端

靜態站點

狀態管理

GraphQL

總結

為了構建現代網站和應用程式,我們似乎已經進入了元框架時代:Next.js、Nuxt、SvelteKit……還有前途無量的新秀--Remix。

JavaScript社群的知名成員加入了技術公司,致力於這些解決方案:

Kent C. Dodds加入了Remix團隊,並高度評價了它是如何讓他“建立令人驚歎的使用者體驗,同時仍然對程式碼感到滿意”。

Vercel似乎僱傭了其他所有人:Rich Harris, Svelte的創造者,來自React核心團隊的Sebastian Markbåge, Jared Palmer和他現在的開源解決方案來管理monorepos (Turborepo)……看起來像一支夢之隊!

關於工具,對速度的需求導致了轉向Rust和Go等語言,而不是JavaScript。

Lee Robinson發表了一個強有力的宣告:Rust是JavaScript基礎設施的未來,我們多次提到Rust語言的崛起:

Tauri是內建Rust的.

Rome專案實現了從JavaScript轉變到Rust

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

SWC也被Deno使用,該伺服器端執行時是2020年的獲勝者。並且我們想說的是,Deno 仍然是一個新事物!它不斷得到增強,並且公開了Deno bu'shu:它是邊緣計算以及serveless的解決方案之一。

談到“無伺服器架構”(Serverless functions),就不得不提到2021年的另外一個重要主題--邊緣計算。我們有解決方案,如Vercel Edge Functions, CloudFlare Workers或Netlify Edge等在靠近使用者的地方 執行後端程式碼

像Next.js或Remix這樣的元框架利用了邊緣計算,使得後端程式碼與React 整合變得 so easy~

我們會在2022年進入JavaScript全棧應用的黃金時代嗎?

參考資料

[1]

zx: https://github.com/google/zx/

[2]

node-fetch: https://github.com/node-fetch/node-fetch/

[3]

Fs-extra: https://github.com/jprichardson/node-fs-extra/

[4]

globby: https://github.com/sindresorhus/globby/

[5]

Vite: https://vitejs.dev/

[6]

esbuild: https://esbuild.github.io/

[7]

Svelte: https://svelte.dev/

[8]

Lit: https://lit.dev/

[9]

Next.js: https://nextjs.org/

[10]

Tauri: https://tauri.studio/

[11]

Astro: https://astro.build/

[12]

Intersection Observer API: https://devdocs.io/dom/intersection_observer_api

[13]

SvelteKit: https://kit.svelte.dev/

[14]

Mitosis: https://mitosis.builder.io/

[15]

Nuxt: https://nuxtjs.org/

[16]

Remix: https://remix.run/

[17]

React Router: https://reactrouter.com/

[18]

Strapi: https://strapi.io/

[19]

Docusaurus: https://docusaurus.io/

E N D   -

3 6 0 W 3 C E C M A T C 3 9 L e a d e r