前端架构设计pdf

前端架构是一系列工具和流程的集合，旨在提升前端代码质量，并实现高效、可持续的工作流。对于大型Web项目，前端架构师和软件架构师同样不可或缺。

本书作者通过Red Hat公司真实案例分析以及以往经验积累的实用技巧，系统总结了前端架构的四个核心，详细展示了新的前端开发准则，将Web开发提升到了一个新高度。

前端架构四个核心：

● 代码——如何实现系统架构中的HTML、CSS和JavaScript

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

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

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

前端架构师职责：

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

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

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

前端架构设计 内容简介

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

前端架构设计 目录

第一部分 引言

第1章 前端架构原则

第2章 Alpha项目

2.1 慢而有力的开端

2.2 全副武装

第3章 前端架构的核心

3.1 围绕四个核心工作

3.2 四个核心的含义

第二部分 代码核心

第4章 HTML

4.1 过去处理标记的方法

4.1.1 程序式标记：自动化程度100％，可控程度0％

4.1.2 静态标记：自动化程度0％，可控程度100％

4.2 平衡可控性和自动化

4.3 这一切背后的设计系统

4.4 模块化CSS理论的多面性

4.4.1 OOCSS方法

4.4.2 SMACSS方法

4.4.3 BEM方法

4.5 选择适合的方案

第5章 CSS

5.1 特性之争与继承之痛

5.2 一种现代的、模块化的方法

5.3 其他有助益的原则

5.3.1 单一职责原则

5.3.2 单一样式来源

5.3.3 组件修饰符

5.4 小结

第6章 JavaScript

6.1 选择框架

6.2 维护整洁的JavaScript代码

6.2.1 保持代码整洁

6.2.2 创造可复用的函数

6.3 小结

第7章 Red Hat代码

7.1 过多的依赖

7.2 严重的位置依赖问题

7.3 设计分解

7.4 组件分类

7.5 BB鸟规则

7.6 编写你自己的规则

7.7 每个标签指定唯一的选择器

7.7.1 单一责任原则

7.7.2 样式只有单一的来源

7.7.3 可选的修饰符

7.7.4 可选的上下文

7.8 语义化的网格

第三部分 流程核心

第8章 工作流

8.1 过去的开发工作流

8.2 现代的开发工作流

8.2.1 需求

8.2.2 原型设计

8.2.3 程序开发

8.3 前端工作流

8.3.1 必要的工具

8.3.2 本地部署

8.3.3 编写用户故事

8.4 开发

8.5 发布

8.6 提交编译后的资源

8.7 持续集成的服务器

8.7.1 标签分支

8.7.2 究竟为什么要这么做

8.8 发布渠道

第9章 任务处理器

9.1 在任务处理器中完成一切

9.2 在项目中使用任务处理器

9.3 有明显的优胜者吗

第10章 Red Hat流程

10.1 征服最后一英里

10.2 模式驱动的设计系统

第四部分 测试核心

第11章 单元测试

11.1 单元

11.1.1 更多重用

11.1.2 更好的测试

11.2 测试驱动的开发

11.3 一个测试驱动的例子

11.4 测试覆盖率要多大才足够

11.4.1 解决分歧点

11.4.2 从测试覆盖率开始

第12章 性能测试

12.1 制定性能预算

12.1.1 竞争基线

12.1.2 平均基准

12.2 原始指标

12.2.1 页面大小

12.2.2 HTTP请求次数

12.3 计时度量

12.4 混合度量标准

12.4.1 PageSpeed分数

12.4.2 Speed Index指标

12.5 设置性能测试

12.5.1 Grunt PageSpeed插件

12.5.2 Grunt Perfbuget插件

12.6 小结

第13章 视觉还原测试

13.1 常见的质疑

13.1.1 不了解情况的开发者

13.1.2 不一致的设计

13.1.3 举棋不定的决策者

13.2 一个经过测试的解决方案

13.3 视觉还原测试的多面性

第14章 Red Hat测试方法

14.1 实践视觉还原测试

14.1.1 测试工具集

14.1.2 设置Grunt

14.1.3 测试文件

14.1.4 对比

14.1.5 运行全部测试用例

14.1.6 如何应对测试失败

14.1.7 从失败到成功

14.1.8 修改代码以适应需求

14.1.9 将基准图片放在组件目录里

14.1.10 独立运行每个组件的测试集

14.1.11 测试的可扩展性

14.2 小结

第五部分 文档核心

第15章 样式文档

15.1 配置Hologram

15.1.1 Hologram的文档注释块

15.1.2 Hologram编译流程

15.1.3 Hologram小结

15.2 SassDoc

15.2.1 安装SassDoc

15.2.2 使用SassDoc

15.2.3 探索SassDoc

15.2.4 深入了解SassDoc

15.2.5 内部依赖

15.3 小结

第16章 图形库

16.1 何为Pattern Lab

16.2 运行Pattern Lab

16.3 首页模板

16.4 首变量

16.5 原子

16.6 发挥原子的作用

第17章 Red Hat文档

17.1 阶段1：静态的样式文档

17.2 阶段2：重写Pattern Lab

17.3 阶段3：分拆模式库和样式文档

17.4 阶段4：创建统一的渲染引擎

17.5 阶段5：自动创建新模式

第18章 总结

前端架构设计 精彩文摘

第 2 章　Alpha 项目

在过去的一年里，我有幸以架构师的身份参与了 Red Hat 公司的一个项目，该项目希望将已有的网站组件共享到公司的多个网站中。在构建 Redhat.com 一段时间之后，我知道自己还是面临很多挑战。我花了一些时间建立起开发团队对我的信任，最终得以全权负责整个项目的架构。

这个机会非常难得，因为有了它，我们才能解决“先有鸡还是先有蛋”的问题。我的团队有机会去搭

建一个庞大的、有足够技术支撑的设计方案，并且整个方案最终会被展现在一个流量很大的站点中。这将会成为一个标志性的项目，能够让我在后续其他项目中推广前端架构设计的理念。

2.1　慢而有力的开端

能够在这个时候与 Red Hat 公司合作，我的团队实在是太幸运了。我们对旧站点进行了重新设计之后，并没有马上着手开发新功能。虽然我们时不时也需要处理一下 bug，但毕竟还是有几个月的时间去研究如何为这个系统设计全新的架构。

尽管在 Redhat.com 生产环境中仍然有大量的遗留代码，我们还是选择了从零开始。因为原来的站点是基于块（一行接一行的独立内容）设计的，所以我们新开发的网页元素可以布局在已有内容块的上方或下方。我们不需要重写侧边栏的样式，也不需要频繁地改变 HTML 标签的样式。实际上，我们相当于在旧站点中构建全新的网站。正如船上的甲板可以一块一块地被替代，我们希望最终也可以替换原有的系统，完全使用新的系统。