《前端架构：从入门到微前端》

本书是一本围绕前端架构的实施手册，从基础的架构规范，到如何设计前端架构，再到采用微前端架构拆分复杂的前端应用。本书通过系统地介绍前端架构世界的方方面面，来帮助前端工程师更好地进行系统设计。

前端架构包含以下五部分内容。

• 设计：讲述了架构设计的模式，以及设计和制定前端工作流。
• 基础：通过深入构建系统、单页面应用原理、前端知识体系等，来构建出完整的前端应用架构体系。
• 实施：通过与代码结构的方式，介绍如何在企业级应用中实施组件化架构、设计系统和前后端分离架构。
• 微前端：引入6种微前端的概念，以及如何划分、设计微前端应用，并展示了如何实现这6种微前端架构。
• 演进：提出更新、迁移、重构、重写、重新架构等架构演进方式，来帮助开发人员更好地设计演进式架构

本书适合想要成为优秀前端开发工程师（初中级），或致力于构建更易于维护的系统架构的开发人员、技术主管、软件架构师和软件项目经理等。

• 第 1 章 前端架构
  • 1.1 为什么需要软件架构
    • 1.1.1 什么是软件架构
    • 1.1.2 开发人员需要怎样的软件架构
  • 1.2 架构的设计
    • 1.2.1 收集架构需求
    • 1.2.2 架构模式
    • 1.2.3 架构设计方法
    • 1.2.4 生成架构产出物
  • 1.3 架构设计原则
    • 1.3.1 不多也不少
    • 1.3.2 演进式
    • 1.3.3 持续性
  • 1.4 前端架构发展史
  • 1.5 前端架构设计：层次设计
    • 1.5.1 系统内架构
    • 1.5.2 应用级架构
    • 1.5.3 模块级架构
    • 1.5.4 代码级：规范与原则
  • 1.6 小结
• 第 2 章 项目中的技术架构实施
  • 2.1 技术负责人与架构
  • 2.2 技术准备期：探索技术架构
    • 2.2.1 架构设计
    • 2.2.2 概念验证：架构的原型证明
    • 2.2.3 迭代0：搭建完整环境
    • 2.2.4 示例项目代码：体现规范与原则
  • 2.3 业务回补期：应对第一次Deadline
    • 2.3.1 追补业务
    • 2.3.2 测试：实践测试策略
    • 2.3.3 上线准备
    • 2.3.4 第一次部署：验证部署架构
    • 2.3.5 提升团队能力
  • 2.4 成长优化期：技术债务与演进
    • 2.4.1 偿还技术债务
    • 2.4.2 优化开发体验
    • 2.4.3 带来技术挑战
    • 2.4.4 架构完善及演进
  • 2.5 小结
• 第 3 章 架构基础：工作流设计
  • 3.1 代码之旅：基础规范
  • 3.2 代码组织决定应用架构
  • 3.3 统一代码风格，避免架构腐烂
  • 3.4 使用Lint规范代码
  • 3.5 规范化命名，提升可读性
    • 3.5.1 命名法
    • 3.5.2 CSS及其预处理器命名规则
    • 3.5.3 组件命名规则
  • 3.6 规范开发工具，提升开发效率
  • 3.7 项目的文档化：README搭建指南
  • 3.8 绘制架构图：减少沟通成本
    • 3.8.1 代码生成
    • 3.8.2 专业工具
    • 3.8.3 软件附带工具
    • 3.8.4 在线工具
  • 3.9 可编辑文档库：提升协作性
  • 3.10 记录架构决策：轻量级架构决策记录
  • 3.11 可视化文档：注重代码的可读性
  • 3.12 看板工具：统一管理业务知识
  • 3.13 提交信息：每次代码提交文档化
    • 3.13.1 项目方式
    • 3.13.2 开源项目方式
    • 3.13.3 对比不同文档方式
  • 3.14 通过流程化提高代码质量
    • 3.14.1 代码预处理
    • 3.14.2 手动检视代码
  • 3.15 使用工具提升代码质量
    • 3.15.1 代码扫描工具
    • 3.15.2 IDE 快速重构
  • 3.16 测试策略
    • 3.16.1 单元测试
    • 3.16.2 组件测试
    • 3.16.3 契约/接口测试
  • 3.17 小结
• 第 4 章 架构基础：设计构建流
  • 4.1 依赖管理工具
  • 4.2 软件包源管理
  • 4.3 前端代码的打包
  • 4.4 设计构建流
  • 4.5 持续交付问题
  • 4.6 小结
• 第 5 章 架构设计：多页面应用
  • 5.1 为什么不需要单页面应用
    • 5.1.1 构建成本
    • 5.1.2 学习成本
    • 5.1.3 后台渲染成本
    • 5.1.4 应用架构的复杂性
  • 5.2 简单多页面应用的开发
    • 5.2.1 选择UI库及框架
    • 5.2.2 jQuery和Bootstrap仍然好用
    • 5.2.3 不使用框架：You Don’t Need xxx
  • 5.3 复杂多页面应用的开发
    • 5.3.1 模板与模板引擎原理
    • 5.3.2 基于字符串的模板引擎设计
    • 5.3.3 基于JavaScript的模板引擎设计
    • 5.3.4 双向绑定原理及实践
    • 5.3.5 前端路由原理及实践
    • 5.3.6 两种路由类型
    • 5.3.7 自造Hash路由管理器
  • 5.4 避免散弹式架构
    • 5.4.1 散弹式架构应用
    • 5.4.2 如何降低散弹性架构的出现频率
  • 5.5 小结
• 第 6 章 架构设计：单页面应用
  • 6.1 前端MV*原理
  • 6.2 前端MVC架构原理
  • 6.3 进阶：设计双向绑定的MVC
  • 6.4 前端框架选型
    • 6.4.1 选型考虑因素
    • 6.4.2 框架类型：大而全还是小而美
    • 6.4.3 框架：React
    • 6.4.4 框架：Angular
    • 6.4.5 框架：Vue
    • 6.4.6 选型总结
  • 6.5 启动前端应用
    • 6.5.1 创建应用脚手架
    • 6.5.2 构建组件库
    • 6.5.3 考虑浏览器的支持范围
  • 6.6 服务端渲染
    • 6.6.1 非JavaScript语言的同构渲染
    • 6.6.2 基于JavaScript语言的同构渲染
    • 6.6.3 预渲染
  • 6.7 小结
• 第 7 章 架构设计：组件化架构
  • 7.1 前端的组件化架构
  • 7.2 基础：风格指南
    • 7.2.1 原则与模式
    • 7.2.2 色彩
    • 7.2.3 文字排印
    • 7.2.4 布局
    • 7.2.5 组件
    • 7.2.6 文档及其他
    • 7.2.7 维护风格指南
  • 7.3 重用：模式库
    • 7.3.1 组件库
    • 7.3.2 组件类型
    • 7.3.3 隔离：二次封装
  • 7.4 进阶：设计系统
    • 7.4.1 设立原则，创建模式
    • 7.4.2 原子设计
    • 7.4.3 维护与文档
  • 7.5 跨框架组件化
    • 7.5.1 框架间互相调用：Web Components
    • 7.5.2 跨平台模式库
  • 7.6 小结
• 第 8 章 架构设计：前后端分离架构
  • 8.1 前后端分离
    • 8.1.1 为什么选择前后端分离
    • 8.1.2 前后端分离的开发模式
    • 8.1.3 前后端分离的API设计
  • 8.2 API管理模式：API文档管理方式
  • 8.3 前后端并行开发：Mock Server
    • 8.3.1 什么是Mock Server
    • 8.3.2 三种类型Mock Server的比较
    • 8.3.3 Mock Server的测试：契约测试
    • 8.3.4 前后端并行开发总结
  • 8.4 服务于前端的后端：BFF
    • 8.4.1 为什么使用BFF
    • 8.4.2 前后端如何实现BFF
    • 8.4.3 使用GraphQL作为BFF
  • 8.5 小结
• 第 9 章 架构设计：微前端架构
  • 9.1 微前端
    • 9.1.1 微前端架构
    • 9.1.2 为什么需要微前端
  • 9.2 微前端的技术拆分方式
    • 9.2.1 路由分发式
    • 9.2.2 前端微服务化
    • 9.2.3 组合式集成：微应用化
    • 9.2.4 微件化
    • 9.2.5 前端容器：iframe
    • 9.2.6 结合Web Components构建
  • 9.3 微前端的业务划分方式
    • 9.3.1 按照业务拆分
    • 9.3.2 按照权限拆分
    • 9.3.3 按照变更的频率拆分
    • 9.3.4 按照组织结构拆分
    • 9.3.5 跟随后端微服务拆分
    • 9.3.6 DDD与事件风暴
  • 9.4 微前端的架构设计
    • 9.4.1 构建基础设施
    • 9.4.2 提取组件与模式库
    • 9.4.3 应用通信机制
    • 9.4.4 数据管理
    • 9.4.5 专用的构建系统
  • 9.5 微前端的架构模式
    • 9.5.1 基座模式
    • 9.5.2 自组织模式
  • 9.6 微前端的设计理念
    • 9.6.1 中心化：应用注册表
    • 9.6.2 标识化应用
    • 9.6.3 生命周期
    • 9.6.4 高内聚，低耦合
  • 9.7 “微”害架构
    • 9.7.1 微架构
    • 9.7.2 架构的演进
    • 9.7.3 微架构带来的问题
    • 9.7.4 解决方式：可拆分式微架构
  • 9.8 小结
• 第10章 微前端实战
  • 10.1 遗留系统：路由分发
    • 10.1.1 路由分发式微前端
    • 10.1.2 路由分发的测试
  • 10.2 遗留系统微前端：使用iframe作为容器
  • 10.3 微应用化
    • 10.3.1 微应用化
    • 10.3.2 架构实施
    • 10.3.3 测试策略
  • 10.4 前端微服务化
    • 10.4.1 微服务化设计方案
    • 10.4.2 通用型前端微服务化：Single-SPA
    • 10.4.3 定制型前端微服务化：Mooa
    • 10.4.4 前端微服务化总结
  • 10.5 组件化微前端：微件化
    • 10.5.1 运行时编译微件化：动态组件渲染
    • 10.5.2 预编译微件化
  • 10.6 面向未来：Web Components
    • 10.6.1 Web Components
    • 10.6.2 纯Web Components方式
    • 10.6.3 结合Web Components方式
  • 10.7 小结
• 第11章 架构演进：演进式架构
  • 11.1 更新
    • 11.1.1 依赖和框架版本升级
    • 11.1.2 语言版本升级
    • 11.1.3 遗留系统重搭
  • 11.2 迁移
    • 11.2.1 架构迁移的模式
    • 11.2.2 迁移方式：微前端
    • 11.2.3 迁移方式：寻找容器
  • 11.3 重构
    • 11.3.1 架构重构
    • 11.3.2 组件提取、函数提取、样式提取
    • 11.3.3 引入新技术
  • 11.4 重写
    • 11.4.1 重写能解决问题吗
    • 11.4.2 梳理业务
    • 11.4.3 沉淀新架构
  • 11.5 重新架构
    • 11.5.1 重搭架构
    • 11.5.2 增量改写
  • 11.6 小结

Phodal Huang

Developer, Consultant, Writer, Designer

ThoughtWorks 高级咨询师

联系我: [email protected]

微信公众号: 与我沟通