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

●目    录 章 前端架构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 业务回补期：应对次Deadline33 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 开源项目方式 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 xxx114 5.3 复杂多页面应用的开发115 5.3.1 模板与模板引擎原理115 5.3.2 基于字符串的模板引擎设计116 5.3.3 基于的模板引擎设计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 进阶：设计双向绑定的MVC135 前端框架选型138 .1 选型考虑因素139 .2 框架类型：大而全还是小而美140 .3 框架：React142 .4 框架：Angular143 .5 框架：Vue145 .6 选型总结146 6.5 启动前端应用146 6.5.1 创建应用脚手架147 6.5.2 构建组件库148 6.5.3 考虑浏览器的支持范围150 6.6 服务端渲染155 6.6.1 非语言的同构渲染155 6.6.2 基于语言的同构渲染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 Components192 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 Server205 8.3.1 什么是Mock Server205 8.3.2 三种类型Mock Server的比较207 8.3.3 Mock Server的测试：契约测试212 8.3.4 前后端并行开发总结217 8.4 服务于前端的后端：BFF218 8.4.1 为什么使用BFF218 8.4.2 前后端如何实现BFF221 8.4.3 使用GraphQL作为BFF223 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 前端容器：iframe239 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. 高内聚，低耦合254 9.7 “微”害架构254 9.7.1 微架构256 9.7.2 架构的演进256 9.7.3 微架构带来的问题257 9.7.4 解决方式：可拆分式微架构259 9.8 小结259 0章 微前端实战261 10.1 遗留系统：路由分发262 10.1.1 路由分发式微前端263 10.1.2 路由分发的测试2 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-SPA276 10.4.3 定制型前端微服务化：Mooa279 10.4.4 前端微服务化总结283 10.5 组件化微前端：微件化283 10.5.1 运行时编译微件化：动态组件渲染284 10.5.2 预编译微件化287 10.6 面向未来：Web Components288 10.6.1 Web Components289 10.6.2 纯Web Components方式291 10.6.3 结合Web Components方式293 10.7 小结295 1章 架构演进：演进式架构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