微前端設計與實現 Building Micro-Frontends: Scaling Teams and Projects Empowering Developers

【作者简介】

 

卢卡·梅扎利拉（Luca Mezzalira）是AWS的解决方案架构师，拥有近20年的软件开发和架构经验。他曾任独角兽公司DAZN的架构副总裁，成功帮助DAZN在5年内成为全球瞩目的体育流媒体服务平台。他讲解和分享微前端架构的视频深受欢迎。

 

【译者简介】

 

KFive是百度App大前端团队，成员涵盖PC端和手机百度的大前端研发者。除业务支持外，KFive研究的技术方向还包括前端基础架构、跨端开发、Node.js、端智能和前端智能化等，并且积累了丰富的产出。KFive的名称不仅来源于起初的办公地点是在百度科技园5号楼，而且体现了其对软件开发的理解，即“五Key”：Key1者，精益求精；Key2者，大巧不工；Key3者，独运匠心；Key4者，百炼千锤；Key5者，善始善终。

第 1章　前端概覽 1

1.1　微前端應用 1

1.2　單頁應用 2

1.3　同構應用 4

1.4　靜態頁面網站 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　圍繞業務領域建模 14

2.2.2　自動化文化 14

2.2.3　隱藏實現細節 14

2.2.4　分佈式治理 15

2.2.5　獨立部署 15

2.2.6　故障隔離 15

2.2.7　高度可觀察性 15

2.3　在微前端中實踐這些原則 15

2.3.1　圍繞業務領域建模 15

2.3.2　自動化文化 16

2.3.3　隱藏實現細節 16

2.3.4　分佈式治理 16

2.3.5　獨立部署 16

2.3.6　故障隔離 16

2.3.7　高度可觀察性 17

2.4　微前端不是萬能靈藥 17

2.5　小結 17

第3 章　微前端的架構和挑戰 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　挑戰 39

4.3.3　實現一個設計系統 45

4.3.4　開發體驗 47

4.3.5　搜索引擎優化 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　挑戰 58

4.4.3　搜索引擎優化 65

4.4.4　開發體驗 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 章　微前端技術實現 94

5.1　項目背景 94

5.2　Module Federation入門 97

5.3　技術實現 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　開發收銀台功能 114

5.4.3　實現動態遠程容器 115

5.5　和webpack 捆綁 116

5.6　小結 116

第6 章　構建和部署微前端 117

6.1　自動化原理 118

6.1.1　反饋周期盡可能短 118

6.1.2　持續迭代 119

6.1.3　給團隊賦能 120

6.1.4　定義圍欄 120

6.1.5　可靠的測試策略 121

6.2　開發體驗 121

6.2.1　橫向拆分和縱向拆分 122

6.2.2　微前端腳手架 122

6.2.3　環境策略 123

6.3　版本控制 123

6.3.1　monorepo 123

6.3.2　polyrepo 127

6.3.3　版本控制系統的未來 129

6.4　持續集成策略 129

6.4.1　測試微前端 130

6.4.2　適應度函數 134

6.4.3　微前端特定操作 135

6.5　部署策略 135

6.5.1　藍綠部署和灰度發布 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　實現細節 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　整合設計系統 193

9.3.8　組件共享 193

9.3.9　灰度發布 194

9.3.10　本地化 195

9.4　小結 197

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

10.1 我們為什麽要使用微前端 198

10.2　組織和軟件架構之間的聯系 199

10.2.1　委員會是怎麽出現的 200

10.2.2　功能團隊和組件團隊 202

10.3　優化溝通流程 205

10.3.1　徵求意見稿 205

10.3.2　架構決策記錄 207

10.4　優化溝通流程的技巧 208

10.4.1　倒推 208

10.4.2　實踐社群和集體會議 209

10.4.3　管理外部依賴 210

10.5　去中心化組織 211

10.6　小結 215

附錄　社區對微前端的看法 217