【前端架構】微前端架構設計

一、微前端

1. 微前端架構

   1. 應用自治

   2. 單一職責

   3. 技術棧無關

2. 爲什麼需要微前端

   1. 遺留系統遷移

   2. 後端解耦，前端聚合

   3. 熱鬧驅動開發

二、微前端的技術拆分方式

1. 路由分發式：通過HTTP服務器的反向代理功能，將請求路由映射到對應的應用上

2. 前端微服務化：在不同的框架之上設計通信和加載機制，以在一個頁面內加載對應的應用

3. 微應用：通過軟件工程的方式，在部署構建環境中，把多個獨立的應用組合成一個單體應用

4. 微件化：開發一個新的構建系統，將部分業務功能構建成一個獨立的chunk代碼，使用時只需要遠程加載即可

5. 前端容器化：將iframe作爲容器來容納其它前端應用

6. 應用組件化：藉助於Web Components技術，來構建跨框架的前端應用

三、微前端的業務劃分方式

1. 按照業務拆分

2. 按照權限拆分

3. 按照變更的頻率拆分

4. 按照組織結構拆分

5. 跟隨後端微服務拆分

6. 按照領域拆分

四、微前端的架構設計

1. 組件與模式庫

   1. 樣式

      1. 組件級樣式

      2. 應用級樣式

      3. 系統級樣式

   2. 業務組件及共享庫

2. 應用通信機制

   1. 同級通信

      1. 通過全局的自定義事件

      2. 通過共享Window

   2. 父子級通信

      1. 通過PostMessage在父子窗口之間進行通信

      2. 通過parent.window尋找到父窗口，再發出全局的自定義事件

      3. 當其他應用加載時，將消息發送給父窗口，由父窗口發出自定義事件

      4. 當其他應用未加載時，先將消息傳遞給父窗口，再由父窗口進行存儲，提供一個獲取通信的機制

3. 數據共享機制

   1. URI參數傳遞

   2. 使用LocalStorage共享數據

   3. 其他客戶端存儲，如IndexedDB、Web SQL等

   4. 服務端存儲客戶端狀態，可以採用JSON格式存儲

4. 專用的構建系統

五、微前端的架構模式

1. 基座模式：通過一個主應用來管理其他應用，設計難度小，方便實踐，但是通用度低

2. 自組織模式：應用之間是平等的，不存在相互管理的模式，設計難度大，不方便實施，但是通用度高

六、微前端的設計理念

1. 中心化：應用註冊表

2. 標誌化應用

3. 生命週期

   1. 加載應用

   2. 運行應用

   3. 卸載應用

4. 高內聚，低耦合

七、“微”害架構

1. 微架構

   1. 後端拆分

   2. App拆分

   3. 前端拆分

2. 架構的演進

   1. 快速實現想法

   2. 添加越來越多的功能，應用變得臃腫

   3. 添加新功能的難度越來越大，引出微服務架構

3. 微架構帶來的問題

   1. 後端：微服務到應用

      1. 代碼架構

      2. 部署流程

   2. 客戶端

      1. 插件化

      2. 組件化

4. 解決方式：可拆分式微架構

 

---

 

推薦閱讀

1. 上篇：【前端架構】前後端分離架構設計

參考資料

1. 《前端架構：從入門到微前端》

微信公衆號“前端那些事兒”