[book] 決戰!微前端架構(Micro Frontends in Action)
資料來源
Micro Frontends in Action by Michael Geers @ Book / GitHub
微前端的概念
微前端不是一個實際技術,而是一種新的組織及架構方法 — Micro Frontends in Action。
微前端的重要原則
- 每一個團隊都應該使用描述性的隊名,能夠清楚描述這個團隊對使用者的用途,例如,促銷團隊、結帳團隊、註冊團隊
- 各團隊能獨立進行開發、測試和部署
- 獨立開發:各個微前端團隊間要盡可能不要產生耦合;把注意力放在真正會對使用者造成衝擊的瓶頸上,而不是一昧的砍掉重複的程式碼
- 獨立部署:微前端團隊應該要能在不須與其他團隊協調的情況下更新資源檔案(assets)
- 團隊間的契約:微前端個體的開發團隊必須要能夠確定,其他團隊能正確引用他們的檔案
- 追求高效能的架構設計是打從一開始就列為高優先,而不是事後才想到的問題。
思考
問問自己,模組和模組之間要隔離到什麼程度才能算是符合微前端的原則?能夠獨立升級套用不同的框架版本?或者問問?為什麼不要建立一個大的 React App,由不同團隊維護同一專案中的不同塊程式碼就好?
前端整合
前端整合的三大面向:
-
路由與轉頁:把不同微前端的專案連結在同一個網站下
- 硬導覽:使用超連接
- 軟導覽:使用 App Shell
-
區塊組合:把不同微前端的專案拼接在一個頁面中
-
伺服器端整合
- Nginx SSI
- 在 Server App(例如,express)中做整合
-
客戶端整合:Web Component
-
iframe:提供最佳的技術分離,但運用大量的 iframe 會相當消耗資源
-
Ajax
-
-
區塊溝通
- 使用 query string:用在跨頁面間的資料傳遞
- 使用 attributes(類似 props):用在主要頁面傳入區塊元件
- 使用 custom event:用在區塊元件傳入主要頁面
- 使用 broadcast channel API:用在區塊元件傳到區塊元件
- 使用 window.postMessage:用在 iFrame