JavaScript 架構簡介's (2024 年 5 月)

Katie Hempenius
Katie Hempenius
X
Addy Osmani
Addy Osmani
X GitHub

要掌握 JavaScript 架構的所有操作方式並不容易。本文件會簡要說明過去一年左右 JavaScript 架構生態系統近期發生的狀況。如要進一步瞭解這些主題，請參閱今年的 Google I/O 大會中相應的「導覽 JavaScript 架構生態系統」講座。

比較架構功能的圖表

如圖所示，JavaScript 架構正在融合許多類似的特徵與架構。這些元件包括以元件為基礎的架構、檔案式路由和現代 SSR 支援。這樣的整合體現了生態系統的成熟度和發展，因為架構彼此之間會相互學習，並採用最佳做法。

同時，許多近期趨勢 (例如伺服器元件和精細重新活動的不同方法) 仍然保有各自獨立的架構。為了進一步瞭解這些趨勢，我們會一次深入探討一個架構。

Angular

Angular 的近期版本包含各種重大變更，包括信號、可延遲檢視畫面、NgOptimziedImage、非破壞性水解，以及部分水分。以下列舉幾項重點功能：

  • 信號：信號是多個架構 (包括目前的 Angular) 用於追蹤應用程式中狀態的方法。精細信號可減少偵測變更期間必須執行的計算，藉此提升執行階段效能，包括前往下一個繪製項目 (INP) 互動。
  • 可延遲的檢視畫面：可延後的檢視畫面可延後載入特定元件、指令和管道的載入作業。例如，您可以延後載入依附元件，直到內容進入可視區域，或直到主執行緒閒置為止。
  • NgOptimizedImage：NgOptimizedImage 是 Angular 的圖片元件，可自動採用圖片載入最佳做法。
  • 非破壞性水源：非破壞性水源修正了在伺服器端轉譯的 Angular 應用程式的 DOM 重新建構時，會發生閃爍的問題。
  • 部分飲水情況：Angular 團隊即將推出開發人員部分水分補充預覽功能。根據預設，瀏覽器不會在轉譯時載入部分網頁的 JavaScript，相反地，如果網頁的特定部分在使用者與網頁互動時顯示水分，就會產生水分。

天文攝影

Astro 是現代的靜態網站製作工具，與開發網頁開發的創新方法掀起一波的浪潮。Astro 著重在效能和開發人員體驗方面，發布了幾項令人期待的功能和更新：

  • 星座群島：天陸群島可讓開發人員建構互動式 UI 元件，並與頁面的其他部分隔離。這有助於提高更新效率並達到最佳效能。
  • 混合式轉譯：Astro 現在支援混合式轉譯，結合靜態網站產生和伺服器端算繪的優勢，提供更靈活的彈性。
  • 圖片和圖片元件：Astro 推出了全新的圖片和圖片元件，可簡化圖片處理作業，並提供自動最佳化功能。
  • 檢視畫面轉場支援：Astro 提供 View Transitions API 的內建支援，有助於流暢切換頁面轉換。
  • 天文開發人員工具列：Astro DevToolbar 提供一組功能強大的工具，可用於偵錯及最佳化 Astro 應用程式。

回應

React Server 元件的版本在去年推出了 React 元件的新方法。從那時起，React 團隊便開始開發各種新功能，包括 React Compiler 和伺服器動作功能，以及：

  • 伺服器元件：React 伺服器元件是先擷取資料的元件，再串流至用戶端，再於伺服器上算繪。這會將算繪工作移至伺服器，並減少需要傳遞至用戶端的程式碼數量。
  • React Compiler：React 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 模式：重混模式引入了 SPA 模式，可讓您建立純靜態網站，不必在實際工作環境中使用 JavaScript 伺服器。這可讓開發人員使用檔案導向的強大功能 (例如檔案轉送、自動程式碼分割等)，同時以簡便的方式執行靜態網站部署作業。

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 Server 元件、Susspense 和伺服器動作等新的 React API，就必須先透過應用程式路由器。

  • Turbopack：以 React 的 Suspense API 為基礎建構的頁面轉譯方法。部分預先算繪功能會使用靜態載入殼層轉譯頁面。不過，殼層會留下網頁中動態內容的「漏洞」，並以非同步方式載入這項內容。如此一來，除了可快取靜態網頁，還是能將動態資料納入網頁內容中，這樣做可以帶來效能優勢。

Vue (Vue)

Vue 最新的版本 Vue 3.4 包含多項效能改善項目。Vue 目前也在開發 Vue Vapor，它同樣以效能為導向。以下列出有關此空間的幾個重點：

  • Vue 3.4 發布：相關功能包括「完全重新編寫的剖析器，速度是處理速度的兩倍，SFC 編譯速度快上兩倍，以及一個重構的重建系統，可提高 重新運算效率。」
  • Vue Vapor 模式：Vue 適用於 Vapor 模式，這是能與 Vue 單一檔案元件搭配使用的選擇加入、效能導向編譯策略。Vapor Mode 會產生程式碼，其效能比 Vue Compiler 目前產生的程式碼更出色。此外，如果搭配所有元件使用 Vapor 模式，就不需使用 Vue Virtual DOM (進而減少套件大小)。
  • Vue 2 達 EOL：Vue 2 的終止服務 (EOL) 是 2023 年 12 月 31 日。不過，Vue 2 仍相當普遍：大約有 50% 的 Vue npm 套件下載項目是 Vue 2。

努比特

Nuxt 是新發布 Nuxt 4。除了過去一年內常見的架構版本外，Nuxt 模組生態系統也已成長至將近 220 個模組。這個領域的近期發展包括：

固體

Solid 一直努力改善中繼架構 SolidStart 的穩定版 1.0 版本。SolidStart 提供精細的重新活動、不態轉送，以及各種轉譯模式的支援。主要包含：

  • 精細的重新活動：固體的活動系統可提供精確的更新和最佳效能，實現有效率的轉譯和狀態管理。
  • 異態轉送：SolidStart 提供整合式轉送方法，讓開發人員定義可在用戶端和伺服器中順暢運作的路徑。
  • 彈性的顯示模式：SolidStart 支援多種轉譯模式，包括伺服器端轉譯、靜態網站產生以及用戶端轉譯，讓開發人員能夠靈活地為應用程式選擇最佳方法。

絲絨

過去一年來，Svelte 團隊專注於即將推出的《Svelte 5》版本，這一點非常重要。其他重點摘要包括：

  • 即將推出 Svelte 5：除了納入 Svelte 編譯器和執行階段的重寫之外，Svelte 5 還導入了 Runes 的概念。
  • 宣布執行作業：Svelte 5 是即將推出的功能。「跑步可解鎖通用、精細的重新活動... 透過跑步，激勵會延伸到 .svelte 檔案的邊界之外... Svelte 5 的反應是運用信號進行分析，然而，[不同於其他架構]，在 Svelte 5 中，信號是背後的實作細節，而非直接與您互動的方式互動。」
  • SvelteKit 2 發布：SvelteKit 是 Svelte 的中繼架構。 此版本包含淺層轉送和對 Vite 5 的支援。

Chrome 極光

Chrome Aurora 是 Google 的團隊，與各種開放原始碼網路架構協同合作，可改善網路上的使用者體驗 (尤其是效能)。以下是過去一年來我們做出的 部分計畫：

結論

JavaScript 架構生態系統以快速發展為基礎，每個架構都有自己的一系列創新和改善項目。無論您對 Angular、React 和 Vue 等架構的最新功能感興趣，還是想探索 Astro、Remix 和 Solid 等較新的選項，人們都能隨時獲得令人興奮的開發成果。

身為開發人員，掌握最新相關進展有助我們在選擇專案架構時做出明智的決定。只要瞭解每個架構的優勢和獨特功能，我們就能選取最符合專案需求和開發偏好的項目。

希望這份總覽可以讓您一窺 JavaScript 架構目前的狀態。如要深入瞭解此網誌文章涵蓋的主題，請務必觀看 Google I/O 大會的隨附的講座影片。祝您編寫程式一切順利！