Why micro-frontends?

寫在前面

上一篇 Micro Frontends 已經從概念定義及實現思路上探究了微前端是什麼，而要徹底理解微前端的話，還需要想清楚這些問題：

為什麼需要微前端？
微前端能解決什麼問題？組件化解決不了嗎？
微前端究竟帶來了什麼？多技術棧並存？統一的技術棧不好嗎？

一。背景：為什麼需要微前端？

從最初的 HTML 內聯腳本，到 9102 年的幾十萬行 JavaScript 代碼，前端已經變得越來越重：

幾個 G 的前端代碼庫
數百號前端開發人員
幾 MB 的 Bundle Size

也越來越複雜：

層出不窮的框架、類庫
各式各樣的工程化體系
別具特色的跨端實踐

因而需要一種分解複雜度、提升協作效率、支持靈活擴展的架構模式，於是，微前端登上了舞台

二。應用場景：微前端能解決什麼問題？

微前端的理念類似於微服務，將龐大的整體拆成可控的小塊，並明確它們之間的依賴關係。

通過拆分自治、支持多技術棧並存的方式，解決前端應用所面臨的種種問題：

業務模塊間日益加劇的耦合如何治理？
開發團隊如何拆分、解耦，才能達到並行開發的目的？
新框架、新方案如何適應現有的工程環境（構建工具等）？
舊的框架類庫如何平穩升級？

按業務功能將一整塊前端應用分解成一系列更小、更內聚的微前端應用，同時通過明確的交互協議來管理這些應用間的依賴關係，實現不同業務模塊的解耦。並將每個微前端應用交由獨立團隊負責，各自獨立開發獨立部署，充分利用並行性

另一方面，在多技術棧並存能力的加持下，不僅能夠低成本引入新的技術實踐，還允許低風險地替換產品局部功能，意味著依賴項升級、架構更替、UI 改版等重大決策都能以循序漸進的方式平穩落地：

分解：將應用拆分成由一系列小型應用（子應用）組成的應用
替換：替換子應用
組合：確保替換過的能夠和諧工作

通過微前端框架建立應用間的主從關係（1 個容器應用 + n 個子應用），接著進行局部替換，直至全部完成。然而，實踐中通常需要在重構的同時保證新特性的持續迭代，所以實際流程可能是：

抽象：增加一層主從關係，比如通過前端路由來控制
擴展：新增子應用
組合：原應用直接作為一整個子應用，帶著新特性（新增的子應用）上線
重構：（時間上能與擴展並進）分解、替換原應用

讓重構等工作能夠在相對較長的時間跨度下可控地漸進完成，而無需承擔一刀切的資源需求與變更風險

組件化解決不了嗎？

The problems they're supposed to solve sound to me like they're already solved by a good component model. So is this solving an organizational issue rather than technical one? Such as if two teams can't agree on anything, even shared infra.

（摘自 I don't understand micro-frontends.）

誠然，組件化也能實現拆分自治，比如在 React 中可以通過 React.lazy + Suspense 的方式優雅地完成代碼拆分

但這建立在組件模型統一（或者說技術棧一致）的前提下，而微前端的另一半優勢在於能夠打破單一技術棧的限制：

They are microservices in the browser. Meaning separately built and deployed frontend apps that can choose their own framework and libs. The purpose is organizational scaling and avoiding framework lock-in.

這是組件化、模塊化等方案所無法滿足的。同樣的，git submodule、npm module 等拆分方案也都無法直接提供多技術棧並存的能力

三。意義：微前端究竟帶來了什麼？

工程價值

一半來自模塊化帶來的好處，諸如：

研發效率提升：多業務線並行開發，團隊自治，獨立迭代
交付成本降低：應用級功能複用
運維風險降低：變更範圍縮小

另一半來自多技術棧並存能力的好處：

技術選擇增多：不再與單一技術棧捆綁在一起，有助於新技術、新交互模式的實驗性試錯
可複用性增強：技術棧差異不再是功能複用的障礙，對於第三方模塊尤為重要
重構風險降低：低風險局部替換，漸進地完成大規模重構

當然，允許多技術棧並存，並不意味著鼓勵引入盡可能多的技術棧，因為更少的技術棧通常更有利於基礎設施建設、資源複用與經驗共享

商業價值

微前端視角下的 Web 應用是一系列獨立功能的組合：

The idea behind Micro Frontends is to think about a website or web app as a composition of features which are owned by independent teams.

（摘自 What are Micro Frontends?）

因此，微前端應用能夠像雲計算背景下的雲服務一樣能夠即取即用，實現應用模塊級（第三方）功能的接入/融合，其商業價值在於：

細粒度、可組合的前端產品形態：前端產品/能力能夠以更細粒度，更靈活的形態輸出（像雲服務一樣按需自由組合）
微前端應用生態：規範化的微前端應用能夠形成生態，進而產生類似於小程序的平台體系

參考資料

Micro Frontends
[I don't understand micro-frontends.](https://medium.com/ @lucamezzalira/i-dont-understand-micro-frontends-88f7304799a9)