前端架構：從入門到微前端( 簡體 字) | |
| 作者：黃峰達 | 類別：1. -> 程式設計 -> 綜合 |
| 出版社：電子工業出版社 |  3dWoo書號： 51214詢問書籍請說出此書號！ 有庫存 NT售價： 395 元 |
| 出版日：6/1/2019 | |
| 頁數：328 | |
| 光碟數：0 | |
站長推薦：   | |
| 印刷：黑白印刷 | 語系： ( 簡體 字 ) |
| ISBN：9787121365348 | 加入購物車 │加到我的最愛 (請先登入會員) |
| (簡體書上所述之下載連結耗時費功, 恕不適用在台灣, 若讀者需要請自行嘗試, 恕不保證, 繁體書的下載亦請直接連絡出版社) | |
第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 本書是一本圍繞前端架構的實施手冊，從基礎的架構規范，到如何設計前端架構，再到采用微前端架構拆分復雜的前端應用。本書通過系統地介紹前端架構世界的方方面面，來幫助前端工程師更好地進行系統設計。前端架構包含以下五部分內容。? 設計：講述了架構設計的模式，以及設計和制定前端工作流。? 基礎：通過深入構建系統、單頁面應用原理、前端知識體系等，來構建出完整的前端應用架構體系。? 實施：通過與代碼結構的方式，介紹如何在企業級應用中實施組件化架構、設計系統和前后端分離架構。? 微前端：引入6種微前端的概念，以及如何劃分、設計微前端應用，并展示了如何實現這6種微前端架構。? 演進：提出更新、遷移、重構、重寫、重新架構等架構演進方式，來幫助開發人員更好地設計演進式架構本書適合想要成為優秀前端開發工程師（初中級），或致力于構建更易于維護的系統架構的開發人員、技術主管、軟件架構師和軟件項目經理等。
1. 關于前端架構
獨立開發一個前端項目，或身為前端技術負責人，編寫代碼時，總得多一分考慮。不同的場景、不同的時間、不同的角色，考慮的東西也是不同的。在多種因素的共同作用下，我們往往找不到最好的方案，只能找到最合適的方案。于是，我們需要從幾個不適合的方案里選出最合適的一個，換句話說，就是從不太差的中選出最好的那個。“最合適”，便是這樣相比較出來的。 過去，當人們討論架構時，往往指的是后端架構。對于只使用后端API的前端來看，后端看上去像只做CRUD（增加（Create）、讀取查詢（Retrieve）、更新（Update）、刪除（Delete））。然而，后端并不像看上去那么簡單。從架構層面考慮，后端是要實現高并發和高可用的。在多數情況下，數據庫是后端最大的瓶頸，存儲的時候要考慮原子性、一致性、隔離性和持久性，使用的時候要考慮通過分表、存儲、主從同步來提高性能和并發量，在這個過程中還要考慮備份、遷移、查詢速度、效率等問題。此外，在代碼實現上還有一系列的復雜問題：使用消息隊列來解耦依賴，使用微服務來拆分單體應用…… 架構，在前端會更復雜——涉及領域更廣。前端在實現的過程中，除了考慮代碼的可用性、性能、模型構建、組件復用等問題，還有前端特有的平臺設定、瀏覽器兼容、交互設計、用戶體驗等相關的問題。而在“大前端”的背景之下，還需要深入移動端設計、桌面應用、物聯網等相關的領域。 后端的發展比較穩定，更注重代碼實現。而前端的發展比后端晚了好多年。大概從Google Map在2005年使用了大量的Ajax之后，人們才意識到原來前端還可以這么做。隨后，產生了單頁面應用，并誕生了一個又一個的前端應用，直至出于解耦的目的，前后端也開始分離了。 Web前端應用越來越復雜，使得架構在前端設計與開發也越來越受關注。規范、原則、模式、架構，是我們在前端架構中需要關注的內容。 2. 本書結構 本書從結構上分為11個章節，除第9章、第10章存在一定的依賴性外，每一章都可以獨立閱讀而不受影響。 第1章 前端架構。介紹什么是架構、如何進行架構設計，以及相應的架構設計原則。同時，還介紹了前端架構的發展歷史，以及如何通過層次設計來設計前端架構。 第2章 項目中的技術架構實施。介紹軟件開發過程與架構的關系是怎樣的，如何正確地實施架構，以及如何在過程中提升團隊的能力。 第3章 架構基礎：工作流設計。從代碼的角度出發，展示前端架構的基礎內容：基礎規范、文檔化、通過流程化提高代碼質量和測試策略。 第4章 架構基礎：設計構建流。從構建工具（webpack、Gulp、Grunt 等）入手，講述前端應用的構建流程、如何設計構建流、持續交付的構建等，它們用于構建完整的前端應用。 第5章 架構設計：多頁面應用。介紹如何開發傳統的多頁面應用，并結合前端框架的知識體系，例如模板與模板引擎、雙向綁定、前端路由等，講解如何使用合適的技術棧開發多頁面應用。 第6章 架構設計：單頁面應用。關注如何開發單頁面應用，相關的內容有前端MV*原理、前端應用如何選型、前端應用如何啟動及服務端如何渲染。 第7章 架構設計：組件化架構。講述組件化架構及其三種不同的展現形式：基礎的風格指南、用于重用的模式庫，以及進階的設計系統。 第8章 架構設計：前后端分離架構。主要關注前后端分離及其API管理，介紹了不同的API管理模式、前后端獨立的模擬API服務MockServer，以及服務于前端的后端（BFF）。 第9章 架構設計：微前端架構。包括6種微前端的介紹，從經典的路由分發式到多框架運行的前端微服務化等。并介紹如何劃分、設計微前端應用，以及“微”害架構的相關概念。 第10章 微前端實戰。以實戰的方式，對第9章中介紹的6種微前端方案進行實踐。 第11章 架構演進：演進式架構。介紹5種架構演進的方式：更新、遷移、重構、重寫、重新架構，以幫助開發人員更好地設計演進式架構。 3. 本書目標 本書的目標是帶領讀者探索前端架構世界。我們將關注于解決有關前端應用的基礎架構問題： ? 如何快速啟動一個項目？ ? 如何在組織內有效地共享代碼、組件庫、函數庫等？ ? 如何提升項目的代碼質量？ ? 項目的文檔化采用什么策略？ ? 采用怎樣的策略進行代碼測試？ …… 本書還將介紹，在進行更高級的架構設計時，需要考慮的諸多因素： ? 應用的哪些部分可以在其他應用中快速重用？ ? 應用內的組件采用怎樣的通信機制？ ? 是否通過拆分應用來降低復雜度？ ? 如何對架構進行演進，以降低開發、維護成本？ ? 如何讓多個團隊高效地進行并行開發？能否將不同應用、項目的代碼隔離開來，而不是所有的人工作在一個代碼庫上？ …… 此外，這并不是一本純理論性書籍。書中配套了大量的相關實踐代碼，它們可以幫助讀者更好地理解架構的實踐。 | |
