[原文地址](https://martinfowler.com/articles/micro-frontends.html)

好的前端開發很難。 擴充套件前端開發，讓多個團隊可以同時開發一個大型複雜的產品就更難了。在本文中，我們將描述將前端單體分解成許多更小、更易於管理的部分的最新趨勢，以及這種架構如何提高處理前端程式碼的團隊的效率和效率。 除了討論各種好處和成本外，我們還將介紹一些可用的實現選項，我們將深入研究演示該技術的完整示例應用程式。

近年來，微服務大受歡迎，許多組織使用這種架構風格來避免大型單體後端的侷限性。雖然關於這種構建伺服器端軟體的風格已經寫了很多，但許多公司仍在與單體前端程式碼庫作鬥爭。

也許您想構建一個漸進式或響應式 Web 應用程式，但找不到一個簡單的地方來開始將這些功能整合到現有程式碼中。也許您想開始使用新的 JavaScript 語言功能（或可以編譯為 JavaScript 的無數語言之一），但您無法將必要的構建工具放入現有的構建過程中。或者，也許您只是想擴充套件您的開發，以便多個團隊可以同時處理單個產品，但現有單體的耦合性和複雜性意味著每個人都在互相踩踏。這些都是真正的問題，都會對您有效地為客戶提供高質量體驗的能力產生負面影響。

最近，我們看到越來越多的人關注複雜的現代 Web 開發所需的整體架構和組織結構。特別是，我們看到出現了將前端單體分解為更小、更簡單的塊的模式，這些塊可以獨立開發、測試和部署，同時仍然作為一個單一的有凝聚力的產品出現在客戶面前。我們稱這種技術為微前端，我們將其定義為：

> 一種架構風格，其中可獨立交付的前端應用程式組合成一個更大的整體。

我們從微前端看到的一些主要好處是：

* 更小、更有凝聚力和可維護的程式碼庫
* 具有解耦、自治團隊的更具可擴充套件性的組織
* 能夠以比以前更多的增量方式升級、更新甚至重寫前端的某些部分
* 這些突出優勢與微服務可以提供的優勢相同，這並非巧合。

當然，在軟體架構方面沒有免費的午餐——一切都是有代價的。一些微前端實現可能導致依賴項重複，增加使用者必須下載的位元組數。此外，團隊自主性的急劇增加可能導致團隊工作方式支離破碎。儘管如此，我們相信這些風險是可以管理的，而且微前端的好處往往大於成本。

# 收益

我們不是根據特定的技術方法或實現細節來定義微前端，而是強調出現的屬性及其帶來的好處。

## 增量升級

對於許多組織來說，這是他們微前端之旅的開始。舊的、大型的前端單體被過去的技術堆疊或在交付壓力下編寫的程式碼所阻礙，並且已經到了完全重寫很誘人的地步。為了避免完全重寫的危險，我們更願意逐個扼殺舊的應用程式，同時繼續向我們的客戶提供新功能，而不會被單體應用拖累。

這通常會導致微前端架構。一旦一個團隊獲得了在對舊世界幾乎沒有修改的情況下將功能一路投入生產的經驗，其他團隊也將希望加入新世界。現有的程式碼仍然需要維護，在某些情況下，繼續向其新增新功能可能是有意義的，但現在可以選擇。

最終結果是，我們獲得了更多的自由，可以對產品的各個部分進行逐案決策，並對我們的架構、依賴項和使用者體驗進行增量升級。如果我們的主框架發生重大突破性變化，每個微前端都可以在有意義的時候升級，而不是被迫停止世界並立即升級所有內容。如果我們想嘗試新技術或新的互動模式，我們可以以比以前更加孤立的方式進行。

## 簡單、解耦的程式碼庫

根據定義，每個單獨的微前端的原始碼將比單個單體前端的原始碼小得多。這些較小的程式碼庫對於開發人員來說往往更簡單、更容易使用。特別是，我們避免了不應該相互瞭解的元件之間無意和不適當的耦合所帶來的複雜性。透過在應用程式的有界上下文周圍繪製更粗的線，我們使這種意外耦合更難出現。

當然，單一的、高層次的架構決策（即“讓我們做微前端”）並不能替代良好的老式乾淨程式碼。我們並沒有試圖讓自己免於考慮我們的程式碼並努力提高其質量。相反，我們試圖讓錯誤的決定變得困難，而好的決定變得容易，從而使自己陷入成功的陷阱。例如，跨有界上下文共享域模型變得更加困難，因此開發人員不太可能這樣做。類似地，微前端促使您明確和深思熟慮地瞭解資料和事件如何在應用程式的不同部分之間流動，無論如何我們都應該這樣做！

## 獨立部署

與微服務一樣，微前端的獨立部署能力是關鍵。這會縮小任何給定部署的範圍，從而降低相關風險。 無論您的前端程式碼以何種方式或在哪裡託管，每個微前端都應該有自己的持續交付管道，用於構建、測試和部署它一直到生產。我們應該能夠在不考慮其他程式碼庫或管道的當前狀態的情況下部署每個微前端。

舊的單體應用是否處於固定的、手動的、每季度的釋出週期，或者隔壁的團隊是否將一個半完成或損壞的功能推送到他們的主分支中都無關緊要。

如果給定的微前端準備投入生產，它應該能夠這樣做，並且該決定應該由構建和維護它的團隊決定。

![](https://img-blog.csdnimg.cn/img_convert/d883f6e82ddd2b363615cac15dcfb800.png)

# 自治團隊

作為將我們的程式碼庫和我們的釋出週期解耦的更高層次的好處，我們在擁有完全獨立的團隊方面還有很長的路要走，他們可以擁有一個產品的一部分，從構思到生產再到更遠。 團隊可以完全擁有為客戶提供價值所需的一切，這使他們能夠快速有效地行動。 為此，我們的團隊需要圍繞業務功能的垂直切片組建，而不是圍繞技術能力。 一種簡單的方法是根據終端使用者將看到的內容劃分產品，因此每個微前端封裝應用程式的單個頁面，並由單個團隊端到端擁有。 與圍繞技術或“橫向”問題（如樣式、表單或驗證）組建團隊相比，這為團隊工作帶來了更高的凝聚力。

![](https://img-blog.csdnimg.cn/img_convert/0617d8c7e38f5d7cacaaba7335088006.png)

# 總結

簡而言之，微前端就是將大而可怕的東西切成更小、更易於管理的部分，然後明確它們之間的依賴關係。 我們的技術選擇、我們的程式碼庫、我們的團隊和我們的釋出流程都應該能夠彼此獨立地執行和發展，而無需過度協調。

微前端概述(Micro Frontends) 以及相比單體應用，微前端能帶來什麼好處

相關文章