Categories
程式開發

基於 React 的微前端:Piral 簡析


近年來,“微前端”一詞已進入了主流技術領域。雖說實踐中實現微前端的模式有很多,但我們認為可能存在一個“理想”的解決方案——這種方案既能具備單體架構的優勢,又能結合使用隔離模塊的某些優秀特性。

在這篇文章中,我們將研究基於React的微前端解決方案,其可以無限制地擴展開發工作、漸進部署並基於無服務器基礎架構。我們的解決方案由一個應用外殼和一些獨立開發的模塊組成,這些模塊動態地集成到應用外殼中。

我們將使用的解決方案稱為Piral,這是我們的模塊化前端架構的參考實現。這一前端架構的定義則基於我們在過去三年中從多個客戶項目中獲得的實際經驗。

Modulith

我們的方法是單體應用與微應用(稱為Modulith)之間的一個交集,其優點在於我們可以做到以下很多事情:

  • 漸進採用(通過簡單的遷移路徑),
  • 共享庫(例如模式庫),或
  • 共享現有的佈局/應用程序框架。

所有這些都只是可能性。不利之處在於採用此類選項時需要擔負的職責,例如,在應用外殼中包含共享庫將帶來經典的依賴項管理問題。

Modulith與微前端之間有什麼關係呢?下圖中展示了一個可行的微前端設​​計——每個服務都有一個關聯的微前端。每個微前端都代表一個孤立的單元,可能帶有自己的模式庫和技術。

基於 React 的微前端:Piral 簡析 1

相比之下,Modulith嘗試重用負責UX的重要部分。因此這裡的一致性至關重要。顯然,使用這種方法也會遇到一些挑戰,但一致性和冗餘之間的考慮才是創建前端UI與後端服務不同的原因。

基於 React 的微前端:Piral 簡析 2

上圖加入了Modulith,它給出了與總體責任相關的邊界框。入口點是應用程序外殼。

應用程序外殼

通常來說,要創建一個使用微前端的新應用程序,第一步就是製作應用外殼的骨架。應用外殼包含共享佈局、一些核心業務功能(如果有)以及共享依賴關係。應用外殼還負責設置所有模塊都必須遵循的基本規則,這些模塊在Piral(https://github.com/smapiot/piral)的上下文中稱為“Pilet”。

在一個最簡單的示例中,應用外殼可能如下所示:

import * as React from "react";
import { render } from "react-dom";
import { Redirect } from "react-router-dom";
import { createPiral, Piral, SetRoute } from "piral";

const piral = createPiral({
  requestPilets() {
    return fetch("https://feed.piral.io/api/v1/pilet/mife-demo")
      .then(res => res.json())
      .then(res => res.items);
  }
});

const app = ;

render(app, document.querySelector("#app"));

這將創建一個空白的應用外殼,其代碼已允許將不同的頁面和片段縫合在一起。
太好了,那麼我們應該如何部署這個應用程序呢?這裡有兩件事要做:

  1. 構建(即打包)該應用程序,並將其推送到某些存儲上。
  2. 打包源代碼並將其推送到一個(私有)存儲庫。或者:共享壓縮包。

第一步是為了確保可以從Internet訪問我們的應用程序。第二步需要具體解釋一下。處理微前端時的一個問題是“我如何開發這些東西”?畢竟,我們手中只有一個大型應用程序的模塊。如果我們想研究這些模塊之間的交互,該怎麼辦?如果我們想看看我們的樣式是否適合較大的UX,又該怎麼辦?

這些問題的答案都可以在原生移動應用的開發過程中找到:我們也不是憑空開發原生移動應用的。實際上我們有一個模擬器——一款外觀和行為與我們將要部署到的系統類似的軟件。用微前端術語來說,我們需要在開發流程中使用應用外殼。但是我們怎樣獲得這個外殼?尤其需要考慮的是我們想要在離線狀態下繼續開發工作。於是,我們需要一種共享應用外殼的方法以獲得一個“仿真”的外殼,從而實現快速的開發流程。

深入解析Pilet

應用外殼是非常重要的,而所有那些Pilet更為關鍵。大多數時候,基於Piral的應用外殼僅處於維護模式——所有特性都是在Pilte中獨立開發的。

Pilet只是一個NPM包,其中包含一個JavaScript文件(“main bundle”主包,用於 UMD 生成)。它還可能包含其他文件(例如CSS文件和圖像等),以及更多JavaScript文件(“side bundles”附加包)。

基於 React 的微前端:Piral 簡析 3

從編程的角度來看,一個Pilet僅有一個約束——它輸出一個稱為setup的函數。該函數接收API,後者允許Pilet的開發人員確定模塊中要使用的技術和函數。

簡而言之,一個Pilet可能會像下面這樣簡單:

import * as React from "react";
import { PiletApi } from "app-shell";

export function setup(app: PiletApi) {
  app.registerPage("/sample", () => (
    

Hello World!

Welcome to your personal pilet :-).

)); }

所以,Pilet應該盡可能地“懶惰“。因此,任何較大的(甚至可能不需要立即使用的部件)都應該僅在需要時加載。

可以使用我們標準工具包中的方法進行簡單的轉換:

// index.tsx
import * as React from "react";
import { PiletApi } from "app-shell";

const Page = React.lazy(() => import("./Page"));

export function setup(app: PiletApi) {
  app.registerPage("/sample", Page);
}

// Page.tsx
import * as React from "react";

export default () => (
  

Hello World!

Welcome to your personal pilet :-).

);

這些在Piral裡都沒問題。重要的是要記住,在上面的(非常簡單的)代碼庫中,僅在根模塊中提到了Piral。這是一個不錯的設計。作為Pilet的作者,你可能會決定將Piral整合到怎樣的深度上。我們的建議是僅將根模塊用於這裡的集成。
到目前為止一切都很好,但是如何將這個Pilet帶入我們的(已部署的)應用外殼呢?答案是feed服務。我們注意到,我們的應用外殼從“https://feed.piral.io/api/v1/pilet/mife-demo”中獲取了一些數據。對此請求的響應包含一些元數據,這些元數據允許Piral通過接收到一個指向其主包的鏈接來檢索不同的Pilet。

每個人都可以自由開發或推出定制的feed服務。有了相應的規範和基於Express的Node.js示例,我們認為基礎工作已經準備就緒了。此外,我們在線託管了一個靈活的feed服務。它包含了快速入門所需的所有內容。

Piral CLI

以上所有“魔法“都可以在Piral CLI中找到。 Piral CLI是一個簡單的命令行工具,它負責:

  • 搭建骨架(piral new用於新的應用外殼,pilet new用於新的pilet)
  • 調試(使用piral debug來調試一個應用外殼;對於pilet,使用pilet debug)
  • 構建(使用piral build或pilet build)
  • 發布pilet(pilet publish)

在整個高層架構中,Piral CLI恰好位於開發人員和feed服務之間的位置。如上所述,feed服務是這一架構中唯一需要的後端組件。它使應用程序外殼程序與特定模塊解耦,並允許使用更高級的用例,例如用戶特定的模塊交付。

基於 React 的微前端:Piral 簡析 4

Piral CLI在內部使用Parcel。因此所有用於Parcel的插件(以及它們的配置-如果需要)都可以正常工作。

Piral CLI還支持個人的插件。

了解更多

更多關於Piral的文章:

此外,Piral的文檔也很有用,它包含所有類型的見解、一個手把手教程以及一個可用擴展的列表。

獲取Piral

如果你正在考慮採用微前端,那麼Piral可能很適合你。它只需很少的基礎架構即可工作,而且可以為用戶帶來很大的價值。 Piral旨在提供一流的開發體驗,包括漸進採用的能力(例如,從現有應用程序開始——先做好加載Pilet的功能,再開始開發Pilet)。

還可以通過選擇“轉換器”(例如Angular和Vue)來進行多種現有技術或傳統技術的移植。所有官方擴展(包括轉換器)的最新列表可在我們的文檔頁面上訪問(https://docs.piral.io/reference/extensions)。

我們期盼得到你的反饋! 🍻

原文鏈接

https://dev.to/florianrappl/microfrontends-based-on-react-4oo9