前端架構(gòu)：從入門到微前端

第1章 前端架構(gòu) 1
1.1 為什么需要軟件架構(gòu) 2
1.1.1 什么是軟件架構(gòu) 2
1.1.2 開發(fā)人員需要怎樣的軟件架構(gòu) 3
1.2 架構(gòu)的設(shè)計 4
1.2.1 收集架構(gòu)需求 5
1.2.2 架構(gòu)模式 10
1.2.3 架構(gòu)設(shè)計方法 11
1.2.4 生成架構(gòu)產(chǎn)出物 15
1.3 架構(gòu)設(shè)計原則 16
1.3.1 不多也不少 16
1.3.2 演進(jìn)式 17
1.3.3 持續(xù)性 19
1.4 前端架構(gòu)發(fā)展史 20
1.5 前端架構(gòu)設(shè)計：層次設(shè)計 21
1.5.1 系統(tǒng)內(nèi)架構(gòu) 22
1.5.2 應(yīng)用級架構(gòu) 23
1.5.3 模塊級架構(gòu) 24
1.5.4 代碼級：規(guī)范與原則 25
1.6 小結(jié) 25
第2章 項目中的技術(shù)架構(gòu)實(shí)施 27
2.1 技術(shù)負(fù)責(zé)人與架構(gòu) 28
2.2 技術(shù)準(zhǔn)備期：探索技術(shù)架構(gòu) 30
2.2.1 架構(gòu)設(shè)計 30
2.2.2 概念驗(yàn)證：架構(gòu)的原型證明 30
2.2.3 迭代0：搭建完整環(huán)境 31
2.2.4 示例項目代碼：體現(xiàn)規(guī)范與原則 32
2.3 業(yè)務(wù)回補(bǔ)期：應(yīng)對第一次Deadline 33
2.3.1 追補(bǔ)業(yè)務(wù) 33
2.3.2 測試：實(shí)踐測試策略 34
2.3.3 上線準(zhǔn)備 35
2.3.4 第一次部署：驗(yàn)證部署架構(gòu) 35
2.3.5 提升團(tuán)隊能力 36
2.4 成長優(yōu)化期：技術(shù)債務(wù)與演進(jìn) 39
2.4.1 償還技術(shù)債務(wù) 40
2.4.2 優(yōu)化開發(fā)體驗(yàn) 41
2.4.3 帶來技術(shù)挑戰(zhàn) 41
2.4.4 架構(gòu)完善及演進(jìn) 42
2.5 小結(jié) 43
第3章 架構(gòu)基礎(chǔ)：工作流設(shè)計 44
3.1 代碼之旅：基礎(chǔ)規(guī)范 45
3.2 代碼組織決定應(yīng)用架構(gòu) 47
3.3 統(tǒng)一代碼風(fēng)格，避免架構(gòu)腐爛 49
3.4 使用Lint規(guī)范代碼 50
3.5 規(guī)范化命名，提升可讀性 51
3.5.1 命名法 51
3.5.2 CSS及其預(yù)處理器命名規(guī)則 52
3.5.3 組件命名規(guī)則 53
3.6 規(guī)范開發(fā)工具，提升開發(fā)效率 54
3.7 項目的文檔化：README搭建指南 55
3.8 繪制架構(gòu)圖：減少溝通成本 56
3.8.1 代碼生成 56
3.8.2 專業(yè)工具 57
3.8.3 軟件附帶工具 57
3.8.4 在線工具 58
3.9 可編輯文檔庫：提升協(xié)作性 59
3.10 記錄架構(gòu)決策：輕量級架構(gòu)決策記錄 59
3.11 可視化文檔：注重代碼的可讀性 60
3.12 看板工具：統(tǒng)一管理業(yè)務(wù)知識 62
3.13 提交信息：每次代碼提交文檔化 63
3.13.1 項目方式 63
3.13.2 開源項目方式 64
3.13.3 對比不同文檔方式 65
3.14 通過流程化提高代碼質(zhì)量 66
3.14.1 代碼預(yù)處理 67
3.14.2 手動檢視代碼 69
3.15 使用工具提升代碼質(zhì)量 70
3.15.1 代碼掃描工具 70
3.15.2 IDE 快速重構(gòu) 71
3.16 測試策略 72
3.16.1 單元測試 73
3.16.2 組件測試 75
3.16.3 契約/接口測試 76
3.17 小結(jié) 77
第4章 架構(gòu)基礎(chǔ)：設(shè)計構(gòu)建流 78
4.1 依賴管理工具 81
4.2 軟件包源管理 83
4.3 前端代碼的打包 88
4.4 設(shè)計構(gòu)建流 89
4.5 持續(xù)交付問題 99
4.6 小結(jié) 105
第5章 架構(gòu)設(shè)計：多頁面應(yīng)用 107
5.1 為什么不需要單頁面應(yīng)用 108
5.1.1 構(gòu)建成本 108
5.1.2 學(xué)習(xí)成本 109
5.1.3 后臺渲染成本 110
5.1.4 應(yīng)用架構(gòu)的復(fù)雜性 111
5.2 簡單多頁面應(yīng)用的開發(fā) 112
5.2.1 選擇UI庫及框架 113
5.2.2 jQuery和Bootstrap仍然好用 113
5.2.3 不使用框架：You Don’t Need xxx 114
5.3 復(fù)雜多頁面應(yīng)用的開發(fā) 115
5.3.1 模板與模板引擎原理 115
5.3.2 基于字符串的模板引擎設(shè)計 116
5.3.3 基于JavaScript的模板引擎設(shè)計 117
5.3.4 雙向綁定原理及實(shí)踐 120
5.3.5 前端路由原理及實(shí)踐 124
5.3.6 兩種路由類型 124
5.3.7 自造Hash路由管理器 125
5.4 避免散彈式架構(gòu) 127
5.4.1 散彈式架構(gòu)應(yīng)用 127
5.4.2 如何降低散彈性架構(gòu)的出現(xiàn)頻率 128
5.5 小結(jié) 130
第6章 架構(gòu)設(shè)計：單頁面應(yīng)用 131
6.1 前端MV*原理 132
6.2 前端MVC架構(gòu)原理 133
6.3 進(jìn)階：設(shè)計雙向綁定的MVC 135
6.4 前端框架選型 138
6.4.1 選型考慮因素 139
6.4.2 框架類型：大而全還是小而美 140
6.4.3 框架：React 142
6.4.4 框架：Angular 143
6.4.5 框架：Vue 145
6.4.6 選型總結(jié) 146
6.5 啟動前端應(yīng)用 146
6.5.1 創(chuàng)建應(yīng)用腳手架 147
6.5.2 構(gòu)建組件庫 148
6.5.3 考慮瀏覽器的支持范圍 150
6.6 服務(wù)端渲染 155
6.6.1 非JavaScript語言的同構(gòu)渲染 155
6.6.2 基于JavaScript語言的同構(gòu)渲染 157
6.6.3 預(yù)渲染 158
6.7 小結(jié) 159
第7章 架構(gòu)設(shè)計：組件化架構(gòu) 161
7.1 前端的組件化架構(gòu) 161
7.2 基礎(chǔ)：風(fēng)格指南 163
7.2.1 原則與模式 163
7.2.2 色彩 165
7.2.3 文字排印 167
7.2.4 布局 168
7.2.5 組件 173
7.2.6 文檔及其他 174
7.2.7 維護(hù)風(fēng)格指南 174
7.3 重用：模式庫 175
7.3.1 組件庫 176
7.3.2 組件類型 178
7.3.3 隔離：二次封裝 183
7.4 進(jìn)階：設(shè)計系統(tǒng) 184
7.4.1 設(shè)立原則，創(chuàng)建模式 186
7.4.2 原子設(shè)計 188
7.4.3 維護(hù)與文檔 191
7.5 跨框架組件化 192
7.5.1 框架間互相調(diào)用：Web Components 192
7.5.2 跨平臺模式庫 193
7.6 小結(jié) 194
第8章 架構(gòu)設(shè)計：前后端分離架構(gòu) 195
8.1 前后端分離 196
8.1.1 為什么選擇前后端分離 196
8.1.2 前后端分離的開發(fā)模式 197
8.1.3 前后端分離的API設(shè)計 198
8.2 API管理模式：API文檔管理方式 202
8.3 前后端并行開發(fā)：Mock Server 205
8.3.1 什么是Mock Server 205
8.3.2 三種類型Mock Server的比較 207
8.3.3 Mock Server的測試：契約測試 212
8.3.4 前后端并行開發(fā)總結(jié) 217
8.4 服務(wù)于前端的后端：BFF 218
8.4.1 為什么使用BFF 218
8.4.2 前后端如何實(shí)現(xiàn)BFF 221
8.4.3 使用GraphQL作為BFF 223
8.5 小結(jié) 228
第9章 架構(gòu)設(shè)計：微前端架構(gòu) 229
9.1 微前端 230
9.1.1 微前端架構(gòu) 230
9.1.2 為什么需要微前端 232
9.2 微前端的技術(shù)拆分方式 234
9.2.1 路由分發(fā)式 235
9.2.2 前端微服務(wù)化 236
9.2.3 組合式集成：微應(yīng)用化 237
9.2.4 微件化 238
9.2.5 前端容器：iframe 239
9.2.6 結(jié)合Web Components構(gòu)建 240
9.3 微前端的業(yè)務(wù)劃分方式 241
9.3.1 按照業(yè)務(wù)拆分 242
9.3.2 按照權(quán)限拆分 243
9.3.3 按照變更的頻率拆分 243
9.3.4 按照組織結(jié)構(gòu)拆分 244
9.3.5 跟隨后端微服務(wù)拆分 244
9.3.6 DDD與事件風(fēng)暴 245
9.4 微前端的架構(gòu)設(shè)計 245
9.4.1 構(gòu)建基礎(chǔ)設(shè)施 246
9.4.2 提取組件與模式庫 246
9.4.3 應(yīng)用通信機(jī)制 247
9.4.4 數(shù)據(jù)管理 248
9.4.5 專用的構(gòu)建系統(tǒng) 249
9.5 微前端的架構(gòu)模式 249
9.5.1 基座模式 250
9.5.2 自組織模式 251
9.6 微前端的設(shè)計理念 252
9.6.1 中心化：應(yīng)用注冊表 252
9.6.2 標(biāo)識化應(yīng)用 253
9.6.3 生命周期 253
9.6.4 高內(nèi)聚，低耦合 254
9.7 “微”害架構(gòu) 254
9.7.1 微架構(gòu) 256
9.7.2 架構(gòu)的演進(jìn) 256
9.7.3 微架構(gòu)帶來的問題 257
9.7.4 解決方式：可拆分式微架構(gòu) 259
9.8 小結(jié) 259
第10章 微前端實(shí)戰(zhàn) 261
10.1 遺留系統(tǒng)：路由分發(fā) 262
10.1.1 路由分發(fā)式微前端 263
10.1.2 路由分發(fā)的測試 264
10.2 遺留系統(tǒng)微前端：使用iframe作為容器 266
10.3 微應(yīng)用化 266
10.3.1 微應(yīng)用化 267
10.3.2 架構(gòu)實(shí)施 269
10.3.3 測試策略 271
10.4 前端微服務(wù)化 272
10.4.1 微服務(wù)化設(shè)計方案 273
10.4.2 通用型前端微服務(wù)化：Single-SPA 276
10.4.3 定制型前端微服務(wù)化：Mooa 279
10.4.4 前端微服務(wù)化總結(jié) 283
10.5 組件化微前端：微件化 283
10.5.1 運(yùn)行時編譯微件化：動態(tài)組件渲染 284
10.5.2 預(yù)編譯微件化 287
10.6 面向未來：Web Components 288
10.6.1 Web Components 289
10.6.2 純Web Components方式 291
10.6.3 結(jié)合Web Components方式 293
10.7 小結(jié) 295
第11章 架構(gòu)演進(jìn)：演進(jìn)式架構(gòu) 297
11.1 更新 298
11.1.1 依賴和框架版本升級 299
11.1.2 語言版本升級 300
11.1.3 遺留系統(tǒng)重搭 300
11.2 遷移 301
11.2.1 架構(gòu)遷移的模式 302
11.2.2 遷移方式：微前端 303
11.2.3 遷移方式：尋找容器 303
11.3 重構(gòu) 304
11.3.1 架構(gòu)重構(gòu) 304
11.3.2 組件提取、函數(shù)提取、樣式提取 305
11.3.3 引入新技術(shù) 306
11.4 重寫 307
11.4.1 重寫能解決問題嗎 308
11.4.2 梳理業(yè)務(wù) 309
11.4.3 沉淀新架構(gòu) 310
11.5 重新架構(gòu) 311
11.5.1 重搭架構(gòu) 311
11.5.2 增量改寫 312
11.6 小結(jié) 313