要跟上 JavaScript 架構的所有最新動態,可能會相當困難。本文件簡要介紹 JavaScript 架構生態系統在過去一年左右的最新動態。如要進一步瞭解其中部分主題,請參閱今年 Google I/O 大會的相關演講「Navigating the JavaScript Frameworks Ecosystem」。
架構趨勢和融合
如圖表所示,JavaScript 架構會聚焦於一些類似的功能和架構。這些功能包括以元件為基礎的架構、以檔案為基礎的路由,以及新型 SSR 支援。這項整合作業展現了生態系統的成熟度和演進過程,因為架構會互相學習並採用最佳做法。
同時,許多近期趨勢 (例如伺服器元件和精細回應的不同方法) 也持續讓個別架構有所區隔。為了進一步瞭解這些趨勢,我們將逐一探討這些趨勢。
Angular
Angular 近期的版本包含多項重大變更,包括信號、可延遲的檢視畫面、NgOptimziedImage、非破壞性重新整理和部分重新整理。以下列舉幾項重點功能:
- 信號:信號是多個架構 (包括現在的 Angular) 用來追蹤應用程式狀態的做法。Angular Signals 可減少變更偵測期間必須執行的運算次數,進而改善執行階段效能,包括Interaction to Next Paint (INP)。
- 可延遲的檢視畫面:可延遲的檢視畫面可延遲特定元件、指令和管道的載入作業。舉例來說,您可以延遲載入依附元件,直到內容進入檢視區或主執行緒閒置為止。
- NgOptimizedImage:NgOptimizedImage 是 Angular 的圖片元件,可自動採用圖片載入最佳做法。
- 非破壞性充填:非破壞性充填會修正在伺服器端轉譯的 Angular 應用程式 DOM 在用戶端重建時,可能發生的閃爍現象。
- 部分充填:Angular 團隊很快就會發布部分充填的開發人員預覽版。根據預設,在部分重新整理的情況下,瀏覽器在轉譯網頁時不會載入任何網頁的 JavaScript。而是在使用者與網頁互動時,才會重新載入網頁的特定部分。
天文攝影
Astro 是新一代的靜態網站建構工具,以創新的網頁開發方式引起一陣轟動。為了專注於效能和開發人員體驗,Astro 已發布多項令人期待的功能和更新:
- Astro Islands:Astro Islands 可讓開發人員建構與網頁其他部分隔離的互動式 UI 元件。這樣就能實現高效更新和最佳效能。
- 混合式轉譯:Astro 現已支援混合式轉譯,結合靜態網站產生和伺服器端轉譯的優點,提供更彈性的轉譯方式。
- 圖片和相片元件:Astro 推出了新的圖片和相片元件,可簡化圖片處理作業並提供自動最佳化功能。
- View Transitions 支援:Astro 內建 View Transitions API 支援功能,可提供流暢無縫的頁面轉場效果。
- Astro 開發人員工具列:Astro 開發人員工具列提供強大的工具組,可用於偵錯及改善 Astro 應用程式。
回應
去年,React Server 元件的發布版本為 React 元件引進了新方法。自那時起,React 團隊一直致力於開發各種新功能,包括 React Compiler 和伺服器動作功能,以及:
- 伺服器元件:React 伺服器元件會擷取資料,並在將資料串流傳送至用戶端前,先在伺服器上轉譯。這會將轉譯工作移至伺服器,並減少需要傳送至用戶端的程式碼量。
- React Compiler:React Compiler 是一種compiler,可自動快取元件。這麼做可減少不必要的重繪作業,進而改善效能。React 團隊表示,開發人員無須修改任何程式碼,即可採用 React Compiler。
- 伺服器動作:伺服器動作可啟用用戶端與伺服器之間的通訊。您可以使用伺服器動作定義伺服器端函式,直接從 React 元件叫用,無須手動呼叫 API 和複雜的狀態管理。這項功能對於資料變異和表單提交等操作特別實用。
- 素材資源載入:React 一直在開發宣告式 API,用於預先載入和載入指令碼、樣式、字型和圖片等素材資源。
- 螢幕外轉譯:React 也正在進行螢幕外轉譯。離屏算繪是「React 即將推出的功能,可在背景中算繪畫面,而不會產生額外的效能負擔。您可以將其視為內容可見度 CSS 屬性的其中一個版本,不僅適用於 DOM 元素,也適用於 React 元件。」
重混
Remix 是全堆疊網頁框架,在開發人員社群中越來越受歡迎。Remix 著重於網路基礎知識和提升開發人員體驗,因此推出了幾項值得注意的更新:
- Remix 2.0 版本:Remix 2.0 於 2023 年 9 月發布,為架構帶來重大改善和新功能。
- 支援 Vite 的穩定版:Remix 現已支援 Vite,這是一款快速輕量化的建構工具,可加快開發建構作業並提升效能。
- SPA 模式:Remix 推出了 SPA 模式,可讓您建構純粹的靜態網站,而不需要在實際工作環境中使用 JavaScript 伺服器。這可讓開發人員使用 Remix 的強大功能,例如以檔案為基礎的路由、自動程式碼分割等,同時保留靜態網站部署的簡易性。
Next.js
2023 年 5 月推出的 Next.js 13.4 版本特別值得注意,因為它為 React Server 元件、串流和 Suspense 帶來穩定支援。自那時起,Next.js 持續為新的 React API (例如 伺服器動作) 提供支援,並透過 Turbopack 等計畫改善開發人員體驗。其他亮點包括:
- 應用程式路由器:應用程式路由器在 Next.js 13.4 中已穩定,這是在 Next.js 應用程式中建立及管理路由的新方法。應用程式路由器是使用 Next.js 新功能 (例如共用版面配置和巢狀路由) 的必要條件,也是在 Next.js 應用程式中使用 React 新 API (例如 React 伺服器元件、懸置和伺服器動作) 的必要條件。
Turbopack:目前為實驗性質的網頁轉譯方法,建構於 React 的 Suspense API 之上。部分預先顯示會使用靜態載入殼層算繪網頁。不過,殼會為網頁中的動態內容留下「空白」,而這類內容會以非同步方式載入。這樣一來,您就能享有快取靜態頁面的效能優勢,同時仍可將動態資料納入頁面內容。
Vue
Vue 的最新版本 Vue 3.4 包含多項效能提升功能。Vue 目前也正在開發 Vue Vapor,這也是以效能為導向的產品。以下是這個空間的幾項重點:
- Vue 3.4 發布:功能包括「完全重寫的剖析器,速度提高一倍、SFC 編譯速度更快,以及重構的反應系統,可提升 重新運算效率」。
- Vue Vapor 模式:Vue 正在開發 Vapor 模式,這是一種可與 Vue 單一檔案元件搭配使用的自選、以效能為導向的編譯策略。Vapor 模式產生的程式碼效能比 Vue 編譯器目前產生的程式碼更高。此外,使用 Vapor 模式搭配所有元件,就不需要使用 Vue 虛擬 DOM (可縮減套件大小)。
- Vue 2 已達到 EOL:Vue 2 的 EOL 為 2023 年 12 月 31 日。不過,Vue 2 仍相當常見:約 50% 的 Vue npm 套件下載量都是 Vue 2。
Nuxt
Nuxt 即將推出 Nuxt 4。除了 Nuxt 在過去一年內頻繁發布架構外,Nuxt 模組生態系統也成長到近 220 個模組。這個領域近期的發展包括:
- Nuxt 3.x 版本:Nuxt 通常每月推出新的次要版本。這些版本的亮點包括支援 Vite 5、僅限伺服器和僅限用戶端的頁面、用戶端 Node.js 支援,以及原生網頁串流。 * Nuxt 模組:Nuxt 模組生態系統的亮點包括新 nuxt/fonts 模組的發布,以及 nuxt/image 和 Nuxt 開發人員工具 的 1.0 版發布。即將推出的模組版本將包含 nuxt/scripts、nuxt/hints、nuxt/a11y 和 nuxt/auth。
- 伺服器元件 (島嶼元件):Nuxt 持續擴充對伺服器元件的支援 (目前為實驗功能)。在 Nuxt 中,這些由伺服器算繪的元件可用於靜態網站,可採用 Islands 架構。
固體
Solid 一直致力於推出穩定版 1.0 的SolidStart 元架構。SolidStart 提供精細的反應性、同構轉譯,並支援各種轉譯模式。主要包含:
- 精細的反應:Solid 的反應系統可提供精確的更新和最佳效能,實現高效的轉譯和狀態管理。
- 同構路由:SolidStart 提供統一的路由方法,讓開發人員定義在用戶端和伺服器上都能順暢運作的路由。
- 彈性的轉譯模式:SolidStart 支援各種轉譯模式,包括伺服器端轉譯、靜態網站產生和用戶端端轉譯,讓開發人員可以彈性選擇最適合應用程式的做法。
Svelte
過去一年,Svelte 團隊一直專注於即將推出的 Svelte 5,這將是重大版本。其他亮點包括:
- Svelte 5 即將推出:除了包含「Svelte 編譯器和執行階段的重寫」外,Svelte 5 也引入了Runes 的概念。
- Runes 功能推出:Runes 是 Svelte 5 即將推出的功能。「符文可解鎖通用、精細的回應性...有了 Runes,您可以超越 .svelte 檔案的範圍,Svelte 5 的回應性由信號提供,但 [與其他架構不同],在 Svelte 5 中,信號是幕後實作細節,而非您直接互動的項目。」
- SvelteKit 2 發布:SvelteKit 是 Svelte 的元架構。這個版本的功能包括淺層路由和 Vite 5 支援。
Chrome Aurora
Chrome Aurora 是 Google 的一個團隊,與各種開放原始碼網頁架構合作,以改善網際網路的使用者體驗,尤其是效能。以下是我們在過去一年中參與的部分計畫:
- 圖片 (next/image、NgOptimizedImage 和 nuxt/image)
- 字型公用程式 (next/font、nuxt/fonts 和 unjs/fontaine (Vite 外掛程式)
- 指令碼載入 (next/script 和 nuxt/scripts)
- 第三方指令碼載入 (next/third-parties、nuxt/third-parties 和 Angular 的 YouTube 和 Google 地圖元件)
- 算繪:(Angular SSR/水合)
結論
JavaScript 架構生態系統持續快速發展,每個架構都會帶來一套創新和改善措施。無論您想瞭解 Angular、React 和 Vue 等成熟架構的最新功能,還是想探索 Astro、Remix 和 Solid 等新選擇,都有很多值得關注的進展。
開發人員若能掌握這些進展,就能在為專案選擇架構時做出明智的決定。瞭解各個架構的優點和獨特功能後,我們就能選出最符合專案需求和開發偏好的架構。
希望這份總覽能讓您一窺 JavaScript 架構的現況。如要進一步瞭解這篇網誌文章涵蓋的主題,請務必查看 Google I/O 的相關演講。祝您編寫程式一切順利!