1.本书由周爱民老师倾情作序,美团技术总监赵强、搜狐高级技术经理邵充、Facebook软件工程师邓凌飞、ofo前端架构师代学辉联袂力荐。
2.本书系统、全面地介绍了前端工程体系的各个环节,包括设计要点和实践经验。全书分为7章,分别包括绪论、脚手架、构建、本地开发服务器、部署、工作流、前端工程化的未来。
3.本书以本地工具链形态的前端工程化方案Boi为例,以Yeoman为内核的脚手架、以Express承载本地服务器、以webpack为内核的构建系统、基于SFTP协议的远程部署功能,这个方案的很多理念可以作为论证本书观点的参考。
4.前端工程化现在正处于不断探索的初级阶段,这本书提供了大量的前端工程师可借鉴、参考并投之于生产实作的实践,适合前端工程师进阶学习和参考。
前端工程师这一岗位最初被独立分化出来专注于网页样式(CSS)的制作,目的是为了令Web开发者将更多的精力投入负责的业务逻辑中。然而随着Web技术的发展以及PC、移动智能终端设备性能和功能的提升,用户对于网站的需求也不断增加。市场的需求促进技术的革新,对于前端工程师的要求早已不仅仅是编写CSS了。资源的多样性和逻辑的复杂性一度令前端开发工作异常烦琐且难以维护,工作效率的降低直接导致Web产品的迭代速度变慢,前端工程化便是在此时代背景下应运而生的。
事实上,前端工程化目前的形态和生态仍然处于非常原始的阶段。每个团队甚至每个人由于存在研究领域(比如业务层和框架层)和业务类型(比如Google Map与淘宝)的差异,从而对前端工程化有不同的需求和定位。本书将前端工程化解读为一系列规范和流程的集合,它不是一个框架或者工具,聚焦的不是某个垂直的研究领域或者特殊的业务类型,而是一种可演化、可扩展的服务,服务的目标是解决前端开发以及前后端协作开发过程中的难点和痛点问题,涵盖项目的起始、开发、测试以及部署环节。工具是前端工程化的实现媒介,规范是工程化的指导方针,工作流程是工程化的外在表现形式以及约束规范的载体。
本书通过解析一个Web项目迭代过程中前端开发者面临的诸多问题,从工程化的角度给出对应的解决方案,最终将各个环节串联为完整的工作流。希望读者通过阅读本书可以对前端工程化要解决的问题有大致的了解,从而能够对读者自行实现工程化方案有所帮助。
目标读者
本书的主要目标读者是对前端工程化有一定理解和实践的中高级前端工程师,同样适用于对前端工程化感兴趣的服务器端开发者以及运维人员。本书假设读者熟悉Web站点的基本工作原理,尤其是前端与服务器端之间的协作流程,并且对HTTP协议、异步通信、模块化等知识有深入的理解。
示例代码
本书选取了一个简易的前端工程化解决方案Boi作为示例,这并不是一个完整形态的解决方案,但是它的许多理念可以作为论证本书观点的参考。读者可以从GitHub上获取其源码:https://github.com/boijs/boi。
内容概览
本书第1章以前端工程师从无到有直至发展至今的历程作为后续内容的起始。从历史中我们提炼出前端开发人员在一个Web项目迭代周期各个阶段面临的诸多问题,这些问题是前端工程化诞生的催化剂,也是指导工程方案设计的本源。之后,我们会按照Web项目从起始到发布的流程分别介绍前端工程化在各个阶段的需求和功能设计,比如脚手架在项目初期减少了重复的体力操作并且降低了业务框架学习成本;构建系统从编程语言、优化和部署 3 个角度解决了前端开发语言内在的缺陷以及由宿主客户端特性引起的开发和生产环境之间的差异性;本地开发服务器提供了前后端并行开发的平台;部署功能权衡速度、协作和安全,把控着Web产品上线前的最后一道关卡。最后将这些功能模块合理地串联为完整的工作流,便是前端工程化的完整外在形态。
前端工程师的定位在不同的年代甚至不同的团队中存在着巨大的差异,即使仅以目前的时间节点为标准也难以给前端工程师一个绝对明确的定义。岗位职责的变化促进了工程体系的演进,所以本书在最后的章节中阐述了一些对前端工程师未来定位的思考,同时探讨了与之对应的前端工程体系的演进形式。
以下是分章节介绍:
第1章 前端工程简史 讲述前端工程师的发展史、在团队中的定位,以及前后端分离和前端工程化的进化历程与基本形态。
第2章 脚手架 讲述作为前端项目起始阶段取代烦琐人工操作的脚手架必须具备的要素以及本质,通过剖析目前市面上的经典案例讲解实现脚手架过程中需要考虑的要点以及如何集成Yeoman到工程化方案中。
第3章 构建 讲述构建系统面临的问题以及对应的解决方案。构建是前端工程体系中功能最多、最复杂的模块,也是串联本地开发服务器、部署的关键,是实现工作流的核心模块。
第4章 本地开发服务器 讲述如何以Mock服务实现前后端并行开发,以及配合动态构建进一步提升前端工程师的开发效率。
第5章 部署 讲述部署功能如何权衡速度、协作和安全3个重要原则,以及前端静态资源特殊的部署策略。
第6章 工作流 讲述如何将既有的功能串联成完整的工作流。以速度见长的本地工作流和注重严谨的云平台工作流,两者各有优劣,适用于不同需求和不同规模的团队。
第7章 前端工程化的未来 讲述前端工程师如何选择进阶的方向以便适应未来的变化。前端工程化是服务于前端开发的,前端工程师定位的改变必然会引起工程化方案的调整。本章通过分析未来工程化不变和可变的方面,探讨前端工程化未来的表现形式。
前端工程化系列丛书
本书是前端工程化系列丛书之一,着重讲述辅助性质的工程体系设计和实践过程。前端工程化可以简单地理解为前端架构与工程体系的综合体,两者相辅相成。本系列丛书的后续作品将从综合的角度深层剖析架构与体系之间的关联及融合,讲述如何从宏观的角度打造合理的前端工程化生态。感兴趣的读者可以关注本系列丛书的相关动态。
联系作者
如果您在阅读过程中有任何问题,可以发送邮件到作者的个人邮箱:zjp0432@163.com。
致谢
感谢我的同事和领导在我创作本书期间给予的建议和支持。特别感谢我曾经的技术领导元亮,在与他共事期间我于前端工程领域的探索和研究得到了充分的空间和资源。
感谢电子工业出版社博文视点的编辑付睿,她在编辑和审校本书期间提出了宝贵的意见。
最后,感谢我的朋友、父母以及妻子刘女士在我创作本书期间给予的空间和支持。
第1章 前端工程简史 1
1.1 前端工程师的基本素养
2
1.1.1 前端工程师的发展历史
2
1.1.2 前端工程师的技能栈
3
1.2 Node.js带给前端的改革
7
1.2.1 前端的两次新生
7
1.2.2 Node.js带来的改革
9
1.3 前后端分离
12
1.3.1 原始的前后端开发模式
13
1.3.2 前后端分离的基本模式
14
1.3.3 前后端分离与前端工程化
19
1.4 前端工程化
19
1.4.1 前端工程化的衡量准则
20
1.4.2 前端工程化的进化历程
21
1.4.3 前端工程化的3个阶段 32
1.5 工程化方案架构
34
1.5.1 webpack 34
1.5.2 工程化方案的整体架构
36
1.5.3 功能规划
37
1.5.4 设计原则
41
1.6 总结
42
第2章 脚手架 43
2.1 脚手架的功能和本质
44
2.2 脚手架在前端工程中的角色和特征
45
2.2.1 用完即弃的发起者角色
45
2.2.2 局限于本地的执行环境
47
2.2.3 多样性的实现模式
49
2.3 开源脚手架案例剖析
51
2.4 集成Yeoman封装脚手架方案 56
2.4.1 封装脚手架方案
57
2.4.2 集成到工程化体系中
63
2.5 总结 66
第3章 构建 68
3.1 构建功能解决的问题
68
3.2 配置API设计原则和编程范式约束 71
3.2.1 配置API设计 71
3.2.2 编程范式约束
75
3.3 ECMAScript与Babel 76
3.3.1 ECMAScript发展史
76
3.3.2 ES6的跨时代意义
78
3.3.3 Babel真正意义的JavaScript编译 80
3.3.4 结合webpack与Babel实现JavaScript构建 84
3.4 CSS预编译与PostCSS 89
3.4.1 CSS的缺陷
90
3.4.2 CSS预编译器
90
3.4.3 PostCSS 91
3.4.4 webpack结合预编译与PostCSS实现CSS构建
93
3.4.5 案例:自动生成CSS Sprites功能实现 95
3.5 模块化开发
101
3.5.1 模块化与组件化
101
3.5.2 模块化与工程化
102
3.5.3 模块化开发的价值
103
3.5.4 前端模块化发展史
107
3.5.5 webpack模块化构建
109
3.6 增量更新与缓存
112
3.6.1 HTTP缓存策略
113
3.6.2 覆盖更新与增量更新
117
3.6.3 按需加载与多模块架构场景下的增量更新
120
3.6.4 webpack实现增量更新构建方案
122
3.7 资源定位
128
3.7.1 资源定位的历史变迁
128
3.7.2 常规的资源定位思维
132
3.7.3 webpack的逆向注入模式
132
3.8 总结
147
第4章 本地开发服务器 149
4.1 本地开发服务器解决的问题
150
4.2 动态构建
152
4.2.1 webpack-dev-middleware 152
4.2.2 Livereload和HMR 157
4.3 Mock服务
161
4.3.1 Mock的必要前提和发展进程
162
4.3.2 异步数据接口
166
4.3.3 SSR 172
4.4 总结
174
第5章 部署 175
5.1 部署流程的设计原则
175
5.1.1 速度化繁为简
177
5.1.2 协作代码审查和部署队列
181
5.1.3 安全严格审查和权限控制
184
5.2 流程之外:前端静态资源的部署策略
186
5.2.1 协商缓存与强制缓存
186
5.2.2 Apache设置缓存策略
186
5.3 总结
190
第6章 工作流 191
6.1 本地工作流
192
6.1.1 二次构建的隐患
193
6.1.2 代码分离与测试沙箱
194
6.2 云平台工作流
197
6.2.1 GitFlow与版本管理
199
6.2.2 WebHook与自动构建
201
6.3 持续集成与持续交付
203
6.4 总结
205
第7章 前端工程化的未来 206
7.1 前端工程师未来的定位
206
7.1.1 不只是浏览器
207
7.1.2 也不只是Web 208
7.2 前端工程化是一张蓝图
209
7.3 总结
212