相關商品
商品簡介
目次
商品簡介
本書是一本圍繞前端架構的實施手冊，從基礎的架構規範，到如何設計前端架構，再到採用微前端架構拆分複雜的前端應用。本書通過系統地介紹前端架構世界的方方面面，來幫助前端工程師更好地進行系統設計。前端架構包含以下五部分內容。? 設計：講述了架構設計的模式，以及設計和制定前端工作流。? 基礎：通過深入構建系統、單頁面應用原理、前端知識體系等，來構建出完整的前端應用架構體系。? 實施：通過與代碼結構的方式，介紹如何在企業級應用中實施組件化架構、設計系統和前後端分離架構。? 微前端：引入6種微前端的概念，以及如何劃分、設計微前端應用，並展示了如何實現這6種微前端架構。? 演進：提出更新、遷移、重構、重寫、重新架構等架構演進方式，來幫助開發人員更好地設計演進式架構本書適合想要成為優秀前端開發工程師(初中級)，或致力於構建更易於維護的系統架構的開發人員、技術主管、軟件架構師和軟件項目經理等。
目次
目 錄
第1章 前端架構 1
1.1 為什麼需要軟件架構 2
1.1.1 什麼是軟件架構 2
1.1.2 開發人員需要怎樣的軟件架構 3
1.2 架構的設計 4
1.2.1 收集架構需求 5
1.2.2 架構模式 10
1.2.3 架構設計方法 11
1.2.4 生成架構產出物 15
1.3 架構設計原則 16
1.3.1 不多也不少 16
1.3.2 演進式 17
1.3.3 持續性 19
1.4 前端架構發展史 20
1.5 前端架構設計：層次設計 21
1.5.1 系統內架構 22
1.5.2 應用級架構 23
1.5.3 模塊級架構 24
1.5.4 代碼級：規範與原則 25
1.6 小結 25
第2章 項目中的技術架構實施 27
2.1 技術負責人與架構 28
2.2 技術準備期：探索技術架構 30
2.2.1 架構設計 30
2.2.2 概念驗證：架構的原型證明 30
2.2.3 迭代0：搭建完整環境 31
2.2.4 示例項目代碼：體現規範與原則 32
2.3 業務回補期：應對第一次Deadline 33
2.3.1 追補業務 33
2.3.2 測試：實踐測試策略 34
2.3.3 上線準備 35
2.3.4 第一次部署：驗證部署架構 35
2.3.5 提升團隊能力 36
2.4 成長優化期：技術債務與演進 39
2.4.1 償還技術債務 40
2.4.2 優化開發體驗 41
2.4.3 帶來技術挑戰 41
2.4.4 架構完善及演進 42
2.5 小結 43
第3章 架構基礎：工作流設計 44
3.1 代碼之旅：基礎規範 45
3.2 代碼組織決定應用架構 47
3.3 統一代碼風格，避免架構腐爛 49
3.4 使用Lint規範代碼 50
3.5 規範化命名，提升可讀性 51
3.5.1 命名法 51
3.5.2 CSS及其預處理器命名規則 52
3.5.3 組件命名規則 53
3.6 規範開發工具，提升開發效率 54
3.7 項目的文檔化：README搭建指南 55
3.8 繪製架構圖：減少溝通成本 56
3.8.1 代碼生成 56
3.8.2 專業工具 57
3.8.3 軟件附帶工具 57
3.8.4 在線工具 58
3.9 可編輯文檔庫：提升協作性 59
3.10 記錄架構決策：輕量級架構決策記錄 59
3.11 可視化文檔：注重代碼的可讀性 60
3.12 看板工具：統一管理業務知識 62
3.13 提交信息：每次代碼提交文檔化 63
3.13.1 項目方式 63
3.13.2 開源項目方式 64
3.13.3 對比不同文檔方式 65
3.14 通過流程化提高代碼質量 66
3.14.1 代碼預處理 67
3.14.2 手動檢視代碼 69
3.15 使用工具提升代碼質量 70
3.15.1 代碼掃描工具 70
3.15.2 IDE 快速重構 71
3.16 測試策略 72
3.16.1 單元測試 73
3.16.2 組件測試 75
3.16.3 契約/接口測試 76
3.17 小結 77
第4章 架構基礎：設計構建流 78
4.1 依賴管理工具 81
4.2 軟件包源管理 83
4.3 前端代碼的打包 88
4.4 設計構建流 89
4.5 持續交付問題 99
4.6 小結 105
第5章 架構設計：多頁面應用 107
5.1 為什麼不需要單頁面應用 108
5.1.1 構建成本 108
5.1.2 學習成本 109
5.1.3 後臺渲染成本 110
5.1.4 應用架構的複雜性 111
5.2 簡單多頁面應用的開發 112
5.2.1 選擇UI庫及框架 113
5.2.2 jQuery和Bootstrap仍然好用 113
5.2.3 不使用框架：You Don't Need xxx 114
5.3 複雜多頁面應用的開發 115
5.3.1 模板與模板引擎原理 115
5.3.2 基於字符串的模板引擎設計 116
5.3.3 基於JavaScript的模板引擎設計 117
5.3.4 雙向綁定原理及實踐 120
5.3.5 前端路由原理及實踐 124
5.3.6 兩種路由類型 124
5.3.7 自造Hash路由管理器 125
5.4 避免散彈式架構 127
5.4.1 散彈式架構應用 127
5.4.2 如何降低散彈性架構的出現頻率 128
5.5 小結 130
第6章 架構設計：單頁面應用 131
6.1 前端MV*原理 132
6.2 前端MVC架構原理 133
6.3 進階：設計雙向綁定的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 選型總結 146
6.5 啟動前端應用 146
6.5.1 創建應用腳手架 147
6.5.2 構建組件庫 148
6.5.3 考慮瀏覽器的支持範圍 150
6.6 服務端渲染 155
6.6.1 非JavaScript語言的同構渲染 155
6.6.2 基於JavaScript語言的同構渲染 157
6.6.3 預渲染 158
6.7 小結 159
第7章 架構設計：組件化架構 161
7.1 前端的組件化架構 161
7.2 基礎：風格指南 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 維護風格指南 174
7.3 重用：模式庫 175
7.3.1 組件庫 176
7.3.2 組件類型 178
7.3.3 隔離：二次封裝 183
7.4 進階：設計系統 184
7.4.1 設立原則，創建模式 186
7.4.2 原子設計 188
7.4.3 維護與文檔 191
7.5 跨框架組件化 192
7.5.1 框架間互相調用：Web Components 192
7.5.2 跨平臺模式庫 193
7.6 小結 194
第8章 架構設計：前後端分離架構 195
8.1 前後端分離 196
8.1.1 為什麼選擇前後端分離 196
8.1.2 前後端分離的開發模式 197
8.1.3 前後端分離的API設計 198
8.2 API管理模式：API文檔管理方式 202
8.3 前後端並行開發：Mock Server 205
8.3.1 什麼是Mock Server 205
8.3.2 三種類型Mock Server的比較 207
8.3.3 Mock Server的測試：契約測試 212
8.3.4 前後端並行開發總結 217
8.4 服務於前端的後端：BFF 218
8.4.1 為什麼使用BFF 218
8.4.2 前後端如何實現BFF 221
8.4.3 使用GraphQL作為BFF 223
8.5 小結 228
第9章 架構設計：微前端架構 229
9.1 微前端 230
9.1.1 微前端架構 230
9.1.2 為什麼需要微前端 232
9.2 微前端的技術拆分方式 234
9.2.1 路由分髮式 235
9.2.2 前端微服務化 236
9.2.3 組合式集成：微應用化 237
9.2.4 微件化 238
9.2.5 前端容器：iframe 239
9.2.6 結合Web Components構建 240
9.3 微前端的業務劃分方式 241
9.3.1 按照業務拆分 242
9.3.2 按照權限拆分 243
9.3.3 按照變更的頻率拆分 243
9.3.4 按照組織結構拆分 244
9.3.5 跟隨後端微服務拆分 244
9.3.6 DDD與事件風暴 245
9.4 微前端的架構設計 245
9.4.1 構建基礎設施 246
9.4.2 提取組件與模式庫 246
9.4.3 應用通信機制 247
9.4.4 數據管理 248
9.4.5 專用的構建系統 249
9.5 微前端的架構模式 249
9.5.1 基座模式 250
9.5.2 自組織模式 251
9.6 微前端的設計理念 252
9.6.1 中心化：應用註冊表 252
9.6.2 標識化應用 253
9.6.3 生命週期 253
9.6.4 高內聚，低耦合 254
9.7 “微”害架構 254
9.7.1 微架構 256
9.7.2 架構的演進 256
9.7.3 微架構帶來的問題 257
9.7.4 解決方式：可拆分式微架構 259
9.8 小結 259
第10章 微前端實戰 261
10.1 遺留系統：路由分發 262
10.1.1 路由分髮式微前端 263
10.1.2 路由分發的測試 264
10.2 遺留系統微前端：使用iframe作為容器 266
10.3 微應用化 266
10.3.1 微應用化 267
10.3.2 架構實施 269
10.3.3 測試策略 271
10.4 前端微服務化 272
10.4.1 微服務化設計方案 273
10.4.2 通用型前端微服務化：Single-SPA 276
10.4.3 定制型前端微服務化：Mooa 279
10.4.4 前端微服務化總結 283
10.5 組件化微前端：微件化 283
10.5.1 運行時編譯微件化：動態組件渲染 284
10.5.2 預編譯微件化 287
10.6 面向未來：Web Components 288
10.6.1 Web Components 289
10.6.2 純Web Components方式 291
10.6.3 結合Web Components方式 293
10.7 小結 295
第11章 架構演進：演進式架構 297
11.1 更新 298
11.1.1 依賴和框架版本升級 299
11.1.2 語言版本升級 300
11.1.3 遺留系統重搭 300
11.2 遷移 301
11.2.1 架構遷移的模式 302
11.2.2 遷移方式：微前端 303
11.2.3 遷移方式：尋找容器 303
11.3 重構 304
11.3.1 架構重構 304
11.3.2 組件提取、函數提取、樣式提取 305
11.3.3 引入新技術 306
11.4 重寫 307
11.4.1 重寫能解決問題嗎 308
11.4.2 梳理業務 309
11.4.3 沉澱新架構 310
11.5 重新架構 311
11.5.1 重搭架構 311
11.5.2 增量改寫 312
11.6 小結 313
第1章 前端架構 1
1.1 為什麼需要軟件架構 2
1.1.1 什麼是軟件架構 2
1.1.2 開發人員需要怎樣的軟件架構 3
1.2 架構的設計 4
1.2.1 收集架構需求 5
1.2.2 架構模式 10
1.2.3 架構設計方法 11
1.2.4 生成架構產出物 15
1.3 架構設計原則 16
1.3.1 不多也不少 16
1.3.2 演進式 17
1.3.3 持續性 19
1.4 前端架構發展史 20
1.5 前端架構設計：層次設計 21
1.5.1 系統內架構 22
1.5.2 應用級架構 23
1.5.3 模塊級架構 24
1.5.4 代碼級：規範與原則 25
1.6 小結 25
第2章 項目中的技術架構實施 27
2.1 技術負責人與架構 28
2.2 技術準備期：探索技術架構 30
2.2.1 架構設計 30
2.2.2 概念驗證：架構的原型證明 30
2.2.3 迭代0：搭建完整環境 31
2.2.4 示例項目代碼：體現規範與原則 32
2.3 業務回補期：應對第一次Deadline 33
2.3.1 追補業務 33
2.3.2 測試：實踐測試策略 34
2.3.3 上線準備 35
2.3.4 第一次部署：驗證部署架構 35
2.3.5 提升團隊能力 36
2.4 成長優化期：技術債務與演進 39
2.4.1 償還技術債務 40
2.4.2 優化開發體驗 41
2.4.3 帶來技術挑戰 41
2.4.4 架構完善及演進 42
2.5 小結 43
第3章 架構基礎：工作流設計 44
3.1 代碼之旅：基礎規範 45
3.2 代碼組織決定應用架構 47
3.3 統一代碼風格，避免架構腐爛 49
3.4 使用Lint規範代碼 50
3.5 規範化命名，提升可讀性 51
3.5.1 命名法 51
3.5.2 CSS及其預處理器命名規則 52
3.5.3 組件命名規則 53
3.6 規範開發工具，提升開發效率 54
3.7 項目的文檔化：README搭建指南 55
3.8 繪製架構圖：減少溝通成本 56
3.8.1 代碼生成 56
3.8.2 專業工具 57
3.8.3 軟件附帶工具 57
3.8.4 在線工具 58
3.9 可編輯文檔庫：提升協作性 59
3.10 記錄架構決策：輕量級架構決策記錄 59
3.11 可視化文檔：注重代碼的可讀性 60
3.12 看板工具：統一管理業務知識 62
3.13 提交信息：每次代碼提交文檔化 63
3.13.1 項目方式 63
3.13.2 開源項目方式 64
3.13.3 對比不同文檔方式 65
3.14 通過流程化提高代碼質量 66
3.14.1 代碼預處理 67
3.14.2 手動檢視代碼 69
3.15 使用工具提升代碼質量 70
3.15.1 代碼掃描工具 70
3.15.2 IDE 快速重構 71
3.16 測試策略 72
3.16.1 單元測試 73
3.16.2 組件測試 75
3.16.3 契約/接口測試 76
3.17 小結 77
第4章 架構基礎：設計構建流 78
4.1 依賴管理工具 81
4.2 軟件包源管理 83
4.3 前端代碼的打包 88
4.4 設計構建流 89
4.5 持續交付問題 99
4.6 小結 105
第5章 架構設計：多頁面應用 107
5.1 為什麼不需要單頁面應用 108
5.1.1 構建成本 108
5.1.2 學習成本 109
5.1.3 後臺渲染成本 110
5.1.4 應用架構的複雜性 111
5.2 簡單多頁面應用的開發 112
5.2.1 選擇UI庫及框架 113
5.2.2 jQuery和Bootstrap仍然好用 113
5.2.3 不使用框架：You Don't Need xxx 114
5.3 複雜多頁面應用的開發 115
5.3.1 模板與模板引擎原理 115
5.3.2 基於字符串的模板引擎設計 116
5.3.3 基於JavaScript的模板引擎設計 117
5.3.4 雙向綁定原理及實踐 120
5.3.5 前端路由原理及實踐 124
5.3.6 兩種路由類型 124
5.3.7 自造Hash路由管理器 125
5.4 避免散彈式架構 127
5.4.1 散彈式架構應用 127
5.4.2 如何降低散彈性架構的出現頻率 128
5.5 小結 130
第6章 架構設計：單頁面應用 131
6.1 前端MV*原理 132
6.2 前端MVC架構原理 133
6.3 進階：設計雙向綁定的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 選型總結 146
6.5 啟動前端應用 146
6.5.1 創建應用腳手架 147
6.5.2 構建組件庫 148
6.5.3 考慮瀏覽器的支持範圍 150
6.6 服務端渲染 155
6.6.1 非JavaScript語言的同構渲染 155
6.6.2 基於JavaScript語言的同構渲染 157
6.6.3 預渲染 158
6.7 小結 159
第7章 架構設計：組件化架構 161
7.1 前端的組件化架構 161
7.2 基礎：風格指南 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 維護風格指南 174
7.3 重用：模式庫 175
7.3.1 組件庫 176
7.3.2 組件類型 178
7.3.3 隔離：二次封裝 183
7.4 進階：設計系統 184
7.4.1 設立原則，創建模式 186
7.4.2 原子設計 188
7.4.3 維護與文檔 191
7.5 跨框架組件化 192
7.5.1 框架間互相調用：Web Components 192
7.5.2 跨平臺模式庫 193
7.6 小結 194
第8章 架構設計：前後端分離架構 195
8.1 前後端分離 196
8.1.1 為什麼選擇前後端分離 196
8.1.2 前後端分離的開發模式 197
8.1.3 前後端分離的API設計 198
8.2 API管理模式：API文檔管理方式 202
8.3 前後端並行開發：Mock Server 205
8.3.1 什麼是Mock Server 205
8.3.2 三種類型Mock Server的比較 207
8.3.3 Mock Server的測試：契約測試 212
8.3.4 前後端並行開發總結 217
8.4 服務於前端的後端：BFF 218
8.4.1 為什麼使用BFF 218
8.4.2 前後端如何實現BFF 221
8.4.3 使用GraphQL作為BFF 223
8.5 小結 228
第9章 架構設計：微前端架構 229
9.1 微前端 230
9.1.1 微前端架構 230
9.1.2 為什麼需要微前端 232
9.2 微前端的技術拆分方式 234
9.2.1 路由分髮式 235
9.2.2 前端微服務化 236
9.2.3 組合式集成：微應用化 237
9.2.4 微件化 238
9.2.5 前端容器：iframe 239
9.2.6 結合Web Components構建 240
9.3 微前端的業務劃分方式 241
9.3.1 按照業務拆分 242
9.3.2 按照權限拆分 243
9.3.3 按照變更的頻率拆分 243
9.3.4 按照組織結構拆分 244
9.3.5 跟隨後端微服務拆分 244
9.3.6 DDD與事件風暴 245
9.4 微前端的架構設計 245
9.4.1 構建基礎設施 246
9.4.2 提取組件與模式庫 246
9.4.3 應用通信機制 247
9.4.4 數據管理 248
9.4.5 專用的構建系統 249
9.5 微前端的架構模式 249
9.5.1 基座模式 250
9.5.2 自組織模式 251
9.6 微前端的設計理念 252
9.6.1 中心化：應用註冊表 252
9.6.2 標識化應用 253
9.6.3 生命週期 253
9.6.4 高內聚，低耦合 254
9.7 “微”害架構 254
9.7.1 微架構 256
9.7.2 架構的演進 256
9.7.3 微架構帶來的問題 257
9.7.4 解決方式：可拆分式微架構 259
9.8 小結 259
第10章 微前端實戰 261
10.1 遺留系統：路由分發 262
10.1.1 路由分髮式微前端 263
10.1.2 路由分發的測試 264
10.2 遺留系統微前端：使用iframe作為容器 266
10.3 微應用化 266
10.3.1 微應用化 267
10.3.2 架構實施 269
10.3.3 測試策略 271
10.4 前端微服務化 272
10.4.1 微服務化設計方案 273
10.4.2 通用型前端微服務化：Single-SPA 276
10.4.3 定制型前端微服務化：Mooa 279
10.4.4 前端微服務化總結 283
10.5 組件化微前端：微件化 283
10.5.1 運行時編譯微件化：動態組件渲染 284
10.5.2 預編譯微件化 287
10.6 面向未來：Web Components 288
10.6.1 Web Components 289
10.6.2 純Web Components方式 291
10.6.3 結合Web Components方式 293
10.7 小結 295
第11章 架構演進：演進式架構 297
11.1 更新 298
11.1.1 依賴和框架版本升級 299
11.1.2 語言版本升級 300
11.1.3 遺留系統重搭 300
11.2 遷移 301
11.2.1 架構遷移的模式 302
11.2.2 遷移方式：微前端 303
11.2.3 遷移方式：尋找容器 303
11.3 重構 304
11.3.1 架構重構 304
11.3.2 組件提取、函數提取、樣式提取 305
11.3.3 引入新技術 306
11.4 重寫 307
11.4.1 重寫能解決問題嗎 308
11.4.2 梳理業務 309
11.4.3 沉澱新架構 310
11.5 重新架構 311
11.5.1 重搭架構 311
11.5.2 增量改寫 312
11.6 小結 313
您曾經瀏覽過的商品
購物須知
大陸出版品因裝訂品質及貨運條件與台灣出版品落差甚大，除封面破損、內頁脫落等較嚴重的狀態，其餘商品將正常出貨。
特別提醒：部分書籍附贈之內容(如音頻mp3或影片dvd等)已無實體光碟提供，需以QR CODE 連結至當地網站註冊“並通過驗證程序”，方可下載使用。
無現貨庫存之簡體書，將向海外調貨：
海外有庫存之書籍，等候約45個工作天;
海外無庫存之書籍，平均作業時間約60個工作天，然不保證確定可調到貨，尚請見諒。
為了保護您的權益，「三民網路書店」提供會員七日商品鑑賞期(收到商品為起始日)。
若要辦理退貨，請在商品鑑賞期內寄回，且商品必須是全新狀態與完整包裝(商品、附件、發票、隨貨贈品等)否則恕不接受退貨。