《前端架构:从入门到微前端》
《前端架构:从入门到微前端》
PHODAL

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

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

  • 设计:讲述了架构设计的模式,以及设计和制定前端工作流。
  • 基础:通过深入构建系统、单页面应用原理、前端知识体系等,来构建出完整的前端应用架构体系。
  • 实施:通过与代码结构的方式,介绍如何在企业级应用中实施组件化架构、设计系统和前后端分离架构。
  • 微前端:引入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 高级咨询师

工程师 / 咨询师 / 作家 / 设计学徒

开源深度爱好者

出版有《前端架构:从入门到微前端》、《自己动手设计物联网》、《全栈应用开发:精益实践》

联系我: h@phodal.com

微信公众号: 与我沟通