微前端設計與實現 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