DDD領域驅動設計五、微服務後前端如何設計

文章目錄

• 一、微前端的引入
• 二、微前端的內建方式
• • 1、微前端與前端首頁面的內建
  • 2、通用共享業務單元
  • 3、團隊職責
• 三、微前端的優勢
• • 1、前端內建簡單
  • 2、項目職責專一
  • 3、隔離和依賴性
  • 4、降低溝通和測試成本
  • 5、更靈活地釋出
  • 6、降低技術敏感性
  • 7、高度複用性

一、微前端的引入

現在企業微服務架構都是采用前後端分離的設計方式，後端也是通過微服務把項目拆分為多個小服務并獨立部署。那麼前端就要應對很多的後端服務，就有很多的api要管理，容易混亂，需要很高的溝通成本和技術要求。當服務出現變更的時候就要通知所有受影響的團隊，需要較高的溝通成本。

微前端的引入很好的解決了以上的問題。

在前端設計時我們需要遵循單一職責和複用原則，按照領域模型和微服務邊界，将前端頁面進行拆分。同時建構多個可以獨立部署、完全自治、松耦合的頁面組合 ，其中每個組合隻負責特定業務單元的 UI 元素和功能，這些頁面組合就是微前端。

微前端和後端微服務的類似，都可以按照一定的規則拆分，重組，并可以獨立開發、測試、部署、運維，以适應業務的快速變化和多團隊平行開發的要求。

二、微前端的內建方式

我們看一下下面這個圖，微前端位于前端首頁面和微服務之間，它需要與兩者完成內建。

1、微前端與前端首頁面的內建

前端首頁面是企業級的前端頁面，微前端是業務單元的前端頁面。微前端通過首頁面的微前端加載器，利用頁面路由和動态加載等技術，将特定業務單元的微前端頁面動态加載到前端首頁面，實作前端首頁面與微前端頁面的“拼圖式”內建。

微前端完成開發、內建和部署後，在前端首頁面完成微前端注冊以及頁面路由配置，即可實作動态加載微前端頁面。

前端首頁面類似門戶，包括頁面導航以及部分通用的常駐首頁面的共享頁面，比如購物車。前端首頁面和所有微前端應統一界面風格，符合統一的前端內建規範。按照正确的業務邏輯和規則，動态加載不同業務單元的微前端頁面。前端首頁面作為一個整體，協調核心和通用業務單元的微前端頁面，完成業務操作和業務流程。

2、通用共享業務單元

一個微前端與一個或多個通用中台微服務組合為通用共享業務單元。通用共享微前端以共享頁面的方式與其它微前端頁面協作，完成業務流程。很多通用中台微服務的微前端是共享的，比如訂單和支付等微服務對應的訂單和支付微前端界面。

所有業務單元的功能都應該自包含，業務單元之間的邊界清晰。業務單元之間要避免功能交叉而出現耦合，一旦出現就會影響項目團隊職責邊界，進而影響到業務單元獨立開發、測試、部署和運維等。

雖然後端有很多業務單元在支援，但使用者所有的頁面操作和流轉是在一個前端首頁面完成的。在進行全險種的訂單化銷售時，使用者始終感覺是在操作一個系統。這種設計方式很好地展現了前端的融合和中台的解耦。

3、團隊職責

采用這種設計模式可以把前端分為前端項目團隊和業務單元團隊。

前端項目團隊隻需要完成企業級前端首頁面與業務單元的融合，前端隻關注前端首頁面與微前端頁面之間的內建。這樣就可以降低前端團隊的技術敏感度、團隊的溝通成本和內建複雜度，提高傳遞效率和使用者體驗。

業務單元團隊關注業務單元功能的完整性和自包含能力，完成業務單元内微服務和微前端開發、內建和部署，提供業務單元元件。這樣，業務單元的微前端與微服務的內建就會由一個中台團隊完成，熟悉的人幹熟悉的事情，可以降低內建過程中的溝通和技術成本，加快開發效率。

三、微前端的優勢

1、前端內建簡單

前端項目隻需關注前端內建首頁面與微前端的內建，實作子產品化內建和拼圖式的開發，降低前端內建的複雜度和成本。

2、項目職責專一

中台項目從資料庫、中台微服務到微前端界面，端到端地完成領域邏輯功能開發，以業務元件的方式整體提供服務。在業務單元内，由團隊自己完成前後端內建，可以降低開發和內建團隊的溝通成本和內建複雜度。

3、隔離和依賴性

業務單元在代碼、邏輯和實體邊界都是隔離的，可降低應用之間的依賴性。出現問題時可快速定位和修複，問題可以控制在一個業務單元内。業務單元之間互相無影響。

4、降低溝通和測試成本

中台團隊實作從微前端頁面到中台微服務的業務單元邏輯，實作業務單元的開發、測試、內建和部署的全流程和全生命周期管理，降低前後端內建的測試和溝通成本。

5、更靈活地釋出

業務單元之間有很好的隔離性和依賴性低，業務單元的變化都可以被控制在業務單元内。項目團隊可以獨立按照自己的步調進行疊代開發，實作更快的釋出周期。版本釋出時不會影響其它業務單元的正常運作。

6、降低技術敏感性

前端項目關注前端首頁面與微前端的內建。降低了前端項目團隊對中台微服務技術的敏感性。中台項目團隊可以更獨立地嘗試新技術和架構，實作架構的演進。

7、高度複用性

微前端和中台微服務都有高度的複用性。微前端可快速加載到多個 APP，還可以将一個微前端直接釋出為 APP 或微信小程式，實作靈活的前端組合、複用和快速釋出。