前端技术架构与工程

明确业务、架构与工程三者之间的关系是研究前端技术架构和工程化的基本前提：业务为核心出发点，架构聚焦于代码，工程聚焦于流程。在此基础之上，本书进一步剖析并明确架构与工程的子集与超集关系。从架构的角度分析一个完整Web项目在前端以及前后端协作层面需要考虑的各项技术要点和解决方案；在业务需求以及应用质量得到保障的基础之上，进一步从工程的角度分析迭代流程中可能阻碍工作效率的各个环节和关键因素，并讲解如何通过技术手段提升团队的规范性和生产效率。

周俊鹏，前端工程师，现就职于腾讯，曾就职于优酷、搜狗等互联网企业。拥有多年一线前端开发和架构设计经验，做过大众的Web网站，也做过小众的SVG Charts；做过宏观到跨栈的前端工程化，也做过微观到像素的WebGL编程。目前专注于前端图形编程、工程化和Web应用层架构。

编辑推荐：

1 本书是《前端工程化系列》丛书之一，主要从宏观角度讲解前端技术架构和工程的各项关注点。

2 本书适合前端从业经历较丰富并且对前后端协作流程有深度体验的读者，以及对前端技术架构和工程化感兴趣的测试和运维人员阅读使用。

《前端工程化系列》丛书简介

本丛书包含两本书：《前端工程化：体系设计与实践》和《前端技术架构与工程》。前者着重讲述辅助性质的工程体系设计和实践过程，而后者则从宏观角度讲解前端技术架构和工程的各项关注点。与前者不同的是，后者对于前端工程服务体系的讲解侧重方法论和指导思想，并未深入具体实现的每一行代码。如果在将此部分理念应用于实践的过程中遇到问题，或许同时参阅两本书能够获取答案。

前　　言

在工程化思维进入前端领域的几年内，前端社区一直在试图给前端工程化下一个精确的定义。人们喜欢从历史讲起，然后将视角延伸到时代背景下的宏观技术理论，最后聚焦到自身业务的工程实践。在这个过程中，从第一步过渡到第二步的历程中能够提取出具有普适性的指导思想，宽泛地讲就是规范化、工具化、自动化；而发展到第三步的时候难免会带入一些只适合自身业务特征的方法论和实践模式。一部分声音认为这些狭隘的理论属于功能解决方案，脱离了前端工程化的范畴，但其实这恰恰是工程最基本且最核心的出发点：一切以业务为基准。

在对前端工程化进行讨论和研究之前，一定要摆脱“前端工程化是一种新技术”的错误认识，前端是软件开发的一个细化分支，前端工程化本质上是软件工程理论在前端范畴内的具象实践。方法、工具和过程是软件工程也是前端工程化的三要素，方法面向编码和功能解决方案；工具的根本目的是降低时间成本以提高效率；过程追求高效、有序的工作流程，它是一个抽象的概念，具体到实施中则是方法和工具的综合体。一切编码方案均是为了解决业务的功能需求，在此基础之上以分治和聚合为基本原则设计合理的软件架构，最后进一步规范工作流程和产品发布策略，这便是工程化的理论模型。总结为一句话：以业务为出发点，架构聚焦于代码，工程聚焦于流程。

内容概览

本书所有内容遵循一个基本出发点：业务是架构和工程的核心。

第1章围绕上述基本出发点讲解前端自诞生至今在不同时代背景下的意义以及业务特征，进而引申出架构和工程的子集与超集的关系。然后在此基础之上探讨前端工程化在架构以及架构之外的困难之处和核心关注点。

第2章在前端单一的编程语言基础上，从技术选型、辅助工具、实现方案以及架构模式的角度思考和探索如何更合理地应用HTML、JavaScript、CSS。

第3章聚焦于编码和架构这些“硬实力”之外的“软实力”—技术规范。除去所有编程领域的一些普适规则（比如技术选型、目录规范和命名规范），由于前端的特殊性，有些技术规范并不仅仅是为了提高代码的可维护性，它们还兼具了架构层面上的设计考虑，比如JavaScript在性能与易读性之间的抉择、CSS的编程范式等。

第4章介绍实现前端组件化的Web Components技术，以及通过开发合理的工具打造更友好的编码方式。然后从生命周期和宿主环境两个角度介绍前端组件设计模式。

第5章描述了两种常见的前后端分离架构模型：SPA和同构编程。前者是最普遍、实施成本最低、最极端的分离模式，但对SEO的弱支持导致其并非适用于所有产品类型；而后者则与前者相反，对SEO的良好支持背后是昂贵的实施成本和学习成本，同时对技术选型有一定的限制。探讨两者的综合优劣性时必须结合具体的产品需求。

第6章以前端应用的性能评估模型为前提，剖析加载和执行过程中影响性能的各项因素（包括网络、渲染和内存管理）以及对应的优化策略。最后探索综合运用Web Worker、WebAssembly甚至WebGPU，以发挥出浏览器的极限运算能力。

第7章将一个完整的迭代流程拆分为开发、测试、部署和发布，然后讨论在传统开发模式下前端如何从开发、测试和运维层面进行工程优化，其中包含高效的工具、合理的规范以及严谨的制度。

第8章在第7章描述的前端工程服务体系的前提之下，探讨在目前的技术背景下，前端工程化在本地化的基础上进一步演进的方向（DevOps）以及目标（持续交付）。最后，在本书的末尾对继AJAX和Node.js之后可能引起第三次前端革命的Serverless进行了展望。

读者对象

本书内容并非告诉读者如何实现具体的业务需求，所举示例也只是为了辅助理解相关内容背后的思想和理念。换句话说，本书不是教读者怎么编码的，而是从宏观角度讲解了如何实现高可用、高性能、可扩展的软件架构，以及高效、规范、有序的工作流程，所以本书的主要目标读者是有多年一线编码经验、充分理解Web整体架构并且具有一定的团队管理和多人协作经验的资深前端开发者和技术经理。

资源链接

本书所有示例的源代码均可以访问http://www.broadview.com.cn/38061进行下载。书中提供的额外参考资料也可从上述网站下载，如正文中标有参见“链接1”“链接2”等字样时，即可从上述网站下载的“参考资料.pdf”文件中进行查询。

致谢

本书的写作和出版得到了许多同事、朋友和家人的支持和帮助。本书中的很多技术细节得到了我的同事和领导的指正。感谢电子工业出版社的付睿编辑和审校人员对本书的策划和编审，他们是本书出版背后的重要功臣。此外，本书的写作占用了我很多业余时间，感谢我的妻子刘女士在此期间对我的理解、包容和支持。

谨以此书献给我的妻子和父母。

《前端工程化系列》丛书

本书是《前端工程化系列》丛书之一，从宏观角度讲解前端技术架构和工程的各项关注点。与本系列另一本图书《前端工程化：体系设计与实践》不同的是，本书对于前端工程服务体系的讲解侧重方法论和指导思想，并未深入具体实现的每一行代码。如果在将此部分理念应用于实践的过程中遇到问题，或许同时参阅两本书能够获取更全面的答案。

目　　录

第1章　前端工程化 1

1.1　前端的时代意义 2

1.2　架构与工程 9

1.3　零散的前端架构 12

1.4　模糊的前端工程边界 14

1.5　前端架构师的职责 16

1.5.1　技术架构 16

1.5.2　工程服务体系 20

1.6　总结 23

第2章　编程语言 24

2.1　HTML 25

2.1.1　SSR 26

2.1.2　CSR 28

2.2　CSS 34

2.2.1　从编程语言的角度思考CSS 37

2.2.2　LESS和PostCSS 40

2.2.3　CSS-in-JS 42

2.2.4　Houdini 45

2.3　JavaScript 46

2.3.1　静态类型 48

2.3.2　不可变性 51

2.3.3　异步编程 53

2.4　总结 59

第3章　技术规范 61

3.1　技术选型 62

3.2　资源管理 65

3.2.1　目录结构 66

3.2.2　命名规范 70

3.3　编码风格 73

3.3.1　JavaScript的高性能与易读性 77

3.3.2　CSS编程范式与面向对象 79

3.4　总结 85

第4章　组件化 87

4.1　组件与模块 88

4.2　Web Components 93

4.2.1　自定义元素 94

4.2.2　Shadow DOM 104

4.2.3　HTML template 109

4.3　更友好的编码方式 115

4.3.1　多文件组件 116

4.3.2　单文件组件 120

4.4　设计模式 121

4.4.1　重新思考DOM 122

4.4.2　生命周期的设计艺术 123

4.5　总结 124

第5章　前后端分离 125

5.1　关注点分离 126

5.2　SPA与路由管理 129

5.2.1　Hash模式 130

5.2.2　History模式 136

5.3　Node.js中间层与同构编程 138

5.3.1　同构JavaScript 140

5.3.2　React同构方案 141

5.4　总结 150

第6章　性能 151

6.1　性能评估模型 152

6.2　从URL到图像 156

6.2.1　网络 159

6.2.2　渲染 166

6.3　内存管理 170

6.3.1　GC算法 171

6.3.2　内存泄漏 177

6.4　极限运算性能 180

6.5　总结 184

第7章　工程思维与服务支撑 185

7.1　工程思维 186

7.2　开发支撑 189

7.2.1　脚手架 190

7.2.2　构建 192

7.2.3　dev server 200

7.2.4　源码管理 201

7.3　测试支撑 207

7.3.1　测试模型 208

7.3.2　依赖注入 213

7.3.3　前后端集成 214

7.4　运维支撑 215

7.4.1　一键部署 216

7.4.2　日志埋点 217

7.4.3　性能监控 221

7.5　总结 222

第8章　DevOps与Serverless 223

8.1　DevOps与敏捷开发 224

8.1.1　敏捷开发 224

8.1.2　DevOps 228

8.2　持续交付 230

8.2.1　持续集成 230

8.2.2　低风险发布 234

8.3　Serverless与前端 236

8.3.1　BFF 236

8.3.2　Serverless 239

8.4　总结 242