介紹 AWS 微前端架構指南

前陣子 AWS 的前端架構團隊，釋出了《AWS Prescriptive Guidance: Understanding and implementing microfrontends on AWS》指南 (連結)，談了一些微前端的架構與實務技術考量，在本篇文章將為大家摘要其中設計理念區塊的重點。

微前端架構

微前端是一種目前業界相當流行的前端架構，這個架構模式的重點是「微」，而這個「微」是借鏡於微服務 (micro-service) 的架構模式。就像是微服務會把原本單體 (monolith) 拆成多個微小的服務，微前端也是採用類似的形式。

微前端架構把前端拆解成多個不同的應用程式，每個前端應用程式都可以獨立開發、獨立部署。當把前端拆成多個不同應用程式後，商業邏輯也能夠被封裝，進而減少彼此的相互依賴。

當採用微前端的架構，團隊能獲得以下的好處：

• 開發者的自主性提升：在微前端架構下，因為商業邏輯被封裝在子應用中，只要是不涉及主應用的部分，子應用可以自己決定實作細節，想怎麼開發就怎麼開發 (例如這個子應用選 React，另一個覺得更適合用 Vue，兩邊可以獨立選擇)
• 部署能夠獨立進行：當某個子應用要更新時，版本控制、建構、部屬都能獨立，交付功能的迭代速度因而獲得提升
• 故障隔離：當某個子應用出問題時，可以確保問題的影響範圍，會限縮在該子應用中，只要不是涉及主應用的錯誤，都不會影響到其他的子應用

啟發微服務的設計理念

前面提到，微前端的「微」是借鏡於微服務 (micro-service) 的架構模式。事實上，微前端不只借鏡於微服務架構。從技術設計的角度來看，微前端還受其他的設計理念啟發。

領域驅動設計 (domain-driven design)

第一個有借助的設計理念是領域驅動設計 (domain-driven design)，俗稱 DDD。

DDD 是由 Eric Evans 提出的一種設計理念。在該設計理念下，軟體開發應該是由商業驅動 (by business concern)，而不是由技術驅動 (not by technical concern)。 在商業驅動下，應用的領域劃分，會是以商業的需求來劃分。

具體來說，而在微前端的架構下，不同的子應用，會是用領域 (domain) 的角度來拆分。舉例來說，在電商的應用中，商品、訂單、支付、物流等不同的領域，會被拆成不同的子應用來維護。

對比來看，在單體前端 (monoliths) 的架構下，由於不同領域的程式碼，都會在同一個程式碼庫中，如果沒有特別細心地維護，很容易把不同程式碼寫得彼此耦合，導致可維護性大幅降低 (備註：雖然理論上可以避免，但在實務中，這是很常見到的問題)。

不過你可能會問，如果想把一個單體前端，拆成微前端，該如何拆呢? 在 AWS 團隊分享的指南中提到，可以從依賴的角度看，在拆分時，要讓分出來的子應用之間，彼此做到依賴最小化 (minimal dependencies)，所以如果在拆的時候，發現兩個子應用還彼此有依賴，那可能拆法就需要調整。

上面提到的依賴，是指彼此之間的依賴。但很可能這些不同的子應用，都需要共同用某個元件，這時從架構的角度，可以另外切分出工具 (widget) 來做到共用。在指南中有用下面這張圖視覺化呈現，可以看到兩個子應用都有用到 Map View (或說都依賴 Map View)，這時 Map View 元件應做為工具，由第三方團隊來開發與維護。

模組化 (modularization)

除了借助於 DDD，微前端還受模組化 (modularization) 的設計所啟發。還記得在 [微前端架構 — 微前端的技術細節] 一文中，我們有談到模組聯邦 (Module Federation)，並談到在微前端的架構下，我們可以把主應用當成本地模組，來消費不同的遠端模組，而這些遠端模組正是指不同的子應用。

模組化的概念，跟 DDD 的理念不謀而合。在 DDD 的框架下，系統中的每個子應用都是不同的模組，都專注於解決特定的商業領域 (意即某個子領域) 的問題，並在清楚界定好的範圍中獨立運作，不依賴於其他領域的模組。這種切分方法，讓整體架構更清楚，且更能對應到商業邏輯。

在這個概念下，微前端架構也更偏好盡可能做到不共享 (share nothing, where possible)。不同的子應用是獨立建構、獨立部署，換句話說可能兩個子應用有重複安裝某個兩邊都有用的套件，這雖然是種冗餘 (因為在單體架構下，只需用安裝一次，不用兩邊都安裝)，但這是微前端架構做的取捨。換句話說，雖然這樣有冗餘，但因為能讓不同模組獨立性提高、相互依賴減少，冗餘成為取捨下選擇接受的成本。

閱讀更多

如果你對為前端的架構、技術細節，以及更完整的 AWS 微前端指南摘要感興趣，我們在 E+ 當中有更完整的版本。

本文為 E+ 成長計畫的深度內容，截取前三分之一開放免費閱讀。歡迎加入 E+ 成長計畫閱讀完整版本 (點此了解 E+ 的詳細介紹)