本書聚焦微前端方方面面的知識、技巧、經驗和實踐,幾乎涵蓋了迄今為止出現(xiàn)的每一種微前端的實現(xiàn)原則和解決方案。遵循這些最佳實踐,你能夠應對在開發(fā)微前端項目的過程中所面臨的挑戰(zhàn),按照正確的思路完成微前端項目,實現(xiàn)組織目標。本書共10章,內容豐富,條理清晰,主要包括微前端決策框架、微前端的實現(xiàn)方式、微前端的自動化策略、微前端的后端模式、從單體架構到微前端的案例以及如何在組織中引入微前端等。
如今,Web應用日益復雜。要化繁為簡,解決方案是什么?答案是微前端。微前端是受微服務啟發(fā)的一種新興架構,它將單體代碼庫分解成多個部分,以便多個相對獨立的團隊分工協(xié)作,從而提高項目的靈活性和團隊的整體效率。
本書凝結了作者的真知灼見和一手經驗,既有原理闡述,又有案例分析。作者詳細闡釋了微前端的各種適用場景、不同微前端架構的優(yōu)缺點、微前端決策框架,以及具體的方法和實踐。通過90余張示意圖,作者直觀地呈現(xiàn)了微前端的設計思路與實現(xiàn)技巧。書后附有作者與多位微前端技術先鋒的訪談實錄。
* 了解微服務原則如何應用于前端開發(fā)
* 掌握微前端決策框架的四大關鍵要素
* 探究各種微前端實現(xiàn),分析不同架構的優(yōu)缺點
* 學習微前端自動化策略和持續(xù)優(yōu)化微前端自動化流水線的實踐
* 理解微前端的后端模式,探究微前端如何與微服務或單體API層集成
* 洞悉傳統(tǒng)的前端應用向微前端遷移的全過程
【作者簡介】
盧卡·梅扎利拉(Luca Mezzalira)是AWS的解決方案架構師,擁有近20年的軟件開發(fā)和架構經驗。他曾任獨角獸公司DAZN的架構副總裁,成功幫助DAZN在5年內成為全球矚目的體育流媒體服務平臺。他講解和分享微前端架構的視頻深受歡迎。
【譯者簡介】
KFive是百度App大前端團隊,成員涵蓋PC端和手機百度的大前端研發(fā)者。除業(yè)務支持外,KFive研究的技術方向還包括前端基礎架構、跨端開發(fā)、Node.js、端智能和前端智能化等,并且積累了豐富的產出。KFive的名稱不僅來源于起初的辦公地點是在百度科技園5號樓,而且體現(xiàn)了其對軟件開發(fā)的理解,即“五Key”:Key1者,精益求精;Key2者,大巧不工;Key3者,獨運匠心;Key4者,百煉千錘;Key5者,善始善終。
第 1章 前端概覽 1
1.1 微前端應用 1
1.2 單頁應用 2
1.3 同構應用 4
1.4 靜態(tài)頁面網站 6
1.5 JAMStack 6
1.6 小結 7
第 2章 微前端原則 8
2.1 從單體到微服務 9
2.1.1 微服務遷移 10
2.1.2 引入微前端 12
2.2 微服務原則 13
2.2.1 圍繞業(yè)務領域建模 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è)務領域建模 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 小結 17
第3 章 微前端的架構和挑戰(zhàn) 18
3.1 微前端決策框架 18
3.1.1 定義微前端 19
3.1.2 微前端的領域驅動設計 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 小結 31
第4 章 探索微前端架構 32
4.1 微前端決策框架的應用 32
4.1.1 縱向拆分 33
4.1.2 橫向拆分 34
4.2 架構分析 35
4.3 縱向拆分的架構 37
4.3.1 App shell 37
4.3.2 挑戰(zhàn) 39
4.3.3 實現(xiàn)一個設計系統(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 架構特征 53
4.4 橫向拆分的架構 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 服務器端組合 81
4.4.10 邊緣側組合 89
4.5 小結 93
第5 章 微前端技術實現(xiàn) 94
5.1 項目背景 94
5.2 Module Federation入門 97
5.3 技術實現(xiàn) 98
5.3.1 項目結構 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 嵌入舊版應用 112
5.4.2 開發(fā)收銀臺功能 114
5.4.3 實現(xiàn)動態(tài)遠程容器 115
5.5 和webpack 捆綁 116
5.6 小結 116
第6 章 構建和部署微前端 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 適應度函數(shù) 134
6.4.3 微前端特定操作 135
6.5 部署策略 135
6.5.1 藍綠部署和灰度發(fā)布 136
6.5.2 絞殺者模式 138
6.5.3 可觀察性 139
6.6 小結 140
第7章 案例分析:微前端自動化流水線 141
7.1 場景分析 141
7.1.1 版本控制 143
7.1.2 流水線初始化 143
7.1.3 代碼質量審查 144
7.1.4 構建 145
7.1.5 構建后檢查 146
7.1.6 部署 147
7.1.7 自動化策略總結 147
7.2 小結 148
第8章 微前端的后端模式 149
8.1 API 集成與微前端 149
8.1.1 使用服務字典 151
8.1.2 使用API網關 157
8.1.3 使用BFF模式 161
8.1.4 在微前端中使用GraphQL 166
8.1.5 最佳實踐 169
8.2 小結 172
第9章 案例分析:從單體架構到微前端 173
9.1 背景 174
9.1.1 技術棧 174
9.1.2 平臺及主要用戶流程 175
9.1.3 技術目標 177
9.2 遷移策略 178
9.2.1 微前端決策框架的應用 178
9.2.2 將單頁應用拆分為多個子域 181
9.2.3 技術選型 184
9.3 實現(xiàn)細節(jié) 187
9.3.1 App shell 職責 187
9.3.2 應用初始化 187
9.3.3 通信 187
9.3.4 后端集成 189
9.3.5 在微前端中集成身份認證 189
9.3.6 依賴項管理 192
9.3.7 整合設計系統(tǒng) 193
9.3.8 組件共享 193
9.3.9 灰度發(fā)布 194
9.3.10 本地化 195
9.4 小結 197
第 10章 在組織中引入微前端 198
10.1 我們?yōu)槭裁匆褂梦⑶岸?198
10.2 組織和軟件架構之間的聯(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 架構決策記錄 207
10.4 優(yōu)化溝通流程的技巧 208
10.4.1 倒推 208
10.4.2 實踐社群和集體會議 209
10.4.3 管理外部依賴 210
10.5 去中心化組織 211
10.6 小結 215
附錄 社區(qū)對微前端的看法 217