├── .gitignore ├── README.md ├── SUMMARY.md ├── actual-combat.md ├── advanced.md ├── build-system-optimization.md ├── chapter.md ├── design-principles.md ├── engineering-analysis.md ├── fundamentals.md ├── history-and-status-quo.md ├── implementation.md ├── preface.md ├── problems-and-goals.md ├── process-and-deploy.md └── promotion.md /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | 5 | # Runtime data 6 | pids 7 | *.pid 8 | *.seed 9 | 10 | # Directory for instrumented libs generated by jscoverage/JSCover 11 | lib-cov 12 | 13 | # Coverage directory used by tools like istanbul 14 | coverage 15 | 16 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 17 | .grunt 18 | 19 | # Compiled binary addons (http://nodejs.org/api/addons.html) 20 | build/Release 21 | 22 | # Dependency directory 23 | # Deployed apps should consider commenting this line out: 24 | # see https://npmjs.org/doc/faq.html#Should-I-check-my-node_modules-folder-into-git 25 | node_modules 26 | 27 | _book/ 28 | book.pdf 29 | book.epub 30 | book.mobi 31 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 《前端工程化实践》 2 | 3 | 2017年7月18日 作者：小爝 4 | 5 | #### 内容介绍 6 | 7 | [全书概要](/SUMMARY.md) 8 | 9 | 前端开发行业目前正在经历着一场巨大的变革和转型，从简单好入手，学习门槛低，逐渐成为异常复杂的开发环境与流程。这让很多新人以及前端开发从业者感到迷茫，经过2013-2016年这短短几年的变化，明明以前很简单的工作，从使用简单的LAMP开发环境或者说只需要一个笔记本或者Dreamwear就可以书写网页和工作的时代一去不复返了。 10 | 11 | 越来越多的公司成立了专业的前端开发团队和部门，前端工程师的比重在IT行业也越来越高，所以如何科学的管理和设计一个前端团队在实施程序开发的各个维度的时候，除了我们熟知的HTML,CSS,JS这几项基本专业技能外，更多的软技能和工程化概念开始引入这个行业。 12 | 13 | 本书主要以介绍现代前端开发环境，开发流程，静态资源管理，模块化，前端测试，前端规范，前端相关软件开发的设计原则为主，这里也可以统称为前端工程化。 14 | 15 | 本书开篇由浅入深的带读者感受到前端工程化的一个发展历史，以及为什么开发环境和流程越来越复杂和重要，解决了什么问题，标准化的流程是什么样子，前端工程化设计的一些基本思想和原则，如何构建模块化的开发环境，改造已有的老系统，以及如何学习和构建合适公司业务的前端开发环境和标准开发流程。 16 | 17 | 本书不会注重介绍前端开发编程中的技巧，但是所写的实例代码均以javascript为主要语言，以nodejs为基础，辅助一些Unix shell，所以如果你有这方面的经验，读起来会比较轻松。 18 | 19 | 本书适合有一定经验的前端开发从业人员阅读，或对nodejs开发企业级工具，自动化工具的前端开发人员，运维人员，或想成为前端架构师，前端leader的相关人员阅读，本书不适合完全不了解前端开发领域和开发常识的人群阅读。 20 | 21 | 希望本书可以帮助大家完善前端工程化，开发环境，开发流程上的一些不足，以我多年的前端开发领域经验给予大家一些微小的贡献。 22 | 23 | -------------------------------------------------------------------------------- /SUMMARY.md: -------------------------------------------------------------------------------- 1 | # Summary 2 | 3 | * [内容介绍](README.md) 4 | * [前言](preface.md) 5 | * [目录](chapter.md) 6 | * [什么是前端工程化](history-and-status-quo.md) 7 | * [不同类型项目的工程化分析](/engineering-analysis.md) 8 | * [前端工程化的设计原则](/design-principles.md) 9 | * [环境工具](/fundamentals.md) 10 | * [标准化实现](/promotion.md) 11 | * [调试与测试](/advanced.md) 12 | * [开发流程与部署](/process-and-deploy.md) 13 | * [实战](/actual-combat.md) 14 | * [构建系统的优化](/build-system-optimization.md) 15 | 16 | -------------------------------------------------------------------------------- /actual-combat.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiaojue/FrontEndEngineeringPractice/80b5ebf010c61a25c6250224a8b95adae5b9513c/actual-combat.md -------------------------------------------------------------------------------- /advanced.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiaojue/FrontEndEngineeringPractice/80b5ebf010c61a25c6250224a8b95adae5b9513c/advanced.md -------------------------------------------------------------------------------- /build-system-optimization.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiaojue/FrontEndEngineeringPractice/80b5ebf010c61a25c6250224a8b95adae5b9513c/build-system-optimization.md -------------------------------------------------------------------------------- /chapter.md: -------------------------------------------------------------------------------- 1 | # 目录 2 | 3 | 1. 什么是前端工程化： 4 | 5 | 1. 前端工程化的起源和发展路径 6 | 7 | 2. 前端开发环境与后端开发环境的差异 8 | 9 | 3. 前端开发中遇到的工程化难题 10 | 11 | 4. 前端工程化现状和未来 12 | 13 | 5. 前端工程化的核心和定义 14 | 15 | 6. 前端人员需要补充的知识栈 16 | 17 | 7. 前端工程化图谱 18 | 19 | 2. 不同类型项目的工程化分析： 20 | 21 | 1. 个人网站，小型项目 22 | 23 | 2. spa项目 24 | 25 | 3. 混合app项目 26 | 27 | 4. 大型互联网公司传统项目 28 | 29 | 3. 前端工程化的设计原则： 30 | 31 | 1. 静态资源管理原则 32 | 33 | 2. 工具类软件和系统的设计模式 34 | 35 | 3. 开发环境的通用性 36 | 37 | 4. 可视化与非可视化的取舍 38 | 39 | 5. 为什么我们需要模块化与组件化 40 | 41 | 6. 测试行为的适用性 42 | 43 | 7. 发布系统的设计原则 44 | 45 | 8. 前端日志和监控的设计原则 46 | 47 | 9. 协作模式的分类与归纳 48 | 49 | 10. 不同项目场景下的通用设计原则 50 | 51 | 4. 环境工具： 52 | 53 | 1. 有交互的命令行工具 54 | 55 | 2. 快速管理项目hosts 56 | 57 | 3. 使用nodejs开发http和https的静态服务器 58 | 59 | 4. 正反向代理工具 60 | 61 | 5. live-reload的妙用 62 | 63 | 6. 远程调用linux命令的能力 64 | 65 | 5. 标准化实现： 66 | 67 | 1. 前端模块化与组件化 68 | 69 | 2. 前后端分离的mock-server 70 | 71 | 3. 前端代码规则检查 72 | 73 | 4. 统一项目的脚手架 74 | 75 | 6. 调试与测试： 76 | 77 | 1. 不同类型客户端的调试 78 | 79 | 1. 前端单元测试 80 | 81 | 2. 前端功能测试 82 | 83 | 3. 跨平台的浏览器兼容测试 84 | 85 | 7. 开发流程与部署： 86 | 87 | 1. 基于git管理的多人项目开发流程解析 88 | 89 | 2. 部署方案解析： 90 | 91 | 1. 开发到测试环境的部署 92 | 93 | 2. 测试到仿真环境的部署 94 | 95 | 3. 仿真到生产环境的部署 96 | 97 | 3. 持续集成 98 | 99 | 4. 前端缓存 100 | 101 | 5. 增量更新 102 | 103 | 6. 分发策略 104 | 105 | 7. 了解CDN 106 | 107 | 8. 实战： 108 | 109 | 1. 多项目前后端分离环境构建 110 | 111 | 2. 前端SDK/框架的开发环境构建 112 | 113 | 3. 性能和异常监控系统 114 | 115 | 4. 跨项目的通用模块共享实现方案 116 | 117 | 9. 构建系统的优化 118 | 119 | 1. 构建速度的瓶颈分析 120 | 121 | 2. 构建系统优化常见方法 122 | 123 | 3. 分布式前端构建系统 124 | 125 | 126 | 127 | -------------------------------------------------------------------------------- /design-principles.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiaojue/FrontEndEngineeringPractice/80b5ebf010c61a25c6250224a8b95adae5b9513c/design-principles.md -------------------------------------------------------------------------------- /engineering-analysis.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiaojue/FrontEndEngineeringPractice/80b5ebf010c61a25c6250224a8b95adae5b9513c/engineering-analysis.md -------------------------------------------------------------------------------- /fundamentals.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiaojue/FrontEndEngineeringPractice/80b5ebf010c61a25c6250224a8b95adae5b9513c/fundamentals.md -------------------------------------------------------------------------------- /history-and-status-quo.md: -------------------------------------------------------------------------------- 1 | #### 什么是前端工程化 2 | 3 | 一，前端工程化的起源和发展路径 4 | 5 | 1.1 前端工程化的起源： 6 | 7 | 要说前端工程化这个话题，必须要从前端开发工程师的由来说起，2009年左右的时候在招聘市场上是很少有前端开发工程师这个岗位的，当时的各大公司主要是以网页设计师和RIA应用开发工程师为主力招聘，当时要求的技术栈也是以设计为主，切图布局为辅的设计师招聘和以开发复杂富媒体客户端的工程师为主，多以actionsript开发或者复杂交互的javascript开发，并没有像现在这样的岗位描述。 8 | 9 | 从2010年开始，逐渐国内有了前端开发工程师的专岗，但是不同的公司又有不同的区分，比如一些公司会把前端部门放到UED大部，有些则会放到研发部门的归类里，只有到了2015年左右大家才普遍的接受了前端开发工程师这个研发岗位，并且招聘要求逐渐往研发工程师的要求上靠拢。 10 | 11 | 从14年左右，不同的前端开发团队开始关注前端工程化实践，这个过程主要是由于前端研发部门的人数和担负的职责越来越重，而且前端开发的难度也比2010年到2013年有了一个量级的提升，这里的提升主要是指小中型公司和大家常见的一些互联网产品越来越重前端交互的结果造成的。 12 | 13 | 为了解决复杂难题，普世意义上的前端工程化概念体系才开始被各个公司的团队开始研究，以及落地实践。而工程化概念的产生也都是为了解决实际工作中的普遍难题。 14 | 15 | 早年的前端框架主要是以交互的实现，DOM的操作以及常见的工具封装为主。比如moontools，prototype，dojo，yui2等一系列框架。像dojo和yui2以及后来淘宝独立自主开发的kissy又都在这个基础上增加了常见组件和模块化开发的初步概念。本质原因都是因为业务的需要发展导致的，实际生产工作中需要积累模块化的成体系的复用组件。再之后从commonjs的提出，前端涌来了标准化的时代，各类模块化工具也频繁跌出，包括一些常见的后端使用的工程类工具，也都在前端系统中进行了衍生；如Apache Ant是一款将软件编译，测试，部署等步骤统一一起做自动化处理的工具，最开始是用于java开发，后来前端出现了grunt，gulp等构建工具，后期都被拿来用到了前端静态资源的管理上；再如make工具，他也是一种转化文件形式的工具，常用于自动化构建软件，比如大家耳熟能详的bootstrap在2.x的时候，就是使用的Makefile进行构建。 16 | 17 | 很多人可能会误解前端工程化就是前端项目的构建和部署过程，其实并不是这样，在最早期，很多前端框架除了解决功能开发上的问题之外，同样有大量的工程师开始关注模块化和复用性问题，开源的解决方案和公司级别的解决方案都很多，比如dojo自带的模块化modules以及yui自带的module loader等，都是解决项目内部的一个粒度拆分和复用性问题，反而像jquery，prototype早期则都是以工具集的身份出现在市场中。 18 | 19 | 那么除了模块化和构建，前端工程化还有哪些呢？我认为还有越来越恶劣的前端开发环境和调试环境。早些时候前端资源是和整个项目合在一起的，俗称前后端耦合的开发形式，前端人员如果想实际的进行调试，必须克服种种非前端问题才能实现，比如搭建php，java环境，对数据接口进行模拟或者代理等，所以后期人们为了分工和项目的部署方便，同时也为了性能方面考虑，大部分的公司进行了前后端代码资源的分离，但是这并不是真正的前后端彻底分离。哪怕这样，复杂的前端项目，单纯的使用这种方式进行开发调试，每次构建还都是需要进行手工重复build，效率低，所以大家目前常用的webpack dev server干的是主动进行实时构建开发环境的事。而早期没有类似标准工具时，解决办法也有，如被动的让用户刷新一个程序入口，再由后端动态语言结合js的命名空间特点，进行js的执行时脚本组合过程；或者使用js代理js的方式进行不同环境资源的加载等等方式。 20 | 21 | 当然未来还会出现更多的前端开发领域遇到的实际难题，但是前端工程化的起源，本质上就是大家针对不同时代需求和客观环境制约下，权衡出现的技术解决方案，而且我还认为前端工程化是一门如何做好专业前端开发团队搭建和实施所必须掌握的能力。 22 | 23 | 1.2 前端工程化的发展路径： 24 | 25 | 前端工程化的发展路径上面已经简单的有了一定概念上的描述，几年前的技术方案放到今天不一定是合适的，更多时候我们在设计工程化系统时需要考虑未来扩展和时代的变化。比如早年的时候大家都在考虑移动端的前端技术解决方案，那么调试工具和开发环境也必须要跟上节奏；再比如面对前后端开发彻底分离的情况下，前端的调试和开发环境，应该如何进行相应升级，从而弥补老式的后端渲染+前端套页面写交互的开发节奏。所以前端工程化的发展路径一定是基于时代的变化而变化的。 26 | 27 | 除了构建和模块化标准的一步一步进化，除了工具上的升级，针对不同场景下的处理手段也在变化发展。比如前端自动化测试，前端性能和异常监控的升级，比如使用第三方的SDK来收集系统的性能和异常，比如自己搭建自己的行为和错误日志系统等。测试方面也包含了单测框架的升级，功能GUI层面的测试框架演变，还有针对不同终端的测试方案。 28 | 29 | 最后还有就是对静态资源管理以及开发环境的不断发展。比如文档相关的自动化，多项目管理；比如部署时的策略；比如构建时的策略。最后还是应该再包含有标准化的工具开发和一些微创新，比如现在流行的webpack的配置项又衍生出的脚手架，比如针对不同流行框架产生的补丁和第三方包。 30 | 31 | 二，前端开发环境与后端开发环境的差异 32 | 33 | 虽然现在流行全栈工程师，但是很多公司还是都明确的区分了前端RD和后端RD。不同的开发环境导致了前后端工程化的实施差异是非常大的。我这里通过对比的方式，做一下分析和归纳。 34 | 35 | 36 | 37 | 三，前端开发中遇到的工程化难题 38 | 39 | 四，前端工程化现状和未来 40 | 41 | 五，前端工程化的核心和定义 42 | 43 | -------------------------------------------------------------------------------- /implementation.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiaojue/FrontEndEngineeringPractice/80b5ebf010c61a25c6250224a8b95adae5b9513c/implementation.md -------------------------------------------------------------------------------- /preface.md: -------------------------------------------------------------------------------- 1 | # 前言 2 | 3 | 前端开发工程师这个职位已经在各个公司都落地生根发芽，整个行业的从业人员也是在呈现几何倍数增长，越来越多的新技术概念涌现，大量不同背景的开发人员进入这个行业。本书着重概括和讲解了在面对复杂多变的开发任务时，如何组建和搭建一套科学的前端开发体系和团队相关方面的一些总结和实战经验。 4 | 5 | 作者本人曾经就职与阿里巴巴淘宝网，新浪微博，新浪门户，手机新浪网还有国美互联网，8年多的前端开发经验。拥有在许多不同行业领域，组建前端团队的实际经验和心得，在工作中对前端工程化的理解，随着工作年限，团队规模，职责变化等，不断的进行着自我总结。 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /problems-and-goals.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiaojue/FrontEndEngineeringPractice/80b5ebf010c61a25c6250224a8b95adae5b9513c/problems-and-goals.md -------------------------------------------------------------------------------- /process-and-deploy.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiaojue/FrontEndEngineeringPractice/80b5ebf010c61a25c6250224a8b95adae5b9513c/process-and-deploy.md -------------------------------------------------------------------------------- /promotion.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiaojue/FrontEndEngineeringPractice/80b5ebf010c61a25c6250224a8b95adae5b9513c/promotion.md --------------------------------------------------------------------------------