前端架构:从入门到微前端

第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