全栈应用开发：精益实践

★这不是一本深入前端、后台、运维、设计、分析等各个领域的书籍
　　★本书以实践的方式，将这一系列的领域及理论知识结合到一起
　　★来帮助读者构建全栈Web 开发的知识体系
　　★并辅以精益及敏捷的思想，来一步步开发Web 应用

★这不是一本深入前端、后台、运维、设计、分析等各个领域的书籍。本书以实践的方式，将这一系列的领域及理论知识结合到一起，来帮助读者构建全栈Web 开发的知识体系，并辅以精益及敏捷的思想，来一步步开发Web 应用：从创建一个UI 原型到编写出静态的前端页面；从静态的前端页面到带后台的应用，并部署应用；从Web 后台开发API 到开发移动Web 应用。

★在这个过程中，我们还将介绍一些相辅相成的步骤：使用构建系统来加速Web 应用的开发；为应用添加数据分析工具来改进产品；使用分析工具来改善应用的性能；通过自动化部署来加快上线流程；从而帮助读者开发出一个真正可用的全栈 Web 应用。同时，我们也将帮助读者把这些步骤应用到现有的系统上，改进现有系统的开发流程。

★黄峰达（Phodal Huang）

程序开发者、创作者和作家，毕业于西安文理学院电子信息工程专业，现作为一名咨询师就职于 ThoughtWorks。他热爱编程、写作、设计、旅行、hacking，可从他的个人网站https://www.phodal.com/了解更多 。

作者基于大量实践凝练而成的全栈工程师技能图谱，对任何想成为全栈的前端或后端开发人员来说，本书都能给你带来帮助。如果我早点结识这本秘籍，也许我早就是一名优秀的架构师了。

——百度高级前端工程师 颜海镜
　　 所谓全栈工程师，竞争力是什么呢？首先，能够从全局上把握项目的开展，对整体开发链路和技术体系有深入的理解；其次，就是掌握更多的知识（点）和工具，在每个环节都比别人了解得更全面、细致。Phodal的这本书恰好可以给你带来这些能力。

　　 本书围绕Web全栈开发涉及的整体循环链路做了充分说明，时而穿插生动、详细的实战过程。看一遍，你可以更加深入地理解全栈工作；若能跟着实操，必会受益匪浅。书中涉及大量日常工作中不可错过的知识点详解，学一个赚到一个，值得推荐。
　　 ——资深 Web 研发工程师 小胡子哥

　　 有幸作为早期预览者看到作者以非常严谨的态度在写这本书。这本书的问世是众多开发者的福音，作者以简单易懂、风趣的笔风为大家掀开了作为全栈工程师应该学习和具备的能力。本书将能让大家更好、更清楚地理解全栈工程师的成长历程，同时也可以帮助技术团队解决很多问题，提高开发效率，降低开发成本，也许会成为一些团队提高工程师能力的一种契机。
　　 ——W3cplus.com站长 大漠

　　 本书通过大量的实例深入浅出地讲解了全栈开发的较佳实践，对基础概念的讲解也是抽丝剥茧、鞭辟入里，使枯燥的知识顿时鲜活起来。作者三年磨一剑，不管你是前端小白，还是全栈专家，本书都值得一看。
　　 ——在线回声前端技术专家 justjavac

　　 全栈意味着我们不介意跳出自己的专业思考和解决问题；而精益则鼓励我们接近问题的本质和真相，然后大胆取舍，抓住那些四两拨千斤、以不变应万变的东西。这两方面的思考在当今社会中都特别珍贵。这本书可以帮助你了解很多被广泛实践的方法，以及被广泛应验的“套路”，也从个人和团队的角度谈了很多。如果你是全栈或精益的信徒，不妨读一读这本书。
　　 ——阿里巴巴技术专家 赵锦江（花名：勾股）

第 0 章 绪论：Web 应用开发周期 1

0.1 Web 应用的生命周期 2

0.2 遗留系统与新架构 3

0.3 技术选型与验证 4

0.4 搭建构建系统 5

0.5 迭代 6

0.6 Web 应用开发步骤7

0.7 小结 9

第 1 部分 准备阶段

第1 章 基础知识12

1.1 搭建开发环境13

1.1.1 基本要素 13

1.1.2 常用效率工具及其在不同操作系统下的安装 14

1.1.3 搭建开发环境22

1.1.4 开发工具 23

1.2 版本控制 27

1.2.1 Git 初入28

1.2.2 Git 工作流 30

1.3 任务拆分 32

1.3.1 一本书的任务拆分 32

1.3.2 一个功能的任务拆分33

1.4 小结 35

第 2 章 最小可行化应用36

2.1 最小可行化产品 37

2.2 最小可行化Web 应用 41

2.2.1 使用Bootstrap 模板 41

2.2.2 完善原型46

2.2.3 简单上线 47

2.3 精益与敏捷软件开发 52

2.3.1 敏捷软件开发 52

2.3.2 精益 56

2.4 小结 58

第 3 章 技术选型与业务.59

3.1 技术选型 61

3.1.1 后端选型 63

3.1.2 数据持久化 67

3.1.3 前端选型：UI 框架 71

3.2 Django 72

3.2.1 Django 简介 72

3.2.2 安装Django74

3.2.3 创建项目77

3.3 从真实世界到代码 83

3.3.1 模型、领域、抽象 84

3.3.2 前后端分离 88

3.4 小结 90

第 4 章 构建系统及其工作流92

4.1 构建流 93

4.1.1 搭建开发环境 96

4.1.2 准备生产环境98

4.2 打造后端构建系统100

4.2.1 使用Fabric 搭建构建系统101

4.2.2 软件包管理107

4.3 小结109

第 2 部分 编码到上线

第5 章 编码112

5.1 创建首页应114

5.1.1 生成首页应用115

5.1.2 编写第一个测试122

5.1.3 使用Selenium 进行功能测试124

5.1.4 如何编写测试128

5.2 创建博客应用134

5.2.1 创建应用与博客管理134

5.2.2 在页面上显示博客141

5.3 数据与Web 应用开发150

5.3.1 管理数据151

5.3.2 显示数据151

5.4 小结152

第 6 章 上线155

6.1 手动部署156

6.1.1 操作系统与服务器软件157

6.1.2 第一次部署应用162

6.1.3 配置管理176

6.2 自动化部署178

6.2.1 使用Fabric 自动化部署179

6.2.2 探索更优雅的方案185

6.3 隔离与运行环境187

6.4 小结199

第 7 章 数据分析和性能优化200

7.1 网站监测与分析203

7.1.1 Google Analytics 203

7.1.2 自建监测和分析服务212

7.2 性能分析及优化214

7.2.1 前端优化：用PageSpeed 工具分析和优化215

7.2.2 后台优化：使用应用性能管理工具223

7.2.3 使用New Relic 进行优化225

7.2.4 缓存初入230

7.3 小结234

第 8 章 持续集成与持续交付236

8.1 持续集成与Jenkins237

8.1.1 工具选择与Pipeline 设计239

8.1.2 Jenkins 搭建持续集成244

8.1.3 使用Jenkinsfile 简化流程252

8.2 持续交付与持续部署初探255

8.2.1 持续交付256

8.2.2 持续部署初探260

8.3 小结261

第 9 章 移动Web 与混合应用263

9.1 移动 Web 与单页面应用264

9.1.1 单页面应用入门266

9.1.2 API 设计与框架选型272

9.2 创建移动应用277

9.2.1 使用Ionic 2 创建应用278

9.2.2 更新首页293

9.3 实现博客应用开发297

9.3.1 创建博客API297

9.3.2 创建详情页和列表页302

9.4 用户登录与博客创建309

9.4.1 使用JWT 实现登录310

9.4.2 测试和发布应用323

9.5 小结325

第 3 部分 增量性优化

第10 章 遗留代码与重构328

10.1 遗留系统330

10.1.1 什么是遗留系统330

10.1.2 遗留系统改造334

10.2 易读的代码与重构336

10.2.1 命名337

10.2.2 一次只做一件事339

10.2.3 减少重复代码340

10.2.3 排版342

10.2.4 重构343

10.3 小结346

第 11 章 增长与新架构348

11.1 增长350

11.1.1 增长：回顾与改变350

11.1.2 增长：技能学习与构建索引354

11.2 设计新架构357

11.3 小结.363

附 录

附录A 如何学习新的技术366

附录 B 安装Piwik.372

　　0.4 搭建构建系统

　　决定好架构并选择完技术栈后，我们就开始着手创建项目的构建系统，设计项目的部署流程。构建系统不仅包含项目相关的构建流程，还从某种意义上反映了这个项目的工作流程。

　　创建完“hello, world”程序后，我们要着手做的事情就是创建一个持续集成环境。这样的环境包含一系列的工具、步骤及实践，从工具上说，我们需要选择版本管理工具、代码托管环境、持续集成工具、打包工具、自动部署脚本等一系列流程，这些流程将会在第4章详细讨论。

　　图0-3便是笔者之前经历过的一个项目的构建流程。

　　这是一个后台语言用Java、前台语言用JavaScript的项目的构建流程。

　　0.5 迭代

　　在互联网行业里，能越快速地对市场需求做出反应，就越能有更好的发展。只要你细心观察就可以发现，大部分互联网公司都在以一定的规律更新产品，或者一周，或者两周，又或者一个月等，这种不断根据反馈来改进产品的过程称为迭代。如图0-4所示是一个简化的迭代模型。

　　当一个迭代开始时，我们需要收集上一个迭代的反馈或者新的需求，然后开始开发代码，最后再发布产品。开发的产品在这个过程中不断地增强功能。为此，还需要选择一个好的迭代周期。一个好的迭代周期既应该有充足的时间修复上一个迭代的Bug，又能在下一个迭代开始之前交付重要的功能。当然，如果交付的软件包里出现了重要的Bug，那么我们也能在第一时间使用旧版本的包，并在下一个迭代交付。在这样的开发节奏里，一周显得太短，一个月又显得太长，两周会是一个很不错的时间。

　　当一个团队在这方面做得不好时，那么他们可能在一次上线后，发现重要的Bug，不得不在当晚或者第二天更新他们的产品。即使是有经验的团队，在开发初期也会经常遇到这些问题，而这些问题可以依赖于在迭代中改进。好的迭代实践都是依据团队自身的需求而发展的，这意味着有时候适合团队A的实践并不一定适合团队B。

　　随后，我们会在这个“hello, world”的基础上不断添加各种功能。

　　学习Web开发最难的不是学习相关技术，而是需要了解整个Web开发的知识体系。多数时候并不是因为我们不学习，而是因为我们不知道学习什么。完整的知识体系不仅仅包括前端、后台开发，还应该包括持续集成、自动化部署等内容。这些往往需要几本不同的书才能学习到，另外，它们也难以保证知识体系的完整性。我们在学习的时候，也往往并没有注意到它们之间的联系。

　　本书可以为读者构建出清晰、完整的Web开发体系，包括：前端、后台的技术选型，搭建构建系统，如何上线部署，并进行数据分析，以及如何在其中结合最好的工程实践等。希望作为读者的你，可以将本书当作一本索引书籍，以此来开启你的Web开发新世界；你可以按书中的实践来进行Web编程，并结合理论来实践。

　　为什么写这本书

　　本书是我在实习的时候特别想写的一些内容——关于如何系统地学习Web开发，只是我一直缺少一条主线来将这些内容一一串起来。

　　2016年年初，我在GitHub上开源了一个名为Growth的应用（读者可以在AppStore和各大应用商店下载该软件）。在该应用中便包含了本书的主要思想：Web应用的生命周期。在不断迭代的过程中，该应用越来越受开发者喜爱，至今已经有超过10000名用户用过这个应用。随后，笔者在GitHub上推出了开源电子书《Growth：全栈增长工程师指南》，已经有超过4500个Star。由于电子书本身只是一个指南，越来越多的读者还希望有一本实战。也因此诞生了《Growth：全栈增长工程师实战》，其在GitHub上也有超过1000个Star。

　　后来，我才下决心去出版这样一本书。写一本书不是一件容易的事，相比较而言，读一本书则要简单许多。前者要花费一个人几个月的时间来完成，而后者只需要几星期、几天，或者是几小时的事。花几分钟将书的目录过一遍，随后只看几页想看的内容，余下的内容则可以在以后闲暇的日子里探索。

　　本书是我在编程生涯初期的一些体会，它更像是一本关于Web开发的索引书籍，但其实这些索引正是我读了大量书籍后，自己对精髓之处进行的理解加工。在这本书里，你会看到我对很多知识点进行了概括，并以实践的方式将一个个知识点连接到一起。

　　在最开始的时候，我曾经想将书名命名为“实习记”。后来又觉得虽然这是在我实习期间学到的知识，但其实很多内容在其他公司是学不到的。因此，在电子书里将其命名为Growth，它不仅可以使读者增长知识，也在让我自己成长。

　　本书目标

　　本书的目标是帮助读者构建Web应用的全栈开发所需要的完整知识体系，并以精益创业的思想来一步步开发Web应用。

　　??从创建一个UI原型到编写出静态的前端页面。

　　??从静态的前端页面到后台的应用，并部署应用。

　　??从Web后台开发API到开发移动Web应用。

　　在这个过程中，我们还将介绍一些相辅相成的步骤：

　　??使用构建系统来加速Web应用的开发。

　　为应用数据分析工具改进产品。

　　??使用分析工具改善应用的性能。

　　??通过自动化部署加快上线流程。

　　从而帮助读者开发出一个真正可用的全栈Web应用。同时，我们也希望能帮助读者将这些步骤应用到现有的系统上，改进现有系统的开发流程。

　　本书结构

　　本书从结构上分成了3部分，每部分都会有不同的侧重点。

　　第1部分：准备阶段

　　在这一部分里，我们将主要集中于编码前的一系列开发准备工作，从选择一个合适的IDE到创建一个Web应用的构建流。

　　第1章基础知识介绍了搭建开发所需要的基本环境，以及IDE、操作系统、版本管理工具等日常工具的选择与使用；还介绍了如何对一个目标进行切分，以便我们在实现的时候可以一步步往下实践。

　　第2章最小可行化应用介绍了如何使用UI工具来创建原型，并根据这个原型创建出一个最简单的Web应用；接着介绍了在Web应用开发的过程中，如何使用精益的思想来开发出用户喜爱的产品。

　　第3章技术选型与业务对后台开发所需要的技术进行简单概览，并介绍了不同后台组件的框架，以及如何从这些框架中选择出合适的框架。同时还介绍了Python下的Web开发框架Django，以及如何用这个框架创建一个“hello，world！”程序。

　　第4章构建系统及其工作流介绍Web应用中常见的构建流程及组件，以及如何结合Fabric打造后台的构建系统。

　　第2部分：编码到上线

　　在这一部分里，我们主要讲述大部分Web应用的开发过程，并介绍在开发过程中一些好的实践。

　　第5章编码介绍了如何使用Django创建一个简单的博客应用，以及如何使用单元测试、UI测试来测试代码的功能。

　　第6章上线介绍了如何手动部署开发的Web应用到产品环境，以及如何使用自动部署工具来完成自动化部署。

　　第7章数据分析和体验优化介绍了如何使用网页监测工具来分析网页的流量来源、用户行为等，并结合一些前端、后台的优化工具对应用进行优化。

　　第8章持续集成与持续交付介绍了如何使用持续集成工具，以及如何使用持续集成工具来改进开发流程，并实现自动化的部署。

　　第9章移动Web与混合应用介绍如何结写后台API来创建移动应用，以及如何为单页面应用提供SEO支持。

　　第3部分：增量性优化

　　第10章遗留代码与重构介绍什么是遗留系统，以及如何基于第2部分中的经验来改进遗留系统。

　　第11章增长与新架构介绍如何使用回顾与反馈来使程序员成长，以及如何依据需要设计出新的架构。

　　技术栈概述本书所介绍的工具主要集中于前端、后台、构建工具和前端UI框架四部分，分别如下。

　　??Django是Python语言的一个MVC架构Web开发框架。本书使用这个框架来介绍如何编写单元测试、功能测试，并演示如何使用它进行持续集成和持续部署。

　　??Bootstrap是一个在前端领域相当流行的响应式WebUI开发框架，本书出于开发便捷的缘故使用这个框架。

　　??Fabric是一个命令行的自动化部署工具，本书使用这个框架来展示如何搭建构建系统，并使用它来进行自动化部署。

　　??Angular2是一个可以用于构建移动应用和桌面Web应用的开发平台，我们在书里用它来展示如何开发前后端分离的Web应用程序。上面的几个框架可以构成跨手机、桌面的一个Web应用，以及如何对其进行自动化部署。另外，还将介绍一些工具和框架来帮助我们开发：

　　??Ionic2是一个跨平台（Android、iOS、WindowsPhone）的混合应用开发框架，基于Angular2框架，并搭建有大量的UI组件，以及原生组件，我们在书里说明它与Angular2如何共用代码来开发手机端应用。

　　??Jenkins是一个持续集成工具，它提供了持续集成与持续部署工具链中所需要的大部分工具。我们将用它来展示如何进行持续集成，并结合Fabric来实现自动化部署。本书将展示如何结合这些工具来做一些最佳实践，读者不必担心它会影响你的阅读，并且这些工具也很容易找到相应的替代品。

　　代码

　　本书相关的代码都可以从GitHub上下载到：https://github.com/phodal/growth-code。混合应用部分的代码可以从https://github.com/phodal/growth-paper-hybrid处下载。这些代码遵循MIT协议开源，读者可以将这些代码用于学习、商业等用途的项目中，不需要笔者同意。同时，笔者也不对这些代码的衍生代码负责。

　　遇到问题

　　在遇到问题时，欢迎及时与笔者联系。遇到代码问题时，建议直接在GitHub上创建一个相关Issue，以便我们帮助其他读者解决同样的问题。

　　遇到内容不清楚等问题时，可以通过下面的方式联系笔者：

　　1.通过GitHub上的Growth项目参与讨论：https://github.com/phodal/growth-code

　　2.在Growth论坛上讨论：https://forum.growth.ren/

　　3.在微博上与我联系：@phodal

　　4.通过邮件：h@phodal.com

　　5.加入QQ群讨论：529600394

　　你也可以在知乎、SegmentFault网站上进行提问，并@phodal来帮助你解决这个问题。

　　致谢

　　我要把这本书献给花仲马，没有她，就没有这本书。感谢她在这本书的写作过程中一直陪伴着我，并为这本书进行了中文校对来保证语句的通顺。同时，我想特别感谢ThoughtWorks的同事薛倩、阿里巴巴的孙辉在本书创作过程中提供了详细的反馈，正是他们的帮助让本书更加准确、容易阅读。我还想特别感谢在ThoughtWorks学习时的同事，为我提供悉心指导与帮助。特别感谢王超、陈卿、王妮、曹隆凯、张静强、刘杰、王磊，在和他们进行结对编程时，我学习到了敏捷软件开发、Tasking等编程之外的技能，感谢他们帮我走了这么远。

　　此外，还有那些在GitHub上为我提供反馈的用户，正是他们的反馈促使这本书更加完整。由于人数众多，这里仅列出这些用户的ID：

　　感谢ethan-funny、izhangzhihao、kaiguo、gymgle、aidewoode、wenzhixin、sasuke6、wangyufeng0615、walterlv、lolosssss、NehzUx、mikulely、yulongjun、PhilipTang、ReadmeCritic、ReadmeCritic、wangcongyi、loveisbug等用户为《Growth：全栈增长工程师指南》提供反馈与修改。

　　感谢Pandoraemon、wo0d、ReadmeCritic、zhangmx、felixglow等用户为《Growth：全栈增长工程师实战》提供了反馈与修改。

　　轻松注册成为博文视点社区用户（www.broadview.com.cn