學習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”的基礎上不斷添加各種功能。