全栈应用开发：精益实践

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

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

★黄峰达（Phodal Huang）

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

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

　　学习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.通过邮件：[email protected]

　　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

第 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