本书展示了一名成熟的前端架构师对前端开发全面而深刻的理解。作者结合自己在Red Hat公司的项目实战经历，探讨了前端架构原则和前端架构的核心内容，包括工作流程、测试流程和文档记录，以及作为前端架构师所要承担的具体开发工作，包括HTML、JavaScript和CSS等。

【作者介绍】

Micah Godbolt，前端架构师，作家，播客播主，世界ji开源大会的培训师和演讲师。他在个人博客（https://micahgodbolt.com）中经常大力推广前端架构、Sass、视觉还原测试和基于模式的设计方法。他出生于太平洋西北地区，目前和妻子以及两个孩子定居于波特兰的郊区。

【译者介绍】

潘泰燊，毕业于广东外语外贸大学，曾就职于腾讯、百度等互联网公司，参与过腾讯QQ空间、百度地图等海量数据业务的Web开发工作，现就职于富途网络。

张鹏，硕士毕业于中山大学，曾就职于百度、腾讯等知名互联网公司，参与过基于LNMP架构的亿级别互联网应用的设计与实现，目前从事NodeJS与前端开发。

许金泉，毕业于深圳大学，毕业后加入百度FEX，曾主导UEditor、百度国际化浏览器等前端开发工作，现就职于腾讯云。

【审校介绍】

李弦，华为2012实验室UCD交互设计师，Monash University交互设计硕士，前新东方英语教师，广东外语外贸大学英语专业八级。

前言 xi
第一部分 引言
第 1 章 前端架构原则 7
第 2 章 Alpha 项目 11
2．1 慢而有力的开端 11
2．2 全副武装 12
第 3 章 前端架构的核心 15
3．1 围绕四个核心工作 15
3．2 四个核心的含义 16
第二部分 代码核心
第 4 章 HTML 19
4．1 过去处理标记的方法 19
4．1．1 程序式标记：自动化程度 100%，可控程度 0% 19
4．1．2 静态标记：自动化程度 0%，可控程度 100% 20
4．2 平衡可控性和自动化 21
4．3 这一切背后的设计系统 22
4．4 模块化 CSS 理论的多面性 22
4．4．1 OOCSS 方法 23
4．4．2 SMACSS 方法 23
4．4．3 BEM 方法 24
4．5 选择适合的方案 25
第 5 章 CSS 27
5．1 特性之争与继承之痛 28
5．2 一种现代的、模块化的方法 30
5．3 其他有助益的原则 32
5．3．1 单一职责原则 32
5．3．2 单一样式来源 33
5．3．3 组件修饰符 34
5．4 小结 35
第 6 章 JavaScript 37
6．1 选择框架 37
6．2 维护整洁的 JavaScript 代码 38
6．2．1 保持代码整洁 38
6．2．2 创造可复用的函数 38
6．3 小结 40
第 7 章 Red Hat 代码 41
7．1 过多的依赖 41
7．2 严重的位置依赖问题 42
7．3 设计分解 42
7．4 组件分类 43
7．5 BB 鸟规则 44
7．6 编写你自己的规则 44
7．7 每个标签指定唯一的选择器 46
7．7．1 单一责任原则 46
7．7．2 样式只有单一的来源 47
7．7．3 可选的修饰符 47
7．7．4 可选的上下文 50
7．8 语义化的网格 53
第三部分 流程核心
第 8 章 工作流 57
8．1 过去的开发工作流 57
8．2 现代的开发工作流 58
8．2．1 需求 58
8．2．2 原型设计 58
8．2．3 程序开发 58
8．3 前端工作流 59
8．3．1 必要的工具 59
8．3．2 本地部署 59
8．3．3 编写用户故事 60
8．4 开发 61
8．5 发布 62
8．6 提交编译后的资源 62
8．7 持续集成的服务器 63
8．7．1 标签分支 64
8．7．2 究竟为什么要这么做 64
8．8 发布渠道 64
第 9 章 任务处理器 67
9．1 在任务处理器中完成一切 68
9．2 在项目中使用任务处理器 69
9．3 有明显的优胜者吗 71
第 10 章 Red Hat 流程 73
10．1 征服最后一英里 73
10．2 模式驱动的设计系统 75
第四部分 测试核心
第 11 章 单元测试 87
11．1 单元 87
11．1．1 更多重用 88
11．1．2 更好的测试 88
11．2 测试驱动的开发 88
11．3 一个测试驱动的例子 89
11．4 测试覆盖率要多大才足够 90
11．4．1 解决分歧点 90
11．4．2 从测试覆盖率开始 90
第 12 章 性能测试 91
12．1 制定性能预算 91
12．1．1 竞争基线 92
12．1．2 平均基准 92
12．2 原始指标 93
12．2．1 页面大小 93
12．2．2 HTTP 请求次数 94
12．3 计时度量 94
12．4 混合度量标准 95
12．4．1 PageSpeed 分数 95
12．4．2 Speed Index 指标 95
12．5 设置性能测试 95
12．5．1 Grunt PageSpeed 插件 96
12．5．2 Grunt Perfbuget 插件 96
12．6 小结 97
第 13 章 视觉还原测试 99
13．1 常见的质疑 99
13．1．1 不了解情况的开发者 100
13．1．2 不一致的设计 100
13．1．3 举棋不定的决策者 100
13．2 一个经过测试的解决方案 101
13．3 视觉还原测试的多面性 101
第 14 章 Red Hat 测试方法 103
14．1 实践视觉还原测试 103
14．1．1 测试工具集 103
14．1．2 设置 Grunt 104
14．1．3 测试文件 104
14．1．4 对比 105
14．1．5 运行全部测试用例 106
14．1．6 如何应对测试失败 107
14．1．7 从失败到成功 107
14．1．8 修改代码以适应需求 108
14．1．9 将基准图片放在组件目录里 108
14．1．10 独立运行每个组件的测试集 109
14．1．11 测试的可扩展性 110
14．2 小结 111
第五部分 文档核心
第 15 章 样式文档 117
15．1 配置 Hologram 117
15．1．1 Hologram 的文档注释块 119
15．1．2 Hologram 编译流程 120
15．1．3 Hologram 小结 121
15．2 SassDoc 121
15．2．1 安装 SassDoc 121
15．2．2 使用 SassDoc 122
15．2．3 探索 SassDoc 123
15．2．4 深入了解 SassDoc 124
15．2．5 内部依赖 125
15．3 小结 127
第 16 章 图形库 129
16．1 何为 Pattern Lab 129
16．2 运行 Pattern Lab 131
16．3 首页模板 133
16．4 首变量 134
16．5 原子 135
16．6 发挥原子的作用 135
第 17 章 Red Hat 文档 137
17．1 阶段 1：静态的样式文档 137
17．2 阶段 2：重写 Pattern Lab 139
17．3 阶段 3：分拆模式库和样式文档 142
17．4 阶段 4：创建统一的渲染引擎 143
17．5 阶段 5：自动创建新模式 144
第 18 章 总结 147
作者介绍 149
封面介绍 149

前端架构是一系列工具和流程的合集，旨在提升前端代码的质量，并实现高效、可持续的工作流。

工作职责：

体系设计——清晰描绘产品和代码的最终形态

工作规划——制定完整开发工作流

监督跟进——保证项目高效率完成

前端架构四个核心：

代码——如何实现系统架构中的HTML,CSS,Javascript

流程——构建高效并且防止出错的工作流所需要的工具和流程

测试——为网站搭建稳固基础

文档——规划好系统设计的蓝图

OOCSS方法

两个重要原则：分离结构和外观（将视觉特性定义为可复用单元），分离容器和内容（不再将元素位置作为样式的限定词）

SMACSS方法

将样式系统划分为以下5个具体的类别

基础： 如果不添加CSS类名，标记会以什么外观呈现

布局：把页面分为一些区域

模块：设计中的模块化，可复用的单元

状态： 描述在特定的状态或情况下，模块或布局的呈现方式

主题：一个可选的视觉外观层，在不同主题下标记的呈现

单一职责原则，规定你创建的所有东西必须有单一的、高度聚焦的理由。

单一样式来源，每个标签的样式只有唯一的样式来源，如果样式散落在多个文件各个角落里，维护修改起来将会非常困难

避免CSS样式发生“最高优先级”争夺赛

永远不要给布局的字内容强加内边距和元素样式，布局只关注垂直对齐、水平对齐和文字间距。

主题和别的数据属性值永远不要强制改变外观，他们必须保持布局、组件和元素可以应用于其上

组卷总是贴着它的父容器的四个边，元素都没有上外边距和左外边距，所有的最后节点（最右边和最下边的节点）的外边距都会被清除

组件本身永远不要添加背景，宽度，浮动，内边距和外边距的样式，组卷样式是组件内元素的样式

每个元素都有且只有一个唯一的作用域只在组件内的CSS类名，所有的样式都是直接应用到这个选择器，并且只有上下文和主题能修改元素样式

永远不要在元素上使用上外边距，第一个元素总是贴着它所在的组件顶部

Javascript永远不要绑定任何元素的CSS类名，选中元素通过数据属性实现

测试驱动的设计，在动手编写具体代码之前，先写好一套测试用例，用来描述代码应完成什么样的功能，随着功能的完善，测试通过，功能完成。

模式驱动的设计系统

为了追求极致的界⾯面响应效率，需要尽可能的提⾼高程序资源的加载速度，资源加载将深⼊入影响web前端系统的运⾏方式，因此web前端架构设计要充分考虑资源加载与管理的问题。

充分考虑资源加载与管理

1. 按需：最小化增量加载资源

2. 合并：提高多个资源加载的总体速度

3. 缓存：充分利用浏览器缓存实现媲美本地应用的响应速率