2021 年 JavaScript 明星專案

2022-02-08 09:00:14

本文介紹的專案是 JavaScript Rising Stars 對 JavaScript 領域的 ,參考的指標是各個專案在 GitHub 上於過去 12 個月新增的 star 數量。

主要包括以下部分:

  • 最受歡迎專案
  • 前端框架
  • Node.js 框架
  • 構建工具
  • Vue 生態圈
  • React 生態圈
  • CSS in JavaScript
  • 測試框架
  • 移動開發
  • 桌面開發
  • 靜態網站生成器
  • 狀態管理
  • GraphQL

最受歡迎專案

TOP 3

年度流行專案是 zx,一個由谷歌推出的全新的工具,可用於以 JavaScript 或 TypeScript 編寫簡單的命令列指令碼。

基本上它可以讓你在程式碼中嵌入任何 bash 表示式(lscatgit...等任何命令!),並 await 使用 的結果。

它引入了由幾個流行的軟體包提供的實用工具:

  •  與瀏覽器中 fetch 有著相同的 API, 可建立 HTTP 請求。
  •  可處理檔案系統操作。
  •  以使用者友好模式來匹配給定的檔名。

其次, 是一個使用  編譯器的,有著優秀效能的構建工具。出生時,它僅與 Vue.js 社群相連,但現在它為主流的 UI 框架都提供了支援:

排在第三位的  依舊保持了其在 React 世界中 「元框架」 的領先地位。

Tauri

第五名,Tauri 是一個使用 Web 技術構建桌面應用程式的解決方案。

與 Electron 相比,它是用 Rust 編寫的,而且它不在每一個應用程式中搭載 Node.js 執行時。1.0 測試版剛於 

特選專案

它沒有進入前十名,但 Astro 是今年最值得注意的專案之一。Astro 是一個載入速度更快的建站工具,因為它使用較少的 JavaScript。

它的概念接近於靜態網站生成(SSG),但關鍵的區別在於,Astro 可以讓你在網頁中引入被稱為 「島嶼」 的動態互動部分。

在使用者端渲染動態元件時可應用不同的策略:

  • 當頁面載入時
  • 當頁面空閒時,如果它是一個低優先順序的元件(考慮跟蹤。)
  • 當元件可見時,使用遊覽器 Intersection Observer API

最厲害的部分之一是 Astro 頁面可以用任何框架編寫的 HTML 和元件組合來構建。React、Vue.js 或 Svelte...

前端框架

自我們開展 JavaScript Rising Stars 活動以來,React 首次成為頭號 UI 框架,但如果我們考慮到 Vue.js 被分成了兩個倉庫(第二和第三版本),實際上 Vue.js 才是第一名。

最大的變化是 Svelte 的崛起,它超越 Angular 佔據第三位。

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

今年的主要頭條新聞之一是,Svelte 的創造者 Rich Harris 正在加入 Next.js 背後的 Vercel 團隊。

與 Next.js 一樣,Svelte 也有自己的元框架來構建高效能的應用程式:SvelteKit。

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

它也啟發了 Mitosis,一個針對任何框架編寫和編譯元件的工具:React, Vue.js, Angular, Svelte...

Node.js 框架

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

  • React 的 ,是這個類別的冠軍,也可以說是這個領域的先驅者
  • Vue.js 的 ,現在分為 Vue.js v2 和 v3 兩個版本
  • Svelte 也有 

Remix,一個構建 React 應用的全棧框架,是這個類別中的新秀。它也是今年最大的故事之一。它是由 React Router 的作者建立的,在 10 月之前,它只對付費支援者開放。

該專案自公開以來得到了很多助力(以及 300 萬美元的種子資金,這也有幫助!)。它的座右銘很明確:「Web 基礎,現代使用者體驗」,因為它的 API 儘可能遵循 web 標準(HTTP響應,表單提交...)。

這裡有兩個讓我大吃一驚的範例:

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

此外,它還以一種非常聰明的方式處理巢狀路由,能夠以一種有效的方式載入一個給定頁面上所有元件所需的資料,而不是產生瀑布式的 HTTP 呼叫,而這往往會導致螢幕上出現大量的旋轉指標。

除了這些元框架,在第二位的 Nest 是更傳統的伺服器端 Node.js 框架的領導者,不與任何 UI 庫相聯絡。

最後在第三位的 Strapi 是 「Headless CMS」 的領導者,就是那些提供豐富的儀表盤讓使用者管理資料和現代 API 讓開發者從資料中建立任何東西的應用程式。最新版本提供了一個建立在 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。

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

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

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

Vue 生態圈

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

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

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

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

React 生態圈

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

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

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

CSS in JavaScript

測試框架

移動開發

桌面開發

靜態網站生成器

狀態管理

GraphQL

參考:

展開閱讀全文