前言

2016 年 12 月初，我第一次去東京。第一次只去了一周，但在后來(lái)的幾周里又去了好幾次。我仍然清楚地記得在倫敦希思羅機(jī)場(chǎng)即將登機(jī)時(shí)的情形。我心里琢磨著要在馬上到來(lái)的 12 小時(shí)的飛行途中做些什么。在此之前，我已經(jīng)在世界的另一端待過(guò)幾個(gè)星期了：先是在舊金山灣區(qū)參加會(huì)議，然后去拉斯維加斯參加了一個(gè)活動(dòng)。

當(dāng)時(shí)我正在做一個(gè)類(lèi)似于 Netflix 的 OTT（over-the-top）平臺(tái)，專(zhuān)門(mén)針對(duì)體育內(nèi)容。里面有每日直播和點(diǎn)播內(nèi)容，支持在多個(gè)國(guó)家和 30 多種終端播放，包括網(wǎng)頁(yè)、手機(jī)、游戲機(jī)、機(jī)頂盒和智能電視等。當(dāng)時(shí)快到年底了，作為一名軟件架構(gòu)師，我必須提出一個(gè)新的架構(gòu)，使公司能夠在不同地點(diǎn)部署數(shù)百名開(kāi)發(fā)人員，同時(shí)不能降低（甚至要提升）交付量。

在飛機(jī)上坐好后，我逐漸靜下心來(lái)。我還沒(méi)從拉斯維加斯之行的疲憊中解脫出來(lái)，而且一想到還要在飛機(jī)上度過(guò) 12 小時(shí)，我就有些煩悶。但是，由于是第一次去日本，因此我感到很興奮。幾分鐘后，我點(diǎn)了這次飛行中的第一杯香檳。這也是我第一次坐公務(wù)艙，座位非常舒適，工作空間也很大。

起飛一小時(shí)后，我從背包里拿出筆記本計(jì)算機(jī)，開(kāi)始執(zhí)行我的“大計(jì)劃”。我有超過(guò) 10 小時(shí)的飛行時(shí)間來(lái)處理這個(gè)將服務(wù)于全球數(shù)百萬(wàn)客戶(hù)的龐大項(xiàng)目。當(dāng)時(shí)我并不知道，接下來(lái)的幾小時(shí)會(huì)徹底改變我對(duì)前端跨平臺(tái)應(yīng)用的架構(gòu)方式。

在本書(shū)中，我想分享自己在微前端世界里的經(jīng)歷、構(gòu)建和運(yùn)行一個(gè)穩(wěn)定的微前端項(xiàng)目的所有經(jīng)驗(yàn)和技巧，以及微前端的優(yōu)點(diǎn)和缺點(diǎn)。我希望這些內(nèi)容能夠幫助你評(píng)估正在進(jìn)行的項(xiàng)目或者未來(lái)的項(xiàng)目是否適合采用微前端。

讓我們現(xiàn)在啟程吧！

我為什么寫(xiě)作本書(shū)

我從 2015 年開(kāi)始思考微前端。在之后的幾年里，我有幸在一個(gè)由多地團(tuán)隊(duì)組成、有著數(shù)百名開(kāi)發(fā)人員的大型組織中采用微前端，并向人們解釋它的優(yōu)缺點(diǎn)。我還在會(huì)議、在線(xiàn)研討會(huì)和聚會(huì)上分享我的微前端經(jīng)驗(yàn)。通過(guò)這些方式，我有機(jī)會(huì)深入社區(qū)，傾聽(tīng)開(kāi)發(fā)人員的故事，回答他們的問(wèn)題，并與以不同方式采用微前端的各種公司交流。

最近，我向世界各地的公司推薦了本書(shū)中的一些做法。這些公司來(lái)自澳大利亞和北美的一些國(guó)家和地區(qū)。我在微前端的設(shè)計(jì)和實(shí)現(xiàn)階段遇到了很多挑戰(zhàn)，我將所有的收獲都匯集到了本書(shū)中。

本書(shū)代表了我對(duì)微前端的研究、相關(guān)經(jīng)驗(yàn)以及在幾年的“實(shí)戰(zhàn)”中積累的經(jīng)驗(yàn)和見(jiàn)解。我想向你分享真實(shí)的例子，并和你討論關(guān)于微前端的關(guān)鍵話(huà)題。不過(guò)，請(qǐng)不要期待能在本書(shū)中找到大量的代碼，因?yàn)楸緯?shū)的重點(diǎn)是我在實(shí)踐微前端的過(guò)程中學(xué)習(xí)到的架構(gòu)、思想模式和方法論。依我拙見(jiàn)，在實(shí)現(xiàn)一個(gè)架構(gòu)時(shí)，應(yīng)該關(guān)注多種方式，了解它們的優(yōu)缺點(diǎn)，而不是只會(huì)使用其中一種方式。盡管微前端在未來(lái)的幾年里會(huì)不斷演進(jìn)，但本書(shū)仍然適合每一個(gè)有興趣全面學(xué)習(xí)如何實(shí)踐微前端架構(gòu)風(fēng)格的人。正如指引方向的北極星一樣，本書(shū)將指導(dǎo)你創(chuàng)建成功的微前端項(xiàng)目。

誰(shuí)適合閱讀本書(shū)

本書(shū)是為那些希望擴(kuò)展組織和前端應(yīng)用的開(kāi)發(fā)人員、架構(gòu)師和首席技術(shù)官編寫(xiě)的。它是思想模式和經(jīng)驗(yàn)的集合，對(duì)任何實(shí)現(xiàn)方式的微前端都有參考意義。在本書(shū)中，你可以找到迄今為止出現(xiàn)的每一種微前端的實(shí)現(xiàn)原則和解決方案。遵循這些最佳實(shí)踐，你將能夠按照正確的思路實(shí)現(xiàn)微前端項(xiàng)目，并應(yīng)對(duì)團(tuán)隊(duì)在開(kāi)發(fā)微前端項(xiàng)目的過(guò)程中所面臨的共同挑戰(zhàn)。

本書(shū)涵蓋了技術(shù)架構(gòu)、實(shí)現(xiàn)方式等方方面面的微前端知識(shí)，涉及從設(shè)計(jì)階段一直到如何組織團(tuán)隊(duì)將現(xiàn)有項(xiàng)目遷移到微前端，或是開(kāi)發(fā)全新的微前端項(xiàng)目。

本書(shū)結(jié)構(gòu)

本書(shū)的每一章都有一個(gè)特定的主題，相互之間沒(méi)有太多聯(lián)系，因此你可以從某一章直接跳到任何一章。當(dāng)然，閱讀本書(shū)的最佳方式還是按順序閱讀。本書(shū)也可作為工作時(shí)的參考書(shū)，所以如果你只對(duì)特定的主題感興趣，那么直接跳到對(duì)應(yīng)的章節(jié)即可。

本書(shū)涵蓋以下內(nèi)容。

第 1 章　前端概覽

　　這一章將闡述選擇微前端的思考過(guò)程，并概述不同的前端架構(gòu)。

第 2 章　微前端原則

　　這一章將分析微服務(wù)背后的原則以及這些原則是如何適用于前端開(kāi)發(fā)的，重點(diǎn)是深入探究實(shí)現(xiàn)微前端的指導(dǎo)原則。

第 3 章　微前端的架構(gòu)和挑戰(zhàn)

　　這一章是理解微前端的重要“基石”，它將介紹微前端決策框架的四個(gè)關(guān)鍵點(diǎn)：定義、組合、路由和通信。一旦確定了這四個(gè)關(guān)鍵點(diǎn)，我們就可以很容易地從任何維度來(lái)設(shè)計(jì)系統(tǒng)的其余部分，比如自動(dòng)化策略、設(shè)計(jì)系統(tǒng)等。

第 4 章　探索微前端架構(gòu)

　　微前端有很多實(shí)現(xiàn)方式，這一章將探究所有的微前端實(shí)現(xiàn)。我將對(duì)各種微前端實(shí)現(xiàn)的優(yōu)缺點(diǎn)進(jìn)行分類(lèi)和分析。更重要的是，我將為所介紹的每種實(shí)現(xiàn)找到合適的使用場(chǎng)景。

第 5 章　微前端技術(shù)實(shí)現(xiàn)

　　在第 4 章的架構(gòu)分析之后，我們將利用所學(xué)的知識(shí)實(shí)現(xiàn)一個(gè)微前端項(xiàng)目，其使用的微前端架構(gòu)將符合所闡述的決策框架。

第 6 章　構(gòu)建和部署微前端

　　這一章將涵蓋為微前端創(chuàng)建成功的自動(dòng)化策略的原則和最佳實(shí)踐。具體來(lái)說(shuō)，我們將了解不同的代碼倉(cāng)庫(kù)策略、持續(xù)集成流水線(xiàn)的關(guān)鍵步驟以及如何在生產(chǎn)環(huán)境中交付微前端。

第 7 章　案例分析：微前端自動(dòng)化流水線(xiàn)

　　這一章將探討一個(gè)微前端自動(dòng)化策略的實(shí)例，其中的見(jiàn)解都來(lái)自實(shí)際工作，可以立即應(yīng)用于現(xiàn)有的自動(dòng)化流水線(xiàn)。

第 8 章　微前端的后端模式

　　這一章將涵蓋微前端與單體 API 層或微服務(wù)集成的不同模式，包括 BFF（服務(wù)于前端的后端）、API 網(wǎng)關(guān)、服務(wù)字典，以及相應(yīng)的實(shí)例和最佳實(shí)踐。

第 9 章　案例分析：從單體架構(gòu)到微前端

　　這一章將分析一個(gè)潛在的用例，呈現(xiàn)傳統(tǒng)的前端應(yīng)用遷移到微前端的過(guò)程，探討 ACME

公司的團(tuán)隊(duì)向前端分布式架構(gòu)遷移的方法以及他們?yōu)閷?shí)現(xiàn)目標(biāo)做出了哪些決策。

第 10 章　在組織中引入微前端

　　這一章的重點(diǎn)是組織，這也是本書(shū)的最后一章。架構(gòu)不僅能指導(dǎo)技術(shù)實(shí)現(xiàn)，更重要的是，它是幫助你的團(tuán)隊(duì)取得成功的機(jī)制。

附錄　社區(qū)對(duì)微前端的看法

　　微前端社區(qū)里有很多值得分享的故事和經(jīng)驗(yàn)。附錄收集了開(kāi)發(fā)過(guò)很多微前端項(xiàng)目的專(zhuān)業(yè)人士的優(yōu)秀經(jīng)驗(yàn)和重要建議。

排版約定

本書(shū)使用下列排版約定。

● 黑體字

表示新術(shù)語(yǔ)或重點(diǎn)強(qiáng)調(diào)的內(nèi)容。

 

● 等寬字體（constant width）

表示程序片段，以及正文中出現(xiàn)的變量名、函數(shù)名和數(shù)據(jù)類(lèi)型。

 

● 等寬粗體（constant width bold）

表示應(yīng)該由用戶(hù)輸入的命令或其他文本。

 

● 等寬斜體（constant width italic）

表示應(yīng)該由用戶(hù)輸入的值或根據(jù)上下文確定的值替換的文本。

　該圖標(biāo)表示提示或建議。

　該圖標(biāo)表示一般性注記。

O'Reilly 在線(xiàn)學(xué)習(xí)平臺(tái)（O'Reilly Online Learning）

40 多年來(lái)，O'Reilly Media 致力于提供技術(shù)和商業(yè)培訓(xùn)、知識(shí)和卓越見(jiàn)解，來(lái)幫助眾多公司取得成功。

我們擁有由專(zhuān)家和創(chuàng)新者組成的龐大網(wǎng)絡(luò)，他們通過(guò)圖書(shū)、文章和我們的在線(xiàn)學(xué)習(xí)平臺(tái)分享他們的知識(shí)和經(jīng)驗(yàn)。O'Reilly 在線(xiàn)學(xué)習(xí)平臺(tái)讓你能夠按需訪問(wèn)現(xiàn)場(chǎng)培訓(xùn)課程、深入的學(xué)習(xí)路徑、交互式編程環(huán)境，以及 O'Reilly 和 200 多家其他出版商提供的大量文本資源和視頻資源。更多信息，請(qǐng)?jiān)L問(wèn) http://oreilly.com。

聯(lián)系我們

請(qǐng)把對(duì)本書(shū)的評(píng)價(jià)和問(wèn)題發(fā)給出版社。

美國(guó)：

　　O'Reilly Media, Inc.

　　1005 Gravenstein Highway North

　　Sebastopol, CA 95472

中國(guó)：

　　北京市西城區(qū)西直門(mén)南大街 2 號(hào)成銘大廈 C 座 807 室（100035）

　　奧萊利技術(shù)咨詢(xún)（北京）有限公司

請(qǐng)?jiān)L問(wèn) https://www.oreilly.com/library/view/building-micro-frontends/9781492082989/，以查看相關(guān)勘誤。1

1本書(shū)中文版勘誤請(qǐng)到圖靈社區(qū)本書(shū)主頁(yè)查看和提交。——編者注

對(duì)于本書(shū)的評(píng)論和技術(shù)性問(wèn)題，請(qǐng)發(fā)送電子郵件到：errata@oreilly.com.cn。

要了解更多 O'Reilly 圖書(shū)和培訓(xùn)課程等信息，請(qǐng)?jiān)L問(wèn)以下網(wǎng)站：http://oreilly.com。

我們?cè)?Facebook 的地址如下：http://facebook.com/oreilly。

請(qǐng)關(guān)注我們的 Twitter 動(dòng)態(tài)：http://twitter.com/oreillymedia。

我們的 YouTube 視頻地址如下：http://www.youtube.com/oreillymedia。

致謝

首先，我要感謝我的家人，包括我的女朋友 Maela 和我的女兒，感謝家人所做的一切，讓我獲得了每天更進(jìn)一步的力量。感謝所有一直以來(lái)用各種方式鼓勵(lì)我的人。

非常感謝體育流媒體平臺(tái) DAZN 背后的團(tuán)隊(duì)，是他們相信我的想法和判斷，鼓勵(lì)我全面應(yīng)用微前端并深入探索它的益處。

感謝出版商 O'Reilly Media 讓我有機(jī)會(huì)寫(xiě)一本關(guān)于微前端的書(shū)，尤其感謝 Jennifer Pollock 和 Angela Rufino 在我這幾個(gè)月的寫(xiě)作過(guò)程中提供的所有支持，她們?yōu)楦倪M(jìn)本書(shū)提供了持續(xù)不斷的反饋。我還要感謝出色的編輯 Erin Brenner，她花了相當(dāng)多的時(shí)間來(lái)梳理我的想法，并把它們解讀成你即將閱讀的內(nèi)容。

感謝我的“虛擬導(dǎo)師”Neal Ford，我稱(chēng)他為“架構(gòu)師”，因?yàn)樗闹R(shí)令人難以置信。他還禮貌地同意了為本書(shū)寫(xiě)序。

最后，感謝所有審閱書(shū)稿并提供改進(jìn)建議的人們，感謝所有參加過(guò)我的講座和研討會(huì)的人們。我希望本書(shū)恰當(dāng)?shù)爻尸F(xiàn)了他們所分享的經(jīng)驗(yàn)和挑戰(zhàn)。

更多信息

掃描下方二維碼，即可獲取電子書(shū)相關(guān)信息及讀者群通道入口。