本書聚焦微前端方方面面的知識、技巧、經(jīng)驗和實踐,幾乎涵蓋了迄今為止出現(xiàn)的每一種微前端的實現(xiàn)原則和解決方案。遵循這些最佳實踐,你能夠應(yīng)對在開發(fā)微前端項目的過程中所面臨的挑戰(zhàn),按照正確的思路完成微前端項目,實現(xiàn)組織目標。本書共10章,內(nèi)容豐富,條理清晰,主要包括微前端決策框架、微前端的實現(xiàn)方式、微前端的自動化策略、微前端的后端模式、從單體架構(gòu)到微前端的案例以及如何在組織中引入微前端等。
如今,Web應(yīng)用日益復(fù)雜。要化繁為簡,解決方案是什么?答案是微前端。微前端是受微服務(wù)啟發(fā)的一種新興架構(gòu),它將單體代碼庫分解成多個部分,以便多個相對獨立的團隊分工協(xié)作,從而提高項目的靈活性和團隊的整體效率。
本書凝結(jié)了作者的真知灼見和一手經(jīng)驗,既有原理闡述,又有案例分析。作者詳細闡釋了微前端的各種適用場景、不同微前端架構(gòu)的優(yōu)缺點、微前端決策框架,以及具體的方法和實踐。通過90余張示意圖,作者直觀地呈現(xiàn)了微前端的設(shè)計思路與實現(xiàn)技巧。書后附有作者與多位微前端技術(shù)先鋒的訪談實錄。
* 了解微服務(wù)原則如何應(yīng)用于前端開發(fā)
* 掌握微前端決策框架的四大關(guān)鍵要素
* 探究各種微前端實現(xiàn),分析不同架構(gòu)的優(yōu)缺點
* 學習微前端自動化策略和持續(xù)優(yōu)化微前端自動化流水線的實踐
* 理解微前端的后端模式,探究微前端如何與微服務(wù)或單體API層集成
* 洞悉傳統(tǒng)的前端應(yīng)用向微前端遷移的全過程
【作者簡介】
盧卡·梅扎利拉(Luca Mezzalira)是AWS的解決方案架構(gòu)師,擁有近20年的軟件開發(fā)和架構(gòu)經(jīng)驗。他曾任獨角獸公司DAZN的架構(gòu)副總裁,成功幫助DAZN在5年內(nèi)成為全球矚目的體育流媒體服務(wù)平臺。他講解和分享微前端架構(gòu)的視頻深受歡迎。
【譯者簡介】
KFive是百度App大前端團隊,成員涵蓋PC端和手機百度的大前端研發(fā)者。除業(yè)務(wù)支持外,KFive研究的技術(shù)方向還包括前端基礎(chǔ)架構(gòu)、跨端開發(fā)、Node.js、端智能和前端智能化等,并且積累了豐富的產(chǎn)出。KFive的名稱不僅來源于起初的辦公地點是在百度科技園5號樓,而且體現(xiàn)了其對軟件開發(fā)的理解,即“五Key”:Key1者,精益求精;Key2者,大巧不工;Key3者,獨運匠心;Key4者,百煉千錘;Key5者,善始善終。
第 1章 前端概覽 1
1.1 微前端應(yīng)用 1
1.2 單頁應(yīng)用 2
1.3 同構(gòu)應(yīng)用 4
1.4 靜態(tài)頁面網(wǎng)站 6
1.5 JAMStack 6
1.6 小結(jié) 7
第 2章 微前端原則 8
2.1 從單體到微服務(wù) 9
2.1.1 微服務(wù)遷移 10
2.1.2 引入微前端 12
2.2 微服務(wù)原則 13
2.2.1 圍繞業(yè)務(wù)領(lǐng)域建模 14
2.2.2 自動化文化 14
2.2.3 隱藏實現(xiàn)細節(jié) 14
2.2.4 分布式治理 15
2.2.5 獨立部署 15
2.2.6 故障隔離 15
2.2.7 高度可觀察性 15
2.3 在微前端中實踐這些原則 15
2.3.1 圍繞業(yè)務(wù)領(lǐng)域建模 15
2.3.2 自動化文化 16
2.3.3 隱藏實現(xiàn)細節(jié) 16
2.3.4 分布式治理 16
2.3.5 獨立部署 16
2.3.6 故障隔離 16
2.3.7 高度可觀察性 17
2.4 微前端不是萬能靈藥 17
2.5 小結(jié) 17
第3 章 微前端的架構(gòu)和挑戰(zhàn) 18
3.1 微前端決策框架 18
3.1.1 定義微前端 19
3.1.2 微前端的領(lǐng)域驅(qū)動設(shè)計 20
3.1.3 如何定義限界上下文 22
3.1.4 微前端組合 23
3.1.5 微前端路由 24
3.1.6 微前端通信 26
3.2 微前端實踐 28
3.2.1 Zalando 29
3.2.2 HelloFresh 29
3.2.3 AllegroTech 29
3.2.4 Spotify 29
3.2.5 SAP 30
3.2.6 OpenTable 30
3.2.7 DAZN 31
3.3 小結(jié) 31
第4 章 探索微前端架構(gòu) 32
4.1 微前端決策框架的應(yīng)用 32
4.1.1 縱向拆分 33
4.1.2 橫向拆分 34
4.2 架構(gòu)分析 35
4.3 縱向拆分的架構(gòu) 37
4.3.1 App shell 37
4.3.2 挑戰(zhàn) 39
4.3.3 實現(xiàn)一個設(shè)計系統(tǒng) 45
4.3.4 開發(fā)體驗 47
4.3.5 搜索引擎優(yōu)化 48
4.3.6 性能與微前端 49
4.3.7 可用的框架 51
4.3.8 用例 52
4.3.9 架構(gòu)特征 53
4.4 橫向拆分的架構(gòu) 54
4.4.1 客戶端組合 55
4.4.2 挑戰(zhàn) 58
4.4.3 搜索引擎優(yōu)化 65
4.4.4 開發(fā)體驗 65
4.4.5 用例 66
4.4.6 Module Federation 67
4.4.7 iframe 72
4.4.8 Web 組件 78
4.4.9 服務(wù)器端組合 81
4.4.10 邊緣側(cè)組合 89
4.5 小結(jié) 93
第5 章 微前端技術(shù)實現(xiàn) 94
5.1 項目背景 94
5.2 Module Federation入門 97
5.3 技術(shù)實現(xiàn) 98
5.3.1 項目結(jié)構(gòu) 99
5.3.2 App shell 100
5.3.3 身份認證微前端 106
5.3.4 目錄微前端 107
5.3.5 賬戶管理微前端 108
5.4 項目演變 112
5.4.1 嵌入舊版應(yīng)用 112
5.4.2 開發(fā)收銀臺功能 114
5.4.3 實現(xiàn)動態(tài)遠程容器 115
5.5 和webpack 捆綁 116
5.6 小結(jié) 116
第6 章 構(gòu)建和部署微前端 117
6.1 自動化原理 118
6.1.1 反饋周期盡可能短 118
6.1.2 持續(xù)迭代 119
6.1.3 給團隊賦能 120
6.1.4 定義圍欄 120
6.1.5 可靠的測試策略 121
6.2 開發(fā)體驗 121
6.2.1 橫向拆分和縱向拆分 122
6.2.2 微前端腳手架 122
6.2.3 環(huán)境策略 123
6.3 版本控制 123
6.3.1 monorepo 123
6.3.2 polyrepo 127
6.3.3 版本控制系統(tǒng)的未來 129
6.4 持續(xù)集成策略 129
6.4.1 測試微前端 130
6.4.2 適應(yīng)度函數(shù) 134
6.4.3 微前端特定操作 135
6.5 部署策略 135
6.5.1 藍綠部署和灰度發(fā)布 136
6.5.2 絞殺者模式 138
6.5.3 可觀察性 139
6.6 小結(jié) 140
第7章 案例分析:微前端自動化流水線 141
7.1 場景分析 141
7.1.1 版本控制 143
7.1.2 流水線初始化 143
7.1.3 代碼質(zhì)量審查 144
7.1.4 構(gòu)建 145
7.1.5 構(gòu)建后檢查 146
7.1.6 部署 147
7.1.7 自動化策略總結(jié) 147
7.2 小結(jié) 148
第8章 微前端的后端模式 149
8.1 API 集成與微前端 149
8.1.1 使用服務(wù)字典 151
8.1.2 使用API網(wǎng)關(guān) 157
8.1.3 使用BFF模式 161
8.1.4 在微前端中使用GraphQL 166
8.1.5 最佳實踐 169
8.2 小結(jié) 172
第9章 案例分析:從單體架構(gòu)到微前端 173
9.1 背景 174
9.1.1 技術(shù)棧 174
9.1.2 平臺及主要用戶流程 175
9.1.3 技術(shù)目標 177
9.2 遷移策略 178
9.2.1 微前端決策框架的應(yīng)用 178
9.2.2 將單頁應(yīng)用拆分為多個子域 181
9.2.3 技術(shù)選型 184
9.3 實現(xiàn)細節(jié) 187
9.3.1 App shell 職責 187
9.3.2 應(yīng)用初始化 187
9.3.3 通信 187
9.3.4 后端集成 189
9.3.5 在微前端中集成身份認證 189
9.3.6 依賴項管理 192
9.3.7 整合設(shè)計系統(tǒng) 193
9.3.8 組件共享 193
9.3.9 灰度發(fā)布 194
9.3.10 本地化 195
9.4 小結(jié) 197
第 10章 在組織中引入微前端 198
10.1 我們?yōu)槭裁匆褂梦⑶岸?198
10.2 組織和軟件架構(gòu)之間的聯(lián)系 199
10.2.1 委員會是怎么出現(xiàn)的 200
10.2.2 功能團隊和組件團隊 202
10.3 優(yōu)化溝通流程 205
10.3.1 征求意見稿 205
10.3.2 架構(gòu)決策記錄 207
10.4 優(yōu)化溝通流程的技巧 208
10.4.1 倒推 208
10.4.2 實踐社群和集體會議 209
10.4.3 管理外部依賴 210
10.5 去中心化組織 211
10.6 小結(jié) 215
附錄 社區(qū)對微前端的看法 217