学习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
0.4 搭建构建系统
决定好架构并选择完技术栈后,我们就开始着手创建项目的构建系统,设计项目的部署流程。构建系统不仅包含项目相关的构建流程,还从某种意义上反映了这个项目的工作流程。
创建完“hello, world”程序后,我们要着手做的事情就是创建一个持续集成环境。这样的环境包含一系列的工具、步骤及实践,从工具上说,我们需要选择版本管理工具、代码托管环境、持续集成工具、打包工具、自动部署脚本等一系列流程,这些流程将会在第4章详细讨论。
图0-3便是笔者之前经历过的一个项目的构建流程。
这是一个后台语言用Java、前台语言用JavaScript的项目的构建流程。
0.5 迭代
在互联网行业里,能越快速地对市场需求做出反应,就越能有更好的发展。只要你细心观察就可以发现,大部分互联网公司都在以一定的规律更新产品,或者一周,或者两周,又或者一个月等,这种不断根据反馈来改进产品的过程称为迭代。如图0-4所示是一个简化的迭代模型。
当一个迭代开始时,我们需要收集上一个迭代的反馈或者新的需求,然后开始开发代码,最后再发布产品。开发的产品在这个过程中不断地增强功能。为此,还需要选择一个好的迭代周期。一个好的迭代周期既应该有充足的时间修复上一个迭代的Bug,又能在下一个迭代开始之前交付重要的功能。当然,如果交付的软件包里出现了重要的Bug,那么我们也能在第一时间使用旧版本的包,并在下一个迭代交付。在这样的开发节奏里,一周显得太短,一个月又显得太长,两周会是一个很不错的时间。
当一个团队在这方面做得不好时,那么他们可能在一次上线后,发现重要的Bug,不得不在当晚或者第二天更新他们的产品。即使是有经验的团队,在开发初期也会经常遇到这些问题,而这些问题可以依赖于在迭代中改进。好的迭代实践都是依据团队自身的需求而发展的,这意味着有时候适合团队A的实践并不一定适合团队B。
随后,我们会在这个“hello, world”的基础上不断添加各种功能。