微前端實戰 Micro Frontends in Action

第Ⅰ部分  微前端初體驗

第1章  什麽是微前端 3

1.1  概覽圖 4

1.1.1  系統和團隊 5

1.1.2  前端 8

1.1.3  前端集成 11

1.1.4  公共話題 13

1.2  微前端解決了哪些問題 14

1.2.1  優化功能開發 14

1.2.2  不再有前端巨石架構 15

1.2.3  適應變化 16

1.2.4  自主的優勢 19

1.3  微前端的缺點 21

1.3.1  冗餘 21

1.3.2  一致性 21

1.3.3  異質性 22

1.3.4  更多的前端代碼 22

1.4  使用微前端的合理時機 23

1.4.1  適合大中型項目 23

1.4.2  在Web應用程序中使用效果最好 23

1.4.3  效率與開銷 24

1.4.4  微前端不適用的場景 25

1.4.5  誰在使用微前端 26

1.5  本章小結 26

第2章  我的第一個微前端項目 29

2.1  The Tractor Store簡介 30

2.1.1  準備開始 30

2.1.2  運行書中的示例代碼 32

2.2  通過鏈接進行頁面跳轉 35

2.2.1  數據所有權 35

2.2.2  團隊契約 36

2.2.3  如何實現 37

2.2.4  處理URL的變化 40

2.2.5  優點 41

2.2.6  缺點 42

2.2.7  何時使用鏈接集成技術 42

2.3  通過iframe進行組合 42

2.3.1  如何實現 43

2.3.2  優點 45

2.3.3  缺點 45

2.3.4  何時使用iframe集成技術 46

2.4  內容預告 46

2.5  本章小結 47

第Ⅱ部分  路由、組合與通信

第3章  使用Ajax進行組合與服務端路由 51

3.1  通過Ajax進行組合 52

3.1.1  如何實現 53

3.1.2  樣式與腳本的命名空間 55

3.1.3  聲明式地加載h-include 59

3.1.4  優點 59

3.1.5  缺點 61

3.1.6  何時使用Ajax集成 62

3.1.7  總結 62

3.2  通過Nginx實現服務端路由 63

3.2.1  如何實現 66

3.2.2  資源的命名空間 69

3.2.3  路由配置的方法 70

3.2.4  基礎設施的歸屬 71

3.2.5  何時應使用單個域名 73

3.3  本章小結 73

第4章  服務端組合 75

4.1  通過Nginx和服務端包含(SSI)進行組合 76

4.1.1  如何實現 77

4.1.2  更少的加載次數 80

4.2  處理不可靠的片段 81

4.2.1  可分離的片段 82

4.2.2  集成Near You片段 83

4.2.3  超時和回退 84

4.2.4  回退內容 86

4.3  深入研究標簽的組裝性能 87

4.3.1  並行加載 87

4.3.2  嵌套的片段 88

4.3.3  延遲加載 89

4.3.4  首字節時間和流式輸出 90

4.4  其他解決方案概述 92

4.4.1  Edge-Side Includes 92

4.4.2  Zalando Tailor 93

4.4.3  Podium 95

4.4.4  哪種方案更適合 102

4.5  服務端組合的優缺點 104

4.5.1  優點 104

4.5.2  缺點 104

4.5.3  使用服務端集成的時機 105

4.6  本章小結 106

第5章  客戶端組合 107

5.1  使用Web Component封裝微前端 108

5.1.1  如何實現 110

5.1.2  將框架封裝在Web Component內 115

5.2  使用Shadow DOM實現樣式隔離 117

5.2.1  創建shadow root 117

5.2.2  樣式隔離 118

5.2.3  何時使用Shadow DOM 120

5.3  使用Web Component進行組合的優缺點 121

5.3.1  優點 121

5.3.2  缺點 122

5.3.3  使用客戶端集成的時機 122

5.4  本章小結 123

第6章  通信模式 125

6.1  用戶界面通信 126

6.1.1  父級頁面到片段 127

6.1.2  片段到父級頁面 131

6.1.3  片段到片段 135

6.1.4  使用Broadcast Channel API發布/訂閱 140

6.1.5  UI通信更適合什麽場景 142

6.2  其他通信機制 143

6.2.1  全局上下文和身份驗證 143

6.2.2  管理狀態 145

6.2.3  前後端通信 145

6.2.4  數據復制 146

6.3  本章小結 148

第7章  客戶端路由和應用程序容器 149

7.1  應用程序容器中的扁平化路由 152

7.1.1  什麽是應用程序容器 152

7.1.2  剖析應用程序容器 153

7.1.3  客戶端路由 155

7.1.4  頁面的渲染 158

7.1.5  應用程序容器和團隊間的契約 161

7.2  雙層路由的應用程序容器 162

7.2.1  實現一級路由 163

7.2.2  團隊層面的路由實現 164

7.2.3  在URL變化時會發生什麽 166

7.2.4  應用程序容器API 169

7.3  single-spa元框架的簡述 171

7.4  來自統一單頁面應用的挑戰 178

7.4.1  需要思考的問題 179

7.4.2  何時適合使用統一的單頁面應用 181

7.5  本章小結 183

第8章  組合和多端渲染 185

8.1  結合使用服務端和客戶端組合 187

8.1.1  SSI和Web Component 188

8.1.2  團隊間的約定 194

8.1.3  其他解決方案 195

8.2  何時適合採用多端組合 195

8.2.1  純服務端組合的多端渲染 195

8.2.2  復雜性增加 196

8.2.3  多端的統一單頁面應用 196

8.3  本章小結 197

第9章  適合我們項目的架構 199

9.1  復習專業術語 200

9.1.1  路由和頁面切換 200

9.1.2  組合技術 201

9.1.3  頂層架構 203

9.2  復雜度的比較 206

9.3  是構建網站還是應用程序 208

9.3.1  Documents-to-Applications Continuum 208

9.3.2  服務端渲染、客戶端渲染和多端渲染的選擇 210

9.4  選擇正確的架構和集成技術 211

9.4.1  強隔離(遺留系統，第三方引入) 213

9.4.2  快速的首頁加載/漸進式增強 213

9.4.3  即時的用戶反饋 214

9.4.4  路由跳轉 215

9.4.5  同一頁面集成多個微前端 216

9.5  本章小結 216

第Ⅲ部分  如何做到快速、一致、有效

第10章  資源加載 221

10.1  資源引用策略 222

10.1.1  直接引用 222

10.1.2  挑戰：緩存破壞和獨立部署 223

10.1.3  通過重定向引用(客戶端) 225

10.1.4  通過include引用(服務端) 227

10.1.5  挑戰：同步標簽和資源版本 230

10.1.6  代碼嵌入 233

10.1.7  集成解決方案(Tailor、Podium等) 234

10.1.8  簡單總結 237

10.2  打包粒度 238

10.2.1  HTTP/2 238

10.2.2  all-in-one打包方式 239

10.2.3  以團隊維度進行打包 239

10.2.4  以頁面和片段的維度進行打包 240

10.3  按需加載 241

10.3.1  微前端代理 241

10.3.2  CSS的懶加載 242

10.4  本章小結 242

第11章  至關重要的性能 243

11.1  高性能架構設計 244

11.1.1  性能指標因團隊而異 245

11.1.2  多團隊協作時的性能預算 246

11.1.3  排查性能下降的原因 247

11.1.4  性能收益 249

11.2  精簡並復用vendor庫 251

11.2.1  團隊自治的代價 251

11.2.2  精簡代碼 253

11.2.3  全局範圍內引用相同版本的verdor庫 254

11.2.4  vendor代碼版本管理 256

11.2.5  不要共享業務代碼 271

11.3  本章小結 272

第12章  UI設計系統 275

12.1  為什麽需要一個設計系統 276

12.1.1  目標與作用 278

12.1.2  益處 278

12.2  公用設計系統與自治團隊 279

12.2.1  是否有必要搭建自己的設計系統 279

12.2.2  不斷完善設計系統 280

12.2.3  持續投入以及責任到人 280

12.2.4  獲得團隊的認可 281

12.2.5  開發流程：集中模式與聯合模式 283

12.2.6  開發階段 285

12.3  運行時整合與構建時整合 286

12.3.1  運行時整合 287

12.3.2  版本包 289

12.4  樣式庫中的組件：通用與定製 293

12.4.1  組件類型的選擇 293

12.4.2  改變 297

12.5  哪些組件應該沉澱到中心化的樣式庫中 298

12.5.1  公用組件的成本 299

12.5.2  公用樣式庫或者本地開發 299

12.5.3  公用樣式庫和私有樣式庫 302

12.6  本章小結 303

第13章  團隊及職責邊界 305

13.1  將系統與團隊對齊 306

13.1.1  明確團隊邊界 307

13.1.2  團隊組成 310

13.1.3  文化改變 313

13.2  知識分享 314

13.2.1  實踐社區 315

13.2.2  學習及賦能 316

13.2.3  展示工作 316

13.3  橫向共性問題 317

13.3.1  中心化的基礎設施 317

13.3.2  專業化的組件團隊 318

13.3.3  一致的協議和約定 319

13.4  技術多樣性 319

13.4.1  工具箱和默認選擇 319

13.4.2  前端藍圖 320

13.4.3  不要抵觸復制 322

13.4.4  步調一致的好處 322

13.5  本章小結 323

第14章  遷移、本地開發及測試 325

14.1  遷移 326

14.1.1  概念驗證和示範作用 326

14.1.2  策略一：逐個遷移 328

14.1.3  策略二：前端先行 330

14.1.4  策略三：greenfield和“大爆炸” 332

14.2  本地開發 333

14.2.1  不要運行其他團隊的代碼 334

14.2.2  模擬頁面片段 335

14.2.3  沙盒化代碼片段 337

14.2.4  從備機環境或者生產環境中集成其他團隊的微前端 339

14.3  測試 339

14.4  本章小結 341