Thoughtworks 技術專家 Phodal：2022 年前端趨勢總結

類微前端：豐富與靈活的各類模式

與多年前相比，微前端及類微前端模式已經靈活多變：

• 微核心模式，即胖 vendor + 外掛式的瘦元件。
• 標準微前端模式，基於定製的底座，以使各個應用、元件完全獨立。
• 混合模式，即介於微核心與微服務化模式，諸如半嵌入的微核心模式。
• 無元件模式，諸如基於 Web Components、Islands 架構模式構建豐富的元件集。

現在，我們的挑戰變成：如何選擇合適的模式？

工具鏈：追求速度與非凡體驗

眾所周知，JavaScript 的工具鏈存在執行速度的問題，主要體現在編譯方面，進而影響到開發和構建速度。

• Rust 作為 JavaScript 的基礎設施語言之一，在底層的 Node.js 生態方面，諸如 NAPI-RS 提供了使用 Rust 構建預編譯 Node.js 原生擴充套件的能力。而圍繞編譯與構建的 SWC、Parcel 等工具也提供了更快的開發體驗。
• 其它語言，諸如採用 Golang 語言的 ESBuild、採用 Zig 語言的 Bun 開發的 JS 執行時等。

接下來，我們要考慮的是相容性。

低程式碼的另外一種聲音

社群已經達成共識：針對不同的場景，構建不同的低程式碼平臺。而對於中小型公司，還面臨著一個問題，開發人員響應“熱鬧驅動開發”開發了低程式碼平臺，而這些低程式碼平臺似乎並沒有真正體現價值？設計不出適合業務使用的體驗與流程？

值得一提的是，金融科技公司傾向於招聘會 Python 的業務人員。或許，你需要真正懂數字化的業務？

瀏覽器智慧

在移動裝置上執行 TensorFlow Lite，在邊緣型的嵌入式裝置中能部署 AI 應用（tinyML），那麼直接執行在瀏覽器上的 AI 也將變得流行（TensorFlow.js、ML5.js）。而我們還要面對模型體積帶來的網路影響，如何平衡體積與質量成為了一種挑戰？

架構模式：SDUI 與 Islands

在 2022 年裡，一些過去陌生的架構模式，也逐漸變得耳熟能詳。

• Server Driven UI。在 SDUI 架構下，伺服器返回的資料（JSON）會包含頁面的元件資訊、佈局以及資料型別等等，前端則根據這些資訊來渲染 UI。從模式上來說，它與我們現今構建的低程式碼模式極為類似，圍繞生成的 JSON 生成元件等的資訊。相比之下，只是產出的結果和過程資料略有差異。
• Islands 架構（孤島架構）。孤島架構鼓勵在伺服器呈現的網頁中使用小的、集中的互動塊。Islands 的輸出是漸進式增強的 HTML，更具體地說明了增強是如何發生的。

這兩種模式依賴伺服器來動態生成，還存在依賴 CDN 的動態生成模式。

邊緣 JavaScript

多年前，Cloudflare 公司提供了一個名為 Cloudflare Worker 的工具，可以在邊緣側執行應用程式。越來越多的主流框架支援這種方式，諸如 Next.js 的 Edge Runtime。簡單來說，CDN 廠商提供了一個動態的 JavaScript 伺服器，讓程式碼執行在邊緣側，以提高應用程式的訪問速度。其適合處理預處理場景，諸如授權等，也應用於 Islands 架構。