全棧應(yīng)用開發(fā)：精益實(shí)踐

全棧應(yīng)用開發(fā)精益實(shí)踐目錄\h第0章緒論：Web應(yīng)用開發(fā)周期\h0.1Web應(yīng)用的生命周期\h0.2遺留系統(tǒng)與新架構(gòu)\h0.3技術(shù)選型與驗(yàn)證\h0.4搭建構(gòu)建系統(tǒng)\h0.5迭代\h0.6Web應(yīng)用開發(fā)步驟\h0.7小結(jié)\h第1部分準(zhǔn)備階段\h第1章基礎(chǔ)知識(shí)\h1.1搭建開發(fā)環(huán)境\h1.1.1基本要素\h1.1.2常用效率工具及其在不同操作系統(tǒng)下的安裝\h1.1.3搭建開發(fā)環(huán)境\h1.1.4開發(fā)工具\(yùn)h1.2版本控制\h1.2.1Git初入\h1.2.2Git工作流\h1.3任務(wù)拆分\h1.3.1一本書的任務(wù)拆分\h1.3.2一個(gè)功能的任務(wù)拆分\h1.4小結(jié)\h第2章最小可行化應(yīng)用\h2.1最小可行化產(chǎn)品\h2.2最小可行化Web應(yīng)用\h2.2.1使用Bootstrap模板\h2.2.2完善原型\h2.2.3簡(jiǎn)單上線\h2.3精益與敏捷軟件開發(fā)\h2.3.1敏捷軟件開發(fā)\h2.3.2精益\h2.4小結(jié)\h第3章技術(shù)選型與業(yè)務(wù)\h3.1技術(shù)選型\h3.1.1后端選型\h3.1.2數(shù)據(jù)持久化\h3.1.3前端選型：UI框架\h3.2Django\h3.2.1Django簡(jiǎn)介\h3.2.2安裝Django\h3.2.3創(chuàng)建項(xiàng)目\h3.3從真實(shí)世界到代碼\h3.3.1模型、領(lǐng)域、抽象\h3.3.2前后端分離\h3.4小結(jié)\h第4章構(gòu)建系統(tǒng)及其工作流\h4.1構(gòu)建流\h4.1.1搭建開發(fā)環(huán)境\h4.1.2準(zhǔn)備生產(chǎn)環(huán)境\h4.2打造后端構(gòu)建系統(tǒng)\h4.2.1使用Fabric搭建構(gòu)建系統(tǒng)\h4.2.2軟件包管理\h4.3小結(jié)\h第2部分編碼到上線\h第5章編碼\h5.1創(chuàng)建首頁(yè)應(yīng)用\h5.1.1生成首頁(yè)應(yīng)用\h5.1.2編寫第一個(gè)測(cè)試\h5.1.3使用Selenium進(jìn)行功能測(cè)試\h5.1.4如何編寫測(cè)試\h5.2創(chuàng)建博客應(yīng)用\h5.2.1創(chuàng)建應(yīng)用與博客管理\h5.2.2在頁(yè)面上顯示博客\h5.3數(shù)據(jù)與Web應(yīng)用開發(fā)\h5.3.1管理數(shù)據(jù)\h5.3.2顯示數(shù)據(jù)\h5.4小結(jié)\h第6章上線\h6.1手動(dòng)部署\h6.1.1操作系統(tǒng)與服務(wù)器軟件\h6.1.2第一次部署應(yīng)用\h6.1.3配置管理\h6.2自動(dòng)化部署\h6.2.1使用Fabric自動(dòng)化部署\h6.2.2探索更優(yōu)雅的方案\h6.3隔離與運(yùn)行環(huán)境\h6.4小結(jié)\h第7章數(shù)據(jù)分析和性能優(yōu)化\h7.1網(wǎng)站監(jiān)測(cè)與分析\h7.1.1GoogleAnalytics\h7.1.2自建監(jiān)測(cè)和分析服務(wù)\h7.2性能分析及優(yōu)化\h7.2.1前端優(yōu)化：用PageSpeed工具分析和優(yōu)化\h7.2.2后臺(tái)優(yōu)化：使用應(yīng)用性能管理工具\(yùn)h7.2.3使用NewRelic進(jìn)行優(yōu)化\h7.2.4緩存初入\h7.3小結(jié)\h第8章持續(xù)集成與持續(xù)交付\h8.1持續(xù)集成與Jenkins\h8.1.1工具選擇與Pipeline設(shè)計(jì)\h8.1.2Jenkins搭建持續(xù)集成\h8.1.3使用Jenkinsfile簡(jiǎn)化流程\h8.2持續(xù)交付與持續(xù)部署初探\h8.2.1持續(xù)交付\h8.2.2持續(xù)部署初探\h8.3小結(jié)\h第9章移動(dòng)Web與混合應(yīng)用\h9.1移動(dòng)Web與單頁(yè)面應(yīng)用\h9.1.1單頁(yè)面應(yīng)用入門\h9.1.2API設(shè)計(jì)與框架選型\h9.2創(chuàng)建移動(dòng)應(yīng)用\h9.2.1使用Ionic2創(chuàng)建應(yīng)用\h9.2.2更新首頁(yè)\h9.3實(shí)現(xiàn)博客應(yīng)用開發(fā)\h9.3.1創(chuàng)建博客API\h9.3.2創(chuàng)建詳情頁(yè)和列表頁(yè)\h9.4用戶登錄與博客創(chuàng)建\h9.4.1使用JWT實(shí)現(xiàn)登錄\h9.4.2測(cè)試和發(fā)布應(yīng)用\h9.5小結(jié)\h第3部分增量性優(yōu)化\h第10章遺留代碼與重構(gòu)\h10.1遺留系統(tǒng)\h10.1.1什么是遺留系統(tǒng)\h10.1.2遺留系統(tǒng)改造\h10.2易讀的代碼與重構(gòu)\h10.2.1命名\h10.2.2一次只做一件事\h10.2.3減少重復(fù)代碼\h10.2.3排版\h10.2.4重構(gòu)\h10.3小結(jié)\h第11章增長(zhǎng)與新架構(gòu)\h11.1增長(zhǎng)\h11.1.1增長(zhǎng)：回顧與改變\h11.1.2增長(zhǎng)：技能學(xué)習(xí)與構(gòu)建索引\h11.2設(shè)計(jì)新架構(gòu)\h11.3小結(jié)\h附錄\h附錄A如何學(xué)習(xí)新的技術(shù)\h附錄B安裝Piwik注：原文檔電子版，非掃描，需要的請(qǐng)下載本文檔后留言謝謝。第0章緒論：Web應(yīng)用開發(fā)周期這部分內(nèi)容最早出自筆者寫的文章《RePractise：Web開發(fā)的七天里》，原文簡(jiǎn)單描述了Web應(yīng)用的生命周期。后來(lái)發(fā)現(xiàn)，這條路幾乎是所有Web應(yīng)用的必經(jīng)之路。一個(gè)Web應(yīng)用在其生命周期里，都要經(jīng)歷搭建開發(fā)環(huán)境、創(chuàng)建構(gòu)建系統(tǒng)、編寫代碼、進(jìn)行數(shù)據(jù)分析等，直至最后使用新的系統(tǒng)來(lái)替換這個(gè)遺留系統(tǒng)。作為本書的開頭，筆者難免想說(shuō)些廢話，初學(xué)者可以跳過(guò)這一部分。等到閱讀完本書再看看這部分內(nèi)容，或者等完全經(jīng)歷了一個(gè)項(xiàng)目的開發(fā)過(guò)程，再回過(guò)頭來(lái)看這部分的內(nèi)容就會(huì)有所體會(huì)。如果你是一個(gè)有經(jīng)驗(yàn)的開發(fā)者，相信你對(duì)這個(gè)生命周期一定也深有體會(huì)。0.1Web應(yīng)用的生命周期在我所經(jīng)歷的項(xiàng)目以及我所看到的Web應(yīng)用里，它們都有相同的很有意思的生命周期。我們經(jīng)常在網(wǎng)上看到某個(gè)知名的網(wǎng)站使用某個(gè)新的技術(shù)、語(yǔ)言來(lái)替換舊的系統(tǒng)，某個(gè)App使用新的框架來(lái)替換現(xiàn)有的App。我們所看到的都只是這些公司正在重構(gòu)現(xiàn)有的系統(tǒng)，這實(shí)際上是一個(gè)周期的結(jié)束，以及一個(gè)新周期開始。其過(guò)程如圖0-1所示。圖0-1Web應(yīng)用的生命周期仔細(xì)一想就會(huì)發(fā)現(xiàn)：我們所經(jīng)歷的項(xiàng)目都在以不同的時(shí)間長(zhǎng)度經(jīng)歷相同的生命周期。0.2遺留系統(tǒng)與新架構(gòu)在我開始工作的時(shí)候，接觸的第一個(gè)項(xiàng)目就是一個(gè)遺留系統(tǒng)。在一次休息時(shí)，我們?cè)诒荣愓易罟爬系脑创a文件，最后找到了10年前寫下的一個(gè)文件。盡管在我們的代碼里有單元測(cè)試、針對(duì)具體業(yè)務(wù)功能的測(cè)試，項(xiàng)目的代碼已經(jīng)超過(guò)20萬(wàn)行，項(xiàng)目中仍然有相當(dāng)多的代碼超出了我們所理解的業(yè)務(wù)范圍。畢竟在這些年頭里，有相當(dāng)多的功能已經(jīng)不存在了。后來(lái)，我們選用微服務(wù)重構(gòu)了這個(gè)系統(tǒng)。對(duì)于中型的遺留系統(tǒng)來(lái)說(shuō)，這算是一劑良藥。讓我們先從某某網(wǎng)站使用新架構(gòu)重新設(shè)計(jì)說(shuō)起。當(dāng)我們決定使用新架構(gòu)重新設(shè)計(jì)系統(tǒng)時(shí)，原因可能是多種多樣的，如果我們排除一些無(wú)法抗拒的因素（如政治），那么剩下的原因可能就只有兩個(gè)。系統(tǒng)已經(jīng)變得難以維護(hù)。這里的原因仍然有很多：大量的代碼已經(jīng)沒(méi)有人知道其業(yè)務(wù)邏輯，變得難以修改；代碼間耦合度過(guò)高，重構(gòu)系統(tǒng)的難度過(guò)于復(fù)雜；項(xiàng)目所使用的技術(shù)棧已經(jīng)過(guò)時(shí)，已經(jīng)被市場(chǎng)所淘汰；團(tuán)隊(duì)的技術(shù)棧在成員變動(dòng)的過(guò)程中，團(tuán)隊(duì)中大部分成員的技術(shù)棧已經(jīng)和當(dāng)前的項(xiàng)目不匹配了。系統(tǒng)的技術(shù)棧已經(jīng)難以符合業(yè)務(wù)的需求。絕大多數(shù)情況下，我們?cè)谧畛蹰_始創(chuàng)建項(xiàng)目的時(shí)候，所選擇的技術(shù)棧都是符合當(dāng)時(shí)業(yè)務(wù)需求的技術(shù)棧、可以快速驗(yàn)證其業(yè)務(wù)價(jià)值的技術(shù)棧。而隨著業(yè)務(wù)的擴(kuò)張，現(xiàn)有的技術(shù)棧很快將難以滿足當(dāng)前業(yè)務(wù)的需求，或出現(xiàn)性能優(yōu)化上的限制。在多數(shù)情況下，我們都會(huì)將這種系統(tǒng)稱為遺留系統(tǒng)。在這時(shí)團(tuán)隊(duì)里的氣氛便是“能不動(dòng)這些代碼就盡量不去動(dòng)它”。我們已經(jīng)很難將項(xiàng)目的問(wèn)題歸為人的因素，多數(shù)時(shí)候都是受業(yè)務(wù)擴(kuò)張的影響。作為一個(gè)專業(yè)的程序員，我們的本能就是將程序?qū)懞?，而我們往往沒(méi)有這樣的機(jī)會(huì)。業(yè)務(wù)人員對(duì)項(xiàng)目經(jīng)理說(shuō)：“我們的競(jìng)爭(zhēng)對(duì)手已經(jīng)在本周上線了這個(gè)功能。”項(xiàng)目經(jīng)理對(duì)開發(fā)人員說(shuō)：“這個(gè)功能下星期就要上線！”是的，我們的功能不得不馬上上線。這時(shí)候，我們往往要在代碼質(zhì)量和交付速度上做出一些妥協(xié)。妥協(xié)多了，系統(tǒng)也就變爛了。開發(fā)人員說(shuō)：“這個(gè)代碼我不太敢修改，要是出了什么大Bug怎么辦？”慢慢地人們就開始討論起重構(gòu)系統(tǒng)的事宜，并開始著手設(shè)計(jì)新的架構(gòu)——使之可以滿足當(dāng)前的業(yè)務(wù)需求、可預(yù)測(cè)時(shí)間內(nèi)的業(yè)務(wù)與技術(shù)需求。0.3技術(shù)選型與驗(yàn)證在討論新架構(gòu)的過(guò)程中，不同的人可能會(huì)有不同的技術(shù)偏好，也會(huì)因存在一些政治因素導(dǎo)致不同技術(shù)方案的產(chǎn)生。如團(tuán)隊(duì)中的一些人可能出于穩(wěn)定緣故而選擇Java，一些人可能出于對(duì)新技術(shù)的需求選擇Scala，而另外一些人可能考慮到團(tuán)隊(duì)中大部分人可能因?yàn)槎紩?huì)使用JavaScript而選擇使用JavaScript。如圖0-2所示，我們的考慮應(yīng)該不僅僅取決于這一系列的技術(shù)因素。圖0-2技術(shù)選型考慮因素需要注意的是：在做技術(shù)選型的時(shí)候，要盡最大可能以團(tuán)隊(duì)為核心。在做決定之前，我們要提出不同語(yǔ)言、框架下的技術(shù)模型，并且進(jìn)行驗(yàn)證。隨后就需要快速搭建出一個(gè)原型，并針對(duì)這個(gè)原型進(jìn)行假想式開發(fā)，然后驗(yàn)證原型本身是經(jīng)得起考驗(yàn)的。在這一階段，我通常喜歡在GitHub上搜索一些名字中帶有boilerplate的項(xiàng)目，即模塊文件。而當(dāng)一個(gè)框架很流行的時(shí)候，我就會(huì)去相應(yīng)的awesome-xx尋找，如awesome-react就可以尋找到react相關(guān)的項(xiàng)目集。然后，克隆這樣一個(gè)項(xiàng)目，開始依照現(xiàn)有的系統(tǒng)創(chuàng)建簡(jiǎn)單的Demo。隨后，就可以依據(jù)我們的業(yè)務(wù)試著在這上面進(jìn)行擴(kuò)展。最后，再?zèng)Q定是否使用這門技術(shù)和這個(gè)框架。通常來(lái)說(shuō)，在選擇一門新技術(shù)設(shè)計(jì)系統(tǒng)時(shí)，需要承擔(dān)的風(fēng)險(xiǎn)相當(dāng)大，而如果能成功，那么它可能會(huì)帶來(lái)巨大的收益。從這點(diǎn)看，使用最新的技術(shù)與賭博無(wú)異。在一些成熟的公司里，會(huì)有專門的技術(shù)委員會(huì)負(fù)責(zé)對(duì)新技術(shù)進(jìn)行審核，來(lái)決定是否可以在某個(gè)項(xiàng)目里使用新技術(shù)。除了考慮其為開發(fā)帶來(lái)的便利性，他們更多地還會(huì)考慮其成熟度、安全和技術(shù)風(fēng)險(xiǎn)等。0.4搭建構(gòu)建系統(tǒng)決定好架構(gòu)并選擇完技術(shù)棧后，我們就開始著手創(chuàng)建項(xiàng)目的構(gòu)建系統(tǒng)，設(shè)計(jì)項(xiàng)目的部署流程。構(gòu)建系統(tǒng)不僅包含項(xiàng)目相關(guān)的構(gòu)建流程，還從某種意義上反映了這個(gè)項(xiàng)目的工作流程。創(chuàng)建完“hello，world”程序后，我們要著手做的事情就是創(chuàng)建一個(gè)持續(xù)集成環(huán)境。這樣的環(huán)境包含一系列的工具、步驟及實(shí)踐，從工具上說(shuō)，我們需要選擇版本管理工具、代碼托管環(huán)境、持續(xù)集成工具、打包工具、自動(dòng)部署腳本等一系列流程，這些流程將會(huì)在第4章詳細(xì)討論。圖0-3便是筆者之前經(jīng)歷過(guò)的一個(gè)項(xiàng)目的構(gòu)建流程。圖0-3構(gòu)建過(guò)程這是一個(gè)后臺(tái)語(yǔ)言用Java、前臺(tái)語(yǔ)言用JavaScript的項(xiàng)目的構(gòu)建流程。0.5迭代在互聯(lián)網(wǎng)行業(yè)里，能越快速地對(duì)市場(chǎng)需求做出反應(yīng)，就越能有更好的發(fā)展。只要你細(xì)心觀察就可以發(fā)現(xiàn)，大部分互聯(lián)網(wǎng)公司都在以一定的規(guī)律更新產(chǎn)品，或者一周，或者兩周，又或者一個(gè)月等，這種不斷根據(jù)反饋來(lái)改進(jìn)產(chǎn)品的過(guò)程稱為迭代。如圖0-4所示是一個(gè)簡(jiǎn)化的迭代模型。圖0-4簡(jiǎn)化的迭代模型當(dāng)一個(gè)迭代開始時(shí)，我們需要收集上一個(gè)迭代的反饋或者新的需求，然后開始開發(fā)代碼，最后再發(fā)布產(chǎn)品。開發(fā)的產(chǎn)品在這個(gè)過(guò)程中不斷地增強(qiáng)功能。為此，還需要選擇一個(gè)好的迭代周期。一個(gè)好的迭代周期既應(yīng)該有充足的時(shí)間修復(fù)上一個(gè)迭代的Bug，又能在下一個(gè)迭代開始之前交付重要的功能。當(dāng)然，如果交付的軟件包里出現(xiàn)了重要的Bug，那么我們也能在第一時(shí)間使用舊版本的包，并在下一個(gè)迭代交付。在這樣的開發(fā)節(jié)奏里，一周顯得太短，一個(gè)月又顯得太長(zhǎng)，兩周會(huì)是一個(gè)很不錯(cuò)的時(shí)間。當(dāng)一個(gè)團(tuán)隊(duì)在這方面做得不好時(shí)，那么他們可能在一次上線后，發(fā)現(xiàn)重要的Bug，不得不在當(dāng)晚或者第二天更新他們的產(chǎn)品。即使是有經(jīng)驗(yàn)的團(tuán)隊(duì)，在開發(fā)初期也會(huì)經(jīng)常遇到這些問(wèn)題，而這些問(wèn)題可以依賴于在迭代中改進(jìn)。好的迭代實(shí)踐都是依據(jù)團(tuán)隊(duì)自身的需求而發(fā)展的，這意味著有時(shí)候適合團(tuán)隊(duì)A的實(shí)踐并不一定適合團(tuán)隊(duì)B。隨后，我們會(huì)在這個(gè)“hello，world”的基礎(chǔ)上不斷添加各種功能。0.6Web應(yīng)用開發(fā)步驟令人難以置信的是，我們做了這么多事情以后還沒(méi)有開始寫代碼。事實(shí)上，在這一步里，我們已經(jīng)搭建好了一個(gè)最小可運(yùn)行的Web應(yīng)用。在這之后，我們所要做的事情就是提交代碼即可。將代碼從本地提交到服務(wù)器后，持續(xù)集成服務(wù)器將幫我們運(yùn)行測(cè)試，在測(cè)試通過(guò)后，打包、發(fā)布現(xiàn)有的代碼，最后部署到測(cè)試環(huán)境里。（1）編碼如果不考慮技術(shù)難度的因素，寫代碼看上去就是一件很簡(jiǎn)單的事。我們只需要按照需求，將功能一點(diǎn)點(diǎn)往上疊加即可。如果不考慮這個(gè)過(guò)程中添加的代碼質(zhì)量，將會(huì)得到一個(gè)難以維護(hù)的系統(tǒng)，并且在拿到需求后的第一反應(yīng)也并非直接開始實(shí)現(xiàn)功能，而是首先應(yīng)該考慮可以將這個(gè)需求拆分為幾步，我們將這個(gè)過(guò)程稱為Tasking。假如，我們正在實(shí)現(xiàn)某個(gè)詳情頁(yè)的顯示功能，它依賴于前端和后臺(tái)。那么可以直接先做后臺(tái)API，再實(shí)現(xiàn)前臺(tái)API，最后依據(jù)需要微微調(diào)整API。我們也可以先用Mock的數(shù)據(jù)實(shí)現(xiàn)前端頁(yè)面，再依據(jù)定義出來(lái)的數(shù)據(jù)格式實(shí)現(xiàn)后臺(tái)API。在這兩種不同的實(shí)現(xiàn)中，我們都有一個(gè)明確的先后步驟。同樣，對(duì)于一個(gè)更加復(fù)雜的功能來(lái)說(shuō)，需要切分得更加仔細(xì)，每一次只挑選其中一個(gè)任務(wù)，實(shí)現(xiàn)后，再一步步往下執(zhí)行，最后實(shí)現(xiàn)這個(gè)功能。有意思的是，當(dāng)我們已經(jīng)決定切分為多步來(lái)實(shí)現(xiàn)功能的時(shí)候，就可以在每一步里進(jìn)行幾次不同的代碼提交，以便以后知道每一步中做了什么內(nèi)容。如果只是在最后一步直接提交代碼，那么在未來(lái)修改代碼時(shí)，便難以理清當(dāng)時(shí)的思路。一個(gè)合理的編碼過(guò)程不僅包括功能的實(shí)現(xiàn)，還應(yīng)該有測(cè)試。盡管出于項(xiàng)目進(jìn)度的原因，多數(shù)項(xiàng)目都不存在測(cè)試，而正是因?yàn)闆](méi)有測(cè)試，使得整個(gè)項(xiàng)目更加混亂。新的功能容易影響舊有的代碼，除非有足夠多的測(cè)試人員，否則我們無(wú)法保證所有的功能都是正常的。在有限的條件下，我們應(yīng)該編寫重要的測(cè)試，以保證核心功能不被破壞。在條件允許的情況下，我們應(yīng)該盡可能地保證測(cè)試對(duì)重要功能的覆蓋。由于代碼庫(kù)不只有一個(gè)人在提交，如果在某次提交中測(cè)試被破壞了，就可以知道誰(shuí)破壞了測(cè)試，他/她應(yīng)該有責(zé)任來(lái)修復(fù)這個(gè)測(cè)試。在完成功能后，我們還可以對(duì)代碼進(jìn)行重構(gòu)，以此來(lái)保證代碼的質(zhì)量。此外，在日常工作中，我們會(huì)用CodeDiff（代碼檢視）來(lái)幫助大家提高代碼質(zhì)量。因此，并不是實(shí)現(xiàn)了功能就完事了，我們應(yīng)該盡量保證代碼的質(zhì)量。（2）上線和數(shù)據(jù)分析好了，現(xiàn)在是時(shí)候上線了。在以前，上線就是登錄到服務(wù)器做數(shù)據(jù)備份。隨后，在本地構(gòu)建、上傳軟件包，安裝軟件的依賴。最后，重啟服務(wù)器、Done。在今天看來(lái)，這是一件相當(dāng)費(fèi)力的事，我們可以使用自動(dòng)部署工具來(lái)加快這個(gè)流程，甚至當(dāng)我們有足夠的測(cè)試覆蓋率時(shí)，可以直接將測(cè)試通過(guò)的代碼直接部署到產(chǎn)品環(huán)境。不過(guò)，要這樣做應(yīng)有相當(dāng)?shù)募夹g(shù)能力，并且要保證我們可以協(xié)調(diào)好開發(fā)人員、運(yùn)維人員等。從技術(shù)上說(shuō)，這可能是一件容易的事，但是從組織結(jié)構(gòu)上說(shuō)，這并不是一件輕松的事。而故事并沒(méi)有因此而止步于上線，在產(chǎn)品上線時(shí)，我們可以通過(guò)數(shù)據(jù)分析工具來(lái)監(jiān)測(cè)用戶的行為、網(wǎng)站的訪問(wèn)量等信息。對(duì)開發(fā)人員來(lái)說(shuō)，這樣的分析平臺(tái)可以幫助我們解決用戶在使用過(guò)程中遇到的Bug——他在哪一步出的問(wèn)題？他在出問(wèn)題前做了什么操作？對(duì)業(yè)務(wù)人員來(lái)說(shuō)，他們可以借此來(lái)分析產(chǎn)品受歡迎的程度、用戶及流量來(lái)源、轉(zhuǎn)化率等信息，并依此來(lái)對(duì)著陸頁(yè)、轉(zhuǎn)化率等進(jìn)行優(yōu)化。幾種常見的流量來(lái)源包括搜索引擎、外部鏈接、付費(fèi)搜索等，這些都可以依此來(lái)做出一些調(diào)整。從技術(shù)角度說(shuō)，我們可以提高網(wǎng)站的SEO（搜索引擎優(yōu)化）水平來(lái)添加流量，這將在第7章中進(jìn)行討論。0.7小結(jié)本章我們對(duì)本書的內(nèi)容進(jìn)行了一個(gè)簡(jiǎn)單概述，并完整地介紹了它們之間的聯(lián)系。同時(shí)還介紹了在閱讀過(guò)程中，我們將學(xué)習(xí)到的內(nèi)容，以及將遇到的一些挑戰(zhàn)。第1部分準(zhǔn)備階段在這一部分里，我們將主要精力集中于“項(xiàng)目開始前”的一些準(zhǔn)備工作，如搭建基礎(chǔ)的構(gòu)建系統(tǒng)、從業(yè)務(wù)角度對(duì)技術(shù)進(jìn)行選型等。同時(shí)，我們還將關(guān)注一些特別有意思的東西，如Web應(yīng)用的生命周期、對(duì)不同業(yè)務(wù)的技術(shù)棧考慮等。第1章基礎(chǔ)知識(shí)在本章中，我們將帶領(lǐng)讀者搭建好基本的開發(fā)環(huán)境——在不同的操作系統(tǒng)中，如Windows、MacOS、Linux，以及如何選擇IDE和Editor的一些偏好及設(shè)置，并引入版本管理系統(tǒng)及Git等基礎(chǔ)軟件工程的知識(shí)。xxx：HiPhodal，歡迎加入GrowthStudio項(xiàng)目組。我是xxx，今天由我來(lái)帶你進(jìn)入第一篇。我們?cè)谶M(jìn)入一個(gè)項(xiàng)目之后，需要做什么？Phodal：先運(yùn)行代碼。xxx：你再想想，在我們運(yùn)行某個(gè)語(yǔ)言的代碼之前需要什么？Phodal：安裝語(yǔ)言環(huán)境，還是安裝IDE？xxx：等等，讓我們先按順序來(lái)，為了克隆代碼，需要使用版本管理工具；為了修改代碼，需要一個(gè)編輯器；為了運(yùn)行代碼，需要安裝語(yǔ)言本身的環(huán)境。那么，你覺得我們先從哪一步開始呢？Phodal：都可以?，F(xiàn)在，讓我們先了解并搭建開發(fā)環(huán)境吧。1.1搭建開發(fā)環(huán)境搭建好順手的開發(fā)環(huán)境并不是立馬就能做到的事，不同的開發(fā)者有不同的偏好、技術(shù)信仰等。這些因素會(huì)導(dǎo)致每個(gè)人構(gòu)建完的開發(fā)環(huán)境有所差距。盡管如此，總的來(lái)說(shuō)，這些工具都會(huì)有一些相似的特征。同時(shí)，它們還需要有一些基本要素。1.1.1基本要素一般來(lái)說(shuō)，在一個(gè)新的計(jì)算機(jī)上搭建開發(fā)環(huán)境時(shí)，總會(huì)先安裝好下面幾個(gè)工具。包管理工具。包管理工具允許用戶用命令行或者UI界面的方式直接安裝軟件。例如，當(dāng)我們想在Ubuntu上安裝Vim編輯器時(shí)，可以直接在命令行輸入如sudoaptinstallvim，即可以安裝Vim編輯器，并且這樣的工具存在于不同的操作系統(tǒng)（Windows、MacOS、類UNIX系統(tǒng)）上。對(duì)MacOS和Windows來(lái)說(shuō)需要獨(dú)立安裝額外的軟件。命令行環(huán)境。如果你已經(jīng)使用了命令行來(lái)代替日常的操作，則可能還需要一個(gè)好的命令行運(yùn)行工具。如果你使用的是Windows，則需要有其他的命令行輔助工具來(lái)加速你的開發(fā)。編輯語(yǔ)言環(huán)境。多數(shù)情況下，我們的日用操作系統(tǒng)上都沒(méi)有相應(yīng)的語(yǔ)言運(yùn)行環(huán)境，需要安裝對(duì)應(yīng)語(yǔ)言的安裝包，及其對(duì)應(yīng)的包管理環(huán)境等。IDE或者編輯器。在編寫代碼時(shí)，需要一個(gè)IDE或者編輯器來(lái)編輯代碼。一個(gè)或多個(gè)現(xiàn)代的瀏覽器。在開發(fā)前端用戶界面時(shí)，只會(huì)用某個(gè)特定的瀏覽器來(lái)開發(fā)，這時(shí)容易因?yàn)槲覀兪褂昧艘恍┨囟▋?nèi)核（如Webkit）的瀏覽器，而導(dǎo)致界面在其他瀏覽器運(yùn)行時(shí)出現(xiàn)布局問(wèn)題。因此，至少需要一個(gè)額外的瀏覽器來(lái)保證運(yùn)行效果，GoogleChrome和Firefox在這方面都是一個(gè)不錯(cuò)的選擇，它們有相當(dāng)豐富的擴(kuò)展插件可以使用。建議讀者不要使用IE10以下的瀏覽器來(lái)充當(dāng)開發(fā)用的瀏覽器——除非需要兼容IE10以下的瀏覽器。數(shù)據(jù)庫(kù)軟件。同樣，為了使用數(shù)據(jù)庫(kù)，需要使用數(shù)據(jù)庫(kù)軟件。在開發(fā)時(shí)，SQLite和MySQL都是不錯(cuò)的選擇。在這些工具中，有很多是可以直接通過(guò)包管理工具來(lái)安裝的。因此，先讓我們了解一下包管理的概念及其作用。1.1.2常用效率工具及其在不同操作系統(tǒng)下的安裝在日常使用計(jì)算機(jī)時(shí)，可以安裝下面的工具來(lái)提高效率。包管理工具。命令行環(huán)境。快速啟動(dòng)工具。下面讓我們來(lái)逐一了解一下這些工具。1．包管理工具包管理不僅存在于操作系統(tǒng)中，還存在于不同語(yǔ)言的環(huán)境里。如前面所說(shuō)在操作系統(tǒng)中安裝軟件，最方便的東西莫過(guò)于包管理了。引自O(shè)penSUSE官網(wǎng)的說(shuō)明圖如圖1-1所示。圖1-1包管理在圖1-1中包含幾個(gè)基本的元素。軟件包（Packages）：軟件包不止是一個(gè)文件，內(nèi)含構(gòu)成軟件的所有文件，包括程序本身、共享庫(kù)、開發(fā)包以及使用說(shuō)明等。元數(shù)據(jù)（Metadata）：包含于軟件包中，包含軟件正常運(yùn)行所需要的一些信息。軟件包安裝之后，其元數(shù)據(jù)就存儲(chǔ)于本地的軟件包數(shù)據(jù)庫(kù)中，以用于軟件包檢索。軟件包依賴關(guān)系（Packagesdependencies）：它是軟件包管理的一個(gè)重要方面。實(shí)際上，每個(gè)軟件包都會(huì)涉及其他的軟件包，軟件包里程序的運(yùn)行需要有一個(gè)可執(zhí)行的環(huán)境（要求有其他的程序、庫(kù)等），軟件包依賴關(guān)系正是用來(lái)描述這種關(guān)系的。當(dāng)我們使用某個(gè)命令去安裝軟件時(shí)，將會(huì)運(yùn)行一系列的操作才能完成安裝。以在Ubuntu上安裝VIM為例：

phodal@ubuntu:~$sudoaptinstallvim

正在讀取軟件包列表...完成

正在分析軟件包的依賴關(guān)系樹

正在讀取狀態(tài)信息...完成

將會(huì)同時(shí)安裝下列軟件：

vim-runtime

建議安裝：

ctagsvim-docvim-scriptsvim-gnome-py2|vim-gtk-py2|vim-gtk3-py2|

vim-athena-py2

|vim-nox-py2

下列【新】軟件包將被安裝：

vimvim-runtime

升級(jí)了0個(gè)軟件包，新安裝了2個(gè)軟件包，要卸載0個(gè)軟件包，有0個(gè)軟件包未被升級(jí)。

需要下載6,247kB的歸檔。

解壓縮后會(huì)消耗30.2MB的額外空間。

一般來(lái)說(shuō)，在初始化包管理系統(tǒng)后，我們?cè)诒镜鼐彺嬗幸环莅芾矸?wù)器的軟件包列表。每次安裝某個(gè)軟件時(shí)，將會(huì)讀取這個(gè)軟件包清單，查找其中是否包含這個(gè)軟件包。隨后，開發(fā)構(gòu)建、查找出這個(gè)軟件所依賴的軟件包，并保證這些包是可用的。最后再安裝軟件包的依賴及該軟件包。同樣，對(duì)語(yǔ)言的包管理工具來(lái)說(shuō)也是如此。以Node.js為例，我們需要檢查服務(wù)器上是否有對(duì)應(yīng)的軟件包，下載它的package.json文件后，再安裝其package.json依賴的軟件包，安裝依賴后，再安裝這個(gè)依賴包。作為一個(gè)專業(yè)的程序員，我們經(jīng)常會(huì)使用各式各樣的包管理工具來(lái)加速日常使用。而不只是簡(jiǎn)單地通過(guò)Google搜索某個(gè)軟件，然后下載并安裝。2．命令行環(huán)境我們已經(jīng)在上面對(duì)包管理工具進(jìn)行了簡(jiǎn)單介紹，與包管理工具不一樣的是，命令行環(huán)境存在于不同的系統(tǒng)中。只是并不是所有的操作系統(tǒng)的命令行工具都會(huì)讓你覺得順手。多數(shù)時(shí)候，我們使用額外的工具來(lái)使系統(tǒng)更加方便使用。如在類UNIX系統(tǒng)里，我們使用Zsh\h\h(1)來(lái)替換默認(rèn)的Bash作為終端軟件。Zsh在兼容Bash的同時(shí)還提供了更好的自動(dòng)補(bǔ)全、更好的文件名展開等改進(jìn)。配置上OhMyZsh，就可以做出一個(gè)兼具實(shí)用與美觀的終端，如圖1-2所示。圖1-2Zsh示例在圖1-2上半部分，終端使用了不同的顏色和狀態(tài)來(lái)表示不同類型的文件，“growth-paper”部分用于顯示文件夾，白色字體用于顯示普通的文件。在圖1-2下半部分中，可以看到下面的部分里顯示Git的狀態(tài)，即當(dāng)前有修改，如圖1-3所示。圖1-3Git狀態(tài)當(dāng)我們執(zhí)行g(shù)itstatus時(shí)，它用黃色標(biāo)識(shí)出對(duì)這些文件進(jìn)行的修改。另外，它還能用不同的顏色標(biāo)識(shí)出不同文件的狀態(tài)。順便提一句：對(duì)Git來(lái)說(shuō)，使用如SourceTree之類的圖形界面也是一個(gè)不錯(cuò)的選擇。3．快速啟動(dòng)工具除了上面的兩個(gè)工具，我們還應(yīng)該有一個(gè)快速啟動(dòng)工具。直接使用快捷鍵來(lái)打開這個(gè)工具，輸入想要打開的程序的名字，再按下回車鍵，應(yīng)該可以直接運(yùn)行這個(gè)程序，或者打開某個(gè)文件。如圖1-4所示的是筆者日常使用的快速啟動(dòng)工具Alfred。圖1-4Alfred截圖輸入py時(shí)，它會(huì)尋找系統(tǒng)中對(duì)應(yīng)的程序，我們只需要按下回車鍵即可?，F(xiàn)在，我們來(lái)看看在不同的操作系統(tǒng)上如何安裝這些工具。4．在Windows上安裝（1）包管理工具：Chocolatey在Windows操作系統(tǒng)中，我們可以使用Chocolatey（網(wǎng)官地址：/）作為包管理工具。它的安裝過(guò)程也相當(dāng)簡(jiǎn)單，只需要用管理員權(quán)限運(yùn)行命令提示符，并粘貼下面的代碼即可：

@powershell-NoProfile-ExecutionPolicyBypass-Command"iex((New-Object

System.Net.WebClient).DownloadString('/install.

ps1'))"＆＆SET"PATH=％PATH％;％ALLUSERSPROFILE％\chocolatey\bin"

當(dāng)然也可以直接運(yùn)行PowerShell，然后輸入：

iex((New-ObjectSystem.Net.WebClient).DownloadString

('/install.ps1'))

建議讀者訪問(wèn)/install獲取安裝腳本來(lái)安裝。注意：你需要Windows7以上的操作系統(tǒng)，或者WindowsServer2003以上的系統(tǒng)，并且需要有.NETFramework4以上，以及PowerShellv2以上。安裝完成后，就可以直接運(yùn)行chocoinstall+軟件名稱來(lái)安裝對(duì)應(yīng)的軟件，例如，將在下面介紹的Wox（見圖1-5）。圖1-5Choco安裝Wox在這個(gè)過(guò)程中，choco將從服務(wù)器獲取對(duì)應(yīng)軟件包的下載地址，并下載對(duì)應(yīng)的軟件包，執(zhí)行相應(yīng)的安裝腳本來(lái)安裝軟件。注意：因?yàn)閏hoco是直接從相應(yīng)軟件指向的服務(wù)器上下載軟件的，所以在一些網(wǎng)站上（如GitHub）下載時(shí)，可能因?yàn)榫W(wǎng)絡(luò)問(wèn)題而無(wú)法訪問(wèn)或者下載中斷。（2）快速啟動(dòng)工具：WoxWox就是在前面提到的快速啟動(dòng)工具，除了上面提到的功能，它還可以打開百度、Google進(jìn)行搜索，甚至通過(guò)一些插件的功能實(shí)現(xiàn)單詞翻譯、關(guān)閉屏幕等更多的功能。另外，它還能支持中文拼音的模糊匹配。你可以直接從官網(wǎng)獲取該軟件，官網(wǎng)地址為：/，并在安裝完P(guān)ython語(yǔ)言環(huán)境后，即可使用Wox來(lái)快速啟動(dòng)工具。（3）命令行工具：cmderWindows自帶的CMD缺乏一系列的功能，難以完成日常的開發(fā)工作。當(dāng)我們習(xí)慣使用類UNIX上的命令行工具，或者準(zhǔn)備往類UNIX操作操作系統(tǒng)上遷移時(shí)，可以考慮使用Cygwin，它可以提供一個(gè)在Windows平臺(tái)上運(yùn)行的類UNIX模擬環(huán)境。如果只是為了日常使用，推薦使用Cmder來(lái)作為命令行工具。它把ConEmu（提供了一個(gè)全功能的Windows控制臺(tái)模擬器）、MSysGit［專門為Windows開發(fā)的Git工具（GitForWindows），它集成了所需要的運(yùn)行環(huán)境和組件，直接安裝即可使用］和Clink（提供了強(qiáng)大的命令行工具）打包在一起，它附帶了漂亮的monokai配色主題。你可以訪問(wèn)Cmder的官網(wǎng)（/）自行下載該軟件。如果你的電腦上沒(méi)有安裝Git環(huán)境，應(yīng)該下載全功能（Full）版本，而不是Mini版。5．在GNU/Linux上安裝對(duì)于GNU/Linux系統(tǒng)，如Ubuntu、CentOS、OpenSuSE等來(lái)說(shuō)，它們都自帶了包管理工具。對(duì)不同的系統(tǒng)來(lái)說(shuō)，有不同的安裝命令，如Ubuntu的apt（在低版本的Ubuntu系統(tǒng)中使用apt-get）、CentOS的yum，以及OpenSuSE的yast等。因此，建議讀者參照自己所用的操作系統(tǒng)來(lái)使用。（1）命令行工具：Zsh同樣，對(duì)類UNIX用戶來(lái)說(shuō)，建議讀者使用Zsh，并且可以搭建OhMyZsh使用。Zsh可以直接使用包管理工具來(lái)安裝。OhMyZsh是一個(gè)開源的、社區(qū)驅(qū)動(dòng)的zsh配置管理框架。它托管在GitHub上，有超過(guò)1000個(gè)開發(fā)者為這個(gè)項(xiàng)目做出貢獻(xiàn)，并且它有200多個(gè)插件，以及多達(dá)140個(gè)主題。安裝方法相當(dāng)簡(jiǎn)單。我們可以通過(guò)curl命令來(lái)安裝：

sh-c"$(curl-fsSL/robbyrussell/oh-my-zsh/master/tools/install.sh)"

或者用wget命令安裝：

sh-c"$(wget/robbyrussell/oh-my-zsh/master/tools/install.sh-O-)"

注意：在很多操作系統(tǒng)上，curl和wget都需要單獨(dú)安裝。（2）快速啟動(dòng)工具：Launchy同樣，我們也需要在GNU/Linux操作系統(tǒng)上安裝一個(gè)快速啟動(dòng)工具，Launchy就是一個(gè)不錯(cuò)的選擇。它是一個(gè)跨平臺(tái)的快速啟動(dòng)工具，只需要按下Alt+空格鍵就可以打開它的主界面，然后就可以和Alfred一樣輸入名字調(diào)出應(yīng)用程序。6．在MacOS上安裝（1）包管理工具：Homebrew與Windows操作系統(tǒng)相似的是，MacOS上也沒(méi)有自帶的包管理工具，因此，需要通過(guò)第三方軟件來(lái)實(shí)現(xiàn)包管理功能。在MacOS下有兩個(gè)不錯(cuò)的包管理工具，一個(gè)是MacPorts，另一個(gè)是Homebrew，前者因?yàn)闄?quán)限和依賴問(wèn)題而飽受詬病。其安裝方法也相當(dāng)簡(jiǎn)單，只需要執(zhí)行下面的命令（也可以直接訪問(wèn)http://brew.sh/來(lái)獲取）即可：

/usr/bin/ruby-e"$(curl-fsSL/Homebrew/install/master/install)"

Homebrew依賴于XcodeCommandLineTools來(lái)編譯和下載軟件。因此，如果沒(méi)有安裝該軟件，在安裝過(guò)程中會(huì)提示安裝該軟件。如果使用該工具來(lái)安裝wget，其命令如下：

brewinstallwget

HomebrewCask是Homebrew的擴(kuò)展，它可以基于Homebrew來(lái)安裝帶有圖形界面的應(yīng)用，而不是通過(guò)拖拉來(lái)安裝程序。例如，無(wú)法通過(guò)Homebrew來(lái)安裝GoogleChrome瀏覽器，但可以通過(guò)HomebrewCask來(lái)安裝它。其安裝方式如下：

brewtapcaskroom/cask

隨后，可以通過(guò)下面的命令來(lái)安裝GoogleChrome瀏覽器：

brewcaskinstallgoogle-chrome

（2）命令行工具：iTerm2MacOS自帶的終端僅僅提供了一些基本的終端功能，而iTerm2在這上面提供了更多的功能，如切割窗格、熱鍵切換窗口、搜索、自動(dòng)完成等功能，并且只需要配合好上面的Zsh和OhMyZsh就可以制作出一個(gè)漂亮的控制臺(tái)。1.1.3搭建開發(fā)環(huán)境除了上面提到的這些工具，還需要安裝Python語(yǔ)言的運(yùn)行環(huán)境，由于我們將在書中使用Django作為Web開發(fā)框架，其官方文檔中不同的Django版本對(duì)Python有不同的版本要求，見表1-1所示。表1-1Django版本Python版本1．82．7、3.2（至2016年年底）、3.3、3.4、3.51．9、1.102．7、3.4、3.51．112．7、3.4、3.5、3.62．03．5+考慮到Django2.0后的版本只支持使用Python3.5及以上版本，這里將使用Python3.5來(lái)開發(fā)Web應(yīng)用。對(duì)Windows用戶來(lái)說(shuō)，我們需要從/處下載Python3.5，或者直接使用choco來(lái)安裝。在Ubuntu16.10版本的系統(tǒng)上，它自帶了最新版本的Python。在MacOS系統(tǒng)上，可以通過(guò)上面介紹的brew來(lái)安裝。另外，你還需要在計(jì)算機(jī)上安裝一個(gè)Chrome瀏覽器，并安裝一個(gè)Git客戶端來(lái)進(jìn)行版本管理。如果不習(xí)慣使用命令行進(jìn)行版本管理，可以考慮試試SoureTree。它是一個(gè)免費(fèi)的Git客戶端，并且提供一個(gè)扁平化的可視界面，如圖1-6所示。圖1-6SourceTree截圖我們可以直觀地查看分支情況、提交信息、修改內(nèi)容，并且可以進(jìn)行拉取、提交代碼等操作。1.1.4開發(fā)工具如果你是一名編程新手，建議你使用IDE。隨后，可以考慮自定義自己的編輯器。在編輯器里無(wú)論是Vim還是Emacs，或者是流行的VisualCode或者Atom，都需要花費(fèi)時(shí)間去配置，以使編輯器可以像IDE一樣強(qiáng)大。但是怎樣才算和IDE一樣強(qiáng)大呢？你需要有下面的一些東西。語(yǔ)法高亮。這是最基礎(chǔ)的功能（如果你正在使用的編輯器，如記事本，不支持該功能，請(qǐng)不要再用這樣的工具。），它能依據(jù)語(yǔ)言中的關(guān)鍵詞使用不同的顏色和字體區(qū)分代碼。它可以增強(qiáng)人對(duì)編輯器中內(nèi)容的可讀性，來(lái)降低誤讀和誤寫的概率。插件功能。選擇手機(jī)操作系統(tǒng)與選擇計(jì)算機(jī)操作系統(tǒng)一樣，我們會(huì)選擇具有豐富軟件的系統(tǒng)。同樣，如果開發(fā)工具也有豐富的插件，那么它們將大大提高開發(fā)效率，諸如Emmet可以使用簡(jiǎn)潔的語(yǔ)法加快編碼HTML和CSS。代碼跳轉(zhuǎn)。在閱讀代碼的時(shí)候，它可以幫助我們直接跳轉(zhuǎn)到函數(shù)聲明的地方，又或者可以幫助找到引用的地方。特別是當(dāng)我們修改函數(shù)參數(shù)時(shí)，這個(gè)功能顯得尤為強(qiáng)大。自動(dòng)完成。當(dāng)我們聲明了一個(gè)名為“check_update”的文件時(shí)，在下次輸入“check_”時(shí)，編輯器或IDE就會(huì)提示“check_update”，并且在一些IDE里，當(dāng)我們選中時(shí)，它將會(huì)自動(dòng)創(chuàng)建變量等。錯(cuò)誤檢查。它可以在編寫代碼時(shí)提示上一步中哪些內(nèi)容是錯(cuò)誤的，如少了一個(gè)“;”號(hào)，又或者是輸入的參數(shù)是有誤的。版本控制集成。使用版本控制軟件是編程人員的基本技能，好的編輯器會(huì)集成這樣的功能，我們可以直接在編輯器里比較代碼的修改，查看上次的修改時(shí)間等，又或者直接提交代碼。依賴管理。當(dāng)我們自己去寫importxx語(yǔ)句來(lái)引用某個(gè)庫(kù)的時(shí)候，還需要花費(fèi)時(shí)間去找到對(duì)應(yīng)的類。當(dāng)開發(fā)工具上有這樣的功能時(shí)，只需要先編寫代碼，再調(diào)用快捷鍵導(dǎo)入依賴即可。調(diào)試。對(duì)前端開發(fā)人員來(lái)說(shuō)，瀏覽器就是最好的調(diào)試工具。對(duì)后臺(tái)人員來(lái)說(shuō)，只有“print”是不夠的，還需要深入每一步函數(shù)調(diào)用，才會(huì)發(fā)現(xiàn)問(wèn)題出在哪里。高級(jí)功能。如重構(gòu)等。筆者一直很喜歡Jetbrains系列的IDE，是因?yàn)樗鼘?duì)重構(gòu)有很好的支持。無(wú)論是Emacs和Vim這樣的編輯器，還是WebStorm這樣的IDE，我們都需要花時(shí)間去掌握它們的快捷鍵。提示：當(dāng)我們需要某個(gè)語(yǔ)言、框架的常用功能、函數(shù)等，又或者是編輯器的快捷鍵時(shí)，可以直接搜索其對(duì)應(yīng)的cheatsheet（即小抄），通常會(huì)在一頁(yè)P(yáng)DF或者圖片里顯示其全部功能。如我們可以搜索“vimcheatsheet”，并將其打印出來(lái)，或者可以直接購(gòu)買相應(yīng)的cheatsheet水杯。下面看看網(wǎng)上常用的一些IDE或者編輯器。1．開發(fā)工具推薦在工作中，筆者習(xí)慣使用IDE。在項(xiàng)目工作中，我需要在不同的語(yǔ)言間切換，而JetBrains的那些IDE可以提供一個(gè)一致的開發(fā)環(huán)境，并且公司會(huì)為這些效率工具買單。當(dāng)我們?cè)诓煌恼Z(yǔ)言間切換的時(shí)候，IDE顯得特別有戰(zhàn)斗力，我們不需要花費(fèi)大量的時(shí)間去搭建自己的開發(fā)環(huán)境，這些工具都可以開啟即用。而選擇編輯器則需要花費(fèi)大量的時(shí)間去選擇合適的插件，當(dāng)有多種語(yǔ)言時(shí)，這種成本開始變得不可接受。在本書中，我們將使用PyCharm社區(qū)版作為開發(fā)工具，它是免費(fèi)版本的。如果你尋求更強(qiáng)大的功能，則可以考慮使用專業(yè)版。除了PyCharm，我們也有一些不錯(cuò)的編輯器可以使用。SublimeText：是一款相當(dāng)流行的收費(fèi)圖形編輯器。由于其本身使用了Python語(yǔ)言作為開發(fā)語(yǔ)言，其對(duì)Python語(yǔ)言的支持相當(dāng)好。它帶有代碼縮略圖、完整的PythonAPI、Goto功能等。它還帶有一個(gè)非常豐富的插件系統(tǒng)，前提是要手動(dòng)安裝社區(qū)驅(qū)動(dòng)的包管理器：PackageControl。它可以同時(shí)支持Windows、Linux、MacOSX等操作系統(tǒng)。Atom和VisualCode：兩者都是開源且免費(fèi)的編輯器，都有相當(dāng)豐富的插件。如果你的電腦配置不錯(cuò)，可以考慮使用Atom或者VisualCode作為編輯器，由于其基于Electron（基于Chromium瀏覽器），因此，需要消耗更多的內(nèi)存。值得一提的是，Atom提供了更豐富的插件系統(tǒng)，而VisualCode可以提供更流暢的體驗(yàn)。Vim：其和Emacs是在Linux和UNIX系統(tǒng)中最常用的兩種文本編輯器。它是從vi發(fā)展出來(lái)的一個(gè)文本編輯器，它遵循“簡(jiǎn)單工具，多樣組合”的理念，并且相當(dāng)小巧。同時(shí)，VI作為單一UNIX規(guī)范（SingleUNIXSpecification）的一部分，使得它存在于各種UNIX系統(tǒng)中。與上面的圖形編輯器相比，使用Vim意味著需要多用鍵盤，少用鼠標(biāo)。Emacs：提供了更強(qiáng)大的擴(kuò)展功能，它可以稱為集成開發(fā)環(huán)境。與Vim相當(dāng)，Emacs需要更多的練習(xí)才能上手。注意：如果你是編程新手，不建議使用Vim和Emacs作為編輯器，因?yàn)樾枰ㄙM(fèi)大量的時(shí)間學(xué)習(xí)使用編輯器。2．IDE和編輯器在諸如嵌入式這樣特定的領(lǐng)域里，由于芯片、開發(fā)板等局限，我們只能使用特定的編輯器，或者開發(fā)工具。而在Web開發(fā)領(lǐng)域，可以選擇的范圍太廣了，正是因?yàn)橛刑嗟墓ぞ呖梢赃x擇，很容易讓我們花費(fèi)大量的時(shí)間在切換工具上。因此，在嘗試完編輯器之后，就需要好好練習(xí)選定的編輯器。畢竟：“好的裝備確實(shí)能帶來(lái)一些幫助，但事實(shí)是，你的演奏水平是由你自己的手指決定的?！薄猂EWORK（1）工具是為了效率尋找工具的目的和尋找捷徑是一樣的，我們需要更快更有效地完成工作。換句話說(shuō)，我們可以節(jié)省更多的時(shí)間去做更多的事情，而這個(gè)工具的用途要看具體的事務(wù)，如果我們?nèi)懸徊啃≌f(shuō)、博客的時(shí)候，Word或者WebEditor會(huì)比TexStudio來(lái)得快。用TEX來(lái)排版代碼、公式會(huì)比用Word排版的時(shí)候來(lái)得更快，所以這個(gè)工具的好壞是相對(duì)的。有時(shí)候用一個(gè)順手的工具會(huì)好很多，但是不一定會(huì)是事半功倍的。我們?cè)谑褂米詭У膱D形工具就可以完成裁剪、旋轉(zhuǎn)時(shí)，就沒(méi)必要運(yùn)行GIMP或者Photoshop完成這個(gè)簡(jiǎn)單的任務(wù)。我們應(yīng)該專注于內(nèi)容，在合適的時(shí)候使用合適的工具。盡管我更喜歡用Emacs作為控制編輯器，但是在服務(wù)器上修改某些配置時(shí)，我會(huì)使用Vim來(lái)修改內(nèi)容。而如果是在日常使用過(guò)程中，作為日常的暫存區(qū)，即暫時(shí)放置數(shù)據(jù)，或者格式化JSON文件等適合GUI操作時(shí)，我會(huì)使用Sublime作為工具。（2）了解、熟悉你的工具Windows、Word等軟件的功能很強(qiáng)大，只是大部分人只用了其中很少一部分功能。那么，如果我們只用Word來(lái)寫寫東西，是不可以使用更簡(jiǎn)單的、開源的Abiword來(lái)替換它。明顯不太可能，因?yàn)閺?qiáng)大的工具對(duì)我們來(lái)說(shuō)有更大的吸引力。如果你有能力購(gòu)買你手上的工具，那么就盡可能去了解它能干什么。即使它是一些無(wú)關(guān)僅要的功能，比如Emacs的煮咖啡。如Linux下面的命令有一大堆，只是我們常用的只有一小部分——20％的命令能夠完成80％的工作。如同CISC和RISC一樣，常用的指令會(huì)讓我們忘記那些不常用的指令。而那些是最實(shí)用的，如同日常工作中使用的Linux一樣，記憶過(guò)多的不實(shí)用的東西，不如把它們記在筆記本上實(shí)在。我們只需要了解有哪些功能，如何去使用它，并練習(xí)和牢記那些實(shí)用的功能。如我在寫本書時(shí)，主要是用Markdown編輯器在編寫內(nèi)容，最后排版時(shí)使用Word。盡管我持有一個(gè)PhotoShop的License，但本書中的許多插圖都是由Word中的SmartArt做出來(lái)的，它在創(chuàng)作很多圖形時(shí)非常便捷，并且容易使用。經(jīng)驗(yàn)分享：當(dāng)我第一次看到有人非常熟練地使用IntellijIDEA快捷鍵時(shí)，我卻花了相當(dāng)長(zhǎng)的時(shí)間在練習(xí)使用快捷鍵，如切換、重構(gòu)等。同樣，對(duì)于諸如Vim和Emacs這一類超受歡迎的編輯器來(lái)說(shuō)，我們也需要大量的練習(xí)，并且最好有一本相應(yīng)的書，如在我的書架上有《Vim實(shí)用技巧》和《學(xué)習(xí)GNUEmacs》。我也花費(fèi)了大量的時(shí)間在選擇編輯器上，選擇適合的工具總是有益的。這里假設(shè)讀者已經(jīng)選定了一個(gè)開發(fā)工具（遺憾的是，這并不是一件容易的事）。現(xiàn)在，我們要著手于提高我們的演奏水平了。1.2版本控制版本控制是記錄一個(gè)或若干文件內(nèi)容變化，以便將來(lái)查閱特定版本修訂情況的一種系統(tǒng)。通常使用版本控制系統(tǒng)來(lái)管理代碼文件，但實(shí)際上，我們會(huì)發(fā)現(xiàn)除了代碼，諸如文檔、服務(wù)器配置等也應(yīng)該進(jìn)入版本控制系統(tǒng)的管理范圍。通過(guò)版本控制系統(tǒng)，我們可以做以下事情。將某個(gè)文件回溯到之前的狀態(tài)。將項(xiàng)目回退到過(guò)去某個(gè)時(shí)間點(diǎn)。在修改Bug時(shí)，可以查看修改歷史，查出修改原因。只要版本控制系統(tǒng)還在，就可以任意修改項(xiàng)目中的文件，并且輕松恢復(fù)。常用的版本控制系統(tǒng)有Git、SVN，但是從近年來(lái)看Git更受市場(chǎng)歡迎。Git可以支持分布式、離線使用、本地分支，以及諸如智能的合并能力等特性。因此，下面以Git為例對(duì)版本管理系統(tǒng)進(jìn)行介紹。1.2.1Git初入如果是第一次使用Git，則需要設(shè)置用戶名和郵箱：

$gitconfig--global"用戶名"

$gitconfig--globaluser.email"電子郵箱"

你可以在GitHub上新建免費(fèi)的公開倉(cāng)庫(kù)，并按照GitHub的文檔配置SSHKey，然后將代碼倉(cāng)庫(kù)克隆到本地，其實(shí)就是將代碼復(fù)制到你的機(jī)器里，并交由Git來(lái)管理：

$gitclonegit@:username/repository.git

或使用HTTPS地址進(jìn)行克隆：

$gitclonehttps://username:password@/username/repository.git

你可以修改復(fù)制到本地的代碼了（symfony-docs-chs項(xiàng)目里都是rst格式的文檔）。當(dāng)你覺得完成了一定的工作量，想做一個(gè)階段性的提交，并向這個(gè)本地的代碼倉(cāng)庫(kù)添加當(dāng)前目錄的所有改動(dòng)：

$gitadd.

或者只是按需要來(lái)添加修改的內(nèi)容：

$gitadd-p

可以輸入：

$gitstatus

來(lái)看現(xiàn)在的狀態(tài)，圖1-7是添加之前的，圖1-8是添加之后的情況。圖1-7添加前圖1-8添加后可以看到狀態(tài)的變化是從黃色到綠色，即從unstage到add。在完成添加之后，我們就可以寫入相應(yīng)的提交信息，如這次修改添加了什么內(nèi)容、這次修改修復(fù)了什么問(wèn)題等。在我們的工作流程里，使用Jira這樣的工具來(lái)管理項(xiàng)目時(shí)，也會(huì)在CommitMessage里寫上作者的名字，如下：

$gitcommit-m"[GROWTH-001]Phodal:addfirstcommit＆example"

這里的GROWTH-001就相當(dāng)于任務(wù)號(hào)，Phodal則對(duì)應(yīng)于用戶名，后面的提交信息也會(huì)寫明這個(gè)任務(wù)的作用。由于有測(cè)試存在，在完成提交之后，就需要運(yùn)行相應(yīng)的測(cè)試來(lái)保證沒(méi)有破壞原來(lái)的功能。因此，可以PUSH代碼到服務(wù)器端：

$gitpush

這樣其他人就可以看到我們修改的代碼。1.2.2Git工作流雖然基于Git的工作流可能并不是一個(gè)非常好的實(shí)踐，但是這里以這個(gè)工作流為參考來(lái)進(jìn)行我們的項(xiàng)目。圖1-9是由VincentDriessen定義的一個(gè)分支策略。圖1-9Git分支策略對(duì)使用Git的新手來(lái)說(shuō)，Gitflow工作流可能有些復(fù)雜。下面簡(jiǎn)單介紹一下。我們平常會(huì)工作在開發(fā)（即圖1-9中的“develop”）分支上（通常會(huì)直接工作在master上，從使用上并沒(méi)有多大的不同），不同的開發(fā)人員可以直接向這個(gè)分支提交代碼。又或者是當(dāng)我們?cè)谧鲆恍┲匾墓δ軙r(shí)，可能就會(huì)從分支上拉出一個(gè)新的featurebranchs（即，功能分支），等完成后再合并到開發(fā)分支上。每個(gè)迭代會(huì)發(fā)布一個(gè)新的版本，即使用releasebranchs來(lái)創(chuàng)建新的標(biāo)簽，這個(gè)新的版本將會(huì)直接上線到產(chǎn)品環(huán)境。那么上線到產(chǎn)品環(huán)境的這個(gè)版本就需要打一個(gè)版本號(hào)——這樣不僅方便跟蹤我們的系統(tǒng)，而且當(dāng)出錯(cuò)的時(shí)候也可以直接回滾到上一個(gè)版本。如果在上線的時(shí)候有些Bug不得不修復(fù)，并且由于上線的新功能很重要，就需要一些Hotfix。從整個(gè)過(guò)程來(lái)看，版本控制起了一個(gè)非常大的作用。在開源社區(qū)GitHub上使用Git時(shí)，人們會(huì)采用PullRequest來(lái)向一些開源軟件提交代碼。1.3任務(wù)拆分在我畢業(yè)前實(shí)習(xí)的時(shí)候，每當(dāng)結(jié)對(duì)編程開始的時(shí)候總會(huì)有人教我如何開始編碼——Tasking。而從很多事情上看，這是一項(xiàng)基本的能力。結(jié)合日常，重新演繹一下這個(gè)過(guò)程：①有一個(gè)明確的實(shí)現(xiàn)目標(biāo)。②評(píng)估目標(biāo)并將其拆解成任務(wù)（TODO）。③規(guī)劃任務(wù)的步驟（TODO）。④學(xué)習(xí)相關(guān)技能。⑤執(zhí)行Task，遇到難題就跳到第②步。簡(jiǎn)單地說(shuō)，就是切分目錄，變成一個(gè)TODO列表，再一個(gè)個(gè)地完成任務(wù)。1.3.1一本書的任務(wù)拆分以本章的寫作為例，細(xì)分上面的過(guò)程就是：①我有了一個(gè)中心思想——在某種意義上說(shuō)就是標(biāo)題。②依據(jù)中心思想將這篇文章分成了四節(jié)。③開始分別寫四節(jié)的內(nèi)容。④直到完成。如果將其劃分到一個(gè)編程任務(wù)，那么也是一樣的：①我們想到做一個(gè)xxx的idea。②為了這個(gè)idea需要分成幾步，或者幾層設(shè)計(jì)。③對(duì)于每一步，我們應(yīng)該做點(diǎn)什么。④我們需要學(xué)習(xí)什么技能。⑤集成每一步的代碼，就有了我們的系統(tǒng)?，F(xiàn)在以這本書的寫作過(guò)程為例，來(lái)看看這個(gè)過(guò)程是怎么發(fā)生的。在計(jì)劃寫一本書的時(shí)候，我們有關(guān)于這本書主題的一些想法。正是一些想法慢慢地凝聚成一個(gè)穩(wěn)定的想法，不過(guò)這不是討論的重點(diǎn)。當(dāng)我們已經(jīng)有了一本書的相關(guān)話題的時(shí)候，我們會(huì)打算怎么做？先來(lái)個(gè)頭腦風(fēng)暴，在上面寫滿我們的一些想法，如這本書最開始劃分了這七步：從零開始編碼上線數(shù)據(jù)分析持續(xù)交付遺留系統(tǒng)回顧與新架構(gòu)接著，依據(jù)我們的想法整理章節(jié)。對(duì)應(yīng)每一章節(jié)，我們都需要想好每一章里的內(nèi)容。如在第1章里，又可以分成不同的幾部分。隨后，我們?cè)賹?duì)每一部分的內(nèi)容進(jìn)行任務(wù)劃分，就會(huì)得到一個(gè)又一個(gè)小的章節(jié)。在每個(gè)小的章節(jié)里，可以大概策劃一下我們要寫的內(nèi)容。隨后，就可以開始寫這樣一本書——由一節(jié)節(jié)匯聚成一章，由一章章匯聚成一本。1.3.2一個(gè)功能的任務(wù)拆分現(xiàn)在，讓我們簡(jiǎn)單計(jì)劃如何開發(fā)一個(gè)博客。作為一個(gè)程序員，如果要去開發(fā)一個(gè)博客系統(tǒng)，我們會(huì)怎么做？①先規(guī)劃一下所需要的功能——如后臺(tái)、評(píng)論、社交分享等，并且還應(yīng)該設(shè)計(jì)博客的草圖。②隨后就可以簡(jiǎn)單設(shè)計(jì)一下系統(tǒng)的架構(gòu)，如傳統(tǒng)的前后端結(jié)合。③進(jìn)行技術(shù)選型——使用哪個(gè)后端框和前端框架。④創(chuàng)建我們的“hello,world”，然后開始進(jìn)行一個(gè)功能的編碼工作。⑤編碼時(shí)，需要不斷地查看、添加測(cè)試操作。⑥完成一個(gè)個(gè)功能后，就會(huì)得到一個(gè)子模塊。⑦依據(jù)一個(gè)個(gè)子模塊，可以得到我們的博客系統(tǒng)。與我們?nèi)粘ｉ_發(fā)一致的是：需要去劃分任務(wù)的優(yōu)先級(jí)。換句話說(shuō)，就是需要先實(shí)現(xiàn)我們的核心功能。對(duì)我們的博客系統(tǒng)來(lái)說(shuō)，最主要的功能就是發(fā)博客、展示博客。簡(jiǎn)單地說(shuō)，一篇博客應(yīng)該有以下部分。標(biāo)題內(nèi)容作者時(shí)間Slug然后，我們就需要?jiǎng)?chuàng)建相應(yīng)的Model（模型），根據(jù)這個(gè)Model創(chuàng)建相應(yīng)的控制器代碼。再配置一下路由，添加頁(yè)面。對(duì)有些系統(tǒng)來(lái)說(shuō)，就可以完成博客系統(tǒng)的展示了。1.4小結(jié)在本章，我們介紹了Web開發(fā)環(huán)境的基本要素，并介紹了如何在不同的操作系統(tǒng)中配置這樣的環(huán)境。在大部分計(jì)算機(jī)書籍里，關(guān)于搭建環(huán)境的內(nèi)容都不會(huì)放在正式章節(jié)里，故讀者容易忽略這些內(nèi)容。而當(dāng)我們真正在編碼的時(shí)候，卻需要去尋找這些工具?！猏h(1)Zsh是一款功能強(qiáng)大的終端（Shell）軟件，既可以作為一個(gè)交互式終端，也可以作為一個(gè)腳本解釋器。第2章最小可行化應(yīng)用在這一章中，我們會(huì)以一個(gè)簡(jiǎn)單的Demo介紹Web應(yīng)用的模型。然后這個(gè)模型將與真實(shí)的世界進(jìn)行類比，并介紹如何簡(jiǎn)化真實(shí)世界的模型，并對(duì)其進(jìn)行建模。依據(jù)模型上的一些區(qū)別，我們還將引入前/后端的概念。xxx：我們的App上線了，遺憾的是發(fā)現(xiàn)缺少一個(gè)重要的頁(yè)面，即展示GrowthStudio相關(guān)作品的著陸頁(yè)?，F(xiàn)在只剩下不到一天的時(shí)間可以完成這個(gè)任務(wù)，你覺得我們應(yīng)該怎么做？Phodal：一天的時(shí)間夠嗎？一個(gè)Web應(yīng)用需要一個(gè)數(shù)據(jù)庫(kù)和一個(gè)Web框架等之類的東西吧？xxx：不，這些我們不需要，我們需要一個(gè)能在一天內(nèi)上線的產(chǎn)品。因此，我們可以做一個(gè)最簡(jiǎn)單的HTML頁(yè)面。Phodal：就是HTML+JS+CSS，然后就可以上線了？xxx：是的，我們只需要寫寫HTML、JS和CSS就可以上線。然后，我們將會(huì)使用Bootstrap這個(gè)成熟的前端框架。Phodal：為什么不需要稍微具有挑戰(zhàn)性的技術(shù)？xxx：從短期時(shí)間來(lái)看，我們正在做的功能雖然很簡(jiǎn)單，但是它的業(yè)務(wù)價(jià)值非常高。并且如果我們可以使用越通用的技術(shù)，它就越容易維護(hù)。越快的實(shí)現(xiàn)，就能體現(xiàn)它的價(jià)值。盡管對(duì)我們的App來(lái)說(shuō)，需要的是一個(gè)門戶網(wǎng)站，在首頁(yè)有一個(gè)完整的簡(jiǎn)介，帶有簡(jiǎn)單的博客功能，還要有一個(gè)關(guān)于我們的介紹。但是現(xiàn)在對(duì)我們來(lái)說(shuō)，最重要的是讓用戶可以看到有一個(gè)首頁(yè)的介紹頁(yè)面。2.1最小可行化產(chǎn)品為了盡可能快地做出一個(gè)著陸頁(yè)，我們能考慮到的最佳方案就是：基于模板來(lái)修改。而在那之前，我們還需要有一個(gè)簡(jiǎn)單的設(shè)計(jì)稿。在理想情況下，我們還應(yīng)該有一個(gè)Web設(shè)計(jì)師來(lái)幫助我們?cè)O(shè)計(jì)出原型圖。因此，讓我們重新Tasking一下，如何去做一個(gè)著陸頁(yè)。創(chuàng)建一個(gè)原型圖。選擇一個(gè)Web框架，優(yōu)先考慮響應(yīng)式設(shè)計(jì)，即對(duì)移動(dòng)設(shè)備友好。搭建該框架的“hello，world”。添加需要的功能和代碼。打包上線。隨后，再依據(jù)需要的功能進(jìn)行迭代式開發(fā)。下面我們就從繪制一個(gè)原型圖開始。通常來(lái)說(shuō)，原型圖是由Web設(shè)計(jì)師（或者UX、UI等角色）與項(xiàng)目擁有者一起設(shè)計(jì)出來(lái)的。項(xiàng)目擁有者告訴設(shè)計(jì)師他需要的內(nèi)容以及大致的樣式。設(shè)計(jì)師在設(shè)計(jì)過(guò)程中需要向擁有者提供一些專業(yè)的建議來(lái)改進(jìn)設(shè)計(jì)，并盡可能讓其風(fēng)格與現(xiàn)有的產(chǎn)品保持一致，以保證基本的用戶識(shí)別度。在著陸頁(yè)中需要下面一些基本元素：頁(yè)眉：即Header，包含Logo和多個(gè)導(dǎo)航按鈕。主區(qū)域：包含圖片輪播，介紹不同項(xiàng)目的一些信息。頁(yè)腳：即Footer，主要放置版權(quán)信息，當(dāng)導(dǎo)航的數(shù)量較多時(shí)，也會(huì)放置在這里。當(dāng)前我們并沒(méi)有太多的功能需要實(shí)現(xiàn)，只需要?jiǎng)?chuàng)建一個(gè)簡(jiǎn)單的著陸頁(yè)即可。于是，我們需要先制作一個(gè)簡(jiǎn)單的草圖。這樣的工具有很多，如BalsamiqMockups、Axure，也可以使用PhotoShop來(lái)實(shí)現(xiàn)。這里推薦一個(gè)名為Pencil的原型圖工具，它是一個(gè)開源且免費(fèi)的原型圖工具，可以運(yùn)行在MacOS、Windows和GNU/Linux等不同的操作系統(tǒng)之上。它內(nèi)建圖形管理器、支持使用拖曳，并且可以導(dǎo)出不同的格式；支持使用互聯(lián)網(wǎng)搜索圖形等功能。圖2-1是Pencil的界面，其下載地址為：http://pencil.evolus.vn/。圖2-1Pencil界面截圖在Pencil的左側(cè)提供了基本的Web元素，右側(cè)則是用于編輯的區(qū)域。如圖2-2是筆者花了不到10分鐘制作出來(lái)的一個(gè)界面。圖2-2GrowthStudio著陸頁(yè)多數(shù)情況下，我會(huì)直接在白紙上繪制，只是不容易修改。要做好設(shè)計(jì)并不是一件容易的事，如《寫給大家看的設(shè)計(jì)書》所說(shuō)，我們只需要做到下面四點(diǎn)原則，便可以做一個(gè)簡(jiǎn)單的設(shè)計(jì)。對(duì)比：突出你想讓用戶看的內(nèi)容。在圖2-2里，我們將圖片輪播放在最大的地方，用戶一進(jìn)入這個(gè)頁(yè)面便可以找到它。重復(fù)：重復(fù)出現(xiàn)視覺要素，保持一致性。這點(diǎn)可以體現(xiàn)在字體、顏色、大小等部分。對(duì)齊：讓元素與元素間有視覺聯(lián)系。如圖2-2中幾個(gè)不同的部分，在左側(cè)和右側(cè)是對(duì)齊的。親密性：讓相關(guān)的項(xiàng)目歸組在一起。如圖2-2中間的三個(gè)小區(qū)域，又或者是下半部分的兩片介紹區(qū)域。除此之外，你可能還需要一些專業(yè)的技能才能做好這方面的設(shè)計(jì)。這里僅做一個(gè)簡(jiǎn)單的介紹，讀者可以自行去學(xué)習(xí)?，F(xiàn)在，我們就可以進(jìn)入第二步：選擇一個(gè)Web框架，然后創(chuàng)建一個(gè)“hello，world”程序。2.2最小可行化Web應(yīng)用假定讀者已經(jīng)有了CSS、HTML以及JS的一些基礎(chǔ)知識(shí)。那么，我們就可以依此圖來(lái)編寫前端代碼。當(dāng)我們是前端新手的時(shí)候，要將上面的原型圖直接轉(zhuǎn)換為DIV+CSS就變成了一種挑戰(zhàn)。①需要將原型圖依據(jù)不同的部分，將其分成不同的大模塊。如，基本的Header和Footer。②在不同的大模塊里又需要將其切分成幾個(gè)不同的小模塊。如，主內(nèi)容中的圖片輪播和項(xiàng)目介紹就是不同的小模塊。③實(shí)現(xiàn)細(xì)分的模塊。在不同的模塊里，我們需要注意分層的概念，即在最底下的內(nèi)容應(yīng)該是在DIV的最外層，頂層的內(nèi)容應(yīng)該是在DIV的嵌套層。如，我們應(yīng)該先給頁(yè)面的body標(biāo)簽設(shè)置一個(gè)白色的背景，再給導(dǎo)航及圖片輪播設(shè)置一個(gè)灰色的背景，最后給Header設(shè)置一個(gè)黑色的背景。這里的body相當(dāng)于在DIV的最外層，而Header則是在DIV的嵌套里。盡管這種分層并不會(huì)體現(xiàn)在頁(yè)面里——用戶看到的只是效果，但是分層及模塊化的好壞影響著代碼的可維護(hù)性。在采用虛擬DOM技術(shù)的框架，如React里，對(duì)于模塊化的需求就更高。我們需要盡可能地按照需求對(duì)模塊進(jìn)行分解。2.2.1使用Bootstrap模板開始之前，我們先簡(jiǎn)單了解一下Bootstrap。如果寫過(guò)一些前端代碼，你就應(yīng)該聽說(shuō)過(guò)這個(gè)框架。當(dāng)一個(gè)后臺(tái)開發(fā)希望一個(gè)前端開發(fā)人員推薦一個(gè)好用的前端框架時(shí)，那么一定有超過(guò)80％的人說(shuō)Bootstrap——來(lái)自于Twitter，在開源社區(qū)GitHub上擁有Star數(shù)最多的開源前端框架。Bootstrap包含了豐富的Web組件，如下拉菜單導(dǎo)航條、路徑導(dǎo)航、分頁(yè)、排版、警告對(duì)話框、進(jìn)度條等。它從2.0版本開始支持響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)，即頁(yè)面布局可以依據(jù)顯示網(wǎng)頁(yè)的設(shè)備或者屏幕大小來(lái)進(jìn)行動(dòng)態(tài)調(diào)整，并從3.0版本開始，將移動(dòng)設(shè)備優(yōu)先作為設(shè)計(jì)方針。由于其在響應(yīng)式設(shè)計(jì)方面相當(dāng)出色，并且在市場(chǎng)上相當(dāng)流行，我們就將其作為第一個(gè)Web框架來(lái)使用。Bootstrap的當(dāng)前版本是v3.3.7，讀者可以從/下載到這個(gè)框架。建議讀者選擇帶有源碼及示例的SourceCode下載，即圖2-3中間部分的DownloadSource。圖2-3Bootstrap下載頁(yè)解壓下載的文件后，可以打開docs/examples/carousel/index.html，這個(gè)文件就是我們想要的模板文件，其效果如圖2-4所示。圖2-4BootstrapCarousel模板截圖剩下要做的事情就是從Bootstrap的模板里分離出獨(dú)立可運(yùn)行的應(yīng)用。1．初始化項(xiàng)目現(xiàn)在，讓我們?yōu)檫@個(gè)項(xiàng)目創(chuàng)建第一個(gè)commit。先創(chuàng)建一個(gè)目錄，如homepage，隨后在該目錄下執(zhí)行g(shù)it的初始化命令：

$gitinit

將初始化這個(gè)項(xiàng)目：

＞InitializedemptyGitrepositoryin/Users/fdhuang/write/homepage/.git/

接著，就是創(chuàng)建一個(gè)README.md文件，然后添加該文件并提交，命令如下：

touchREADME.md

gitaddREADME.md

gitcommit-m"initcommit"

現(xiàn)在我們就可以初始化提交的代碼了。建議讀者可以將代碼提交到GitHub上，這不僅可以在不同的電腦提交代碼，還方便我們使用GitHubPages來(lái)直接訪問(wèn)我們的網(wǎng)站。下一步，讓我們從Boostrap的示例代碼里復(fù)制需要的文件。2．分離模板注意：也可以直接下載源碼文章，其中的chapter2文件夾便是本章的內(nèi)容。現(xiàn)在，將需要的文件復(fù)制到homepage不同的目錄下——用于區(qū)分不同的文件類型，如js目錄下放置js文件。步驟如下：①?gòu)?fù)制docs/examples/carousel/index.html到homepage/index.html。②復(fù)制dist目錄下所有的目錄夾到homepage/目錄下。③下載jQuery到homepage/js/vendor目錄下。④復(fù)制docs/examples/carousel/carousel.css到homepage/css目錄下。我們還需要修改index.html，刪除其中不需要的代碼。由于當(dāng)前并不考慮在不同瀏覽器下的兼容性，因此，可以刪除代碼中對(duì)于兼容性的處理文件。將head中的如下代碼。

＜!--BootstrapcoreCSS--＞

＜link

href="../../dist/css/bootstrap.min.css"rel="stylesheet"

＞

＜!--IE10viewporthackforSurface/desktopWindows8bug--＞

＜link

href="../../assets/css/ie10-viewport-bug-workaround.css"rel="stylesheet"

＞

＜!--Justfordebuggingpurposes.Don'tactuallycopythese2lines!--＞

＜!--[ifltIE9]＞＜scriptsrc="../../assets/js/ie8-responsive-file-warning.

js"＞＜/script＞＜![endif]--＞

＜script

src="../../assets/js/ie-emulation-modes-warning.js"

＞＜/script＞

＜!--HTML5shimandRespond.jsforIE8supportofHTML5elementsandmedia

queries--＞

＜!--[ifltIE9]＞

＜script

src="/html5shiv/3.7.3/html5shiv.min.js"＞＜/script＞

＜script

src="/respond/1.4.2/respond.min.js"＞＜/script＞

＜![endif]--＞

＜!--Customstylesforthistemplate--＞

＜link

href="carousel.css"rel="stylesheet"

＞

修改為：

＜linkhref="css/bootstrap.min.css"rel="stylesheet"＞

＜linkhref="css/carousel.css"rel="stylesheet"＞

并將index.html文件最后面的代碼：

＜!--BootstrapcoreJavaScript

==================================================--＞

＜!--Placedattheendofthedocumentsothepagesloadfaster--＞

＜script

src="/ajax/libs/jquery/1.12.4/jquery.

min.js"

＞＜/script＞

＜script＞

window.jQuery||document.write('＜scriptsrc="../../assets/js/ve

ndor/jquery.min.js"＞＜\/script＞')＜/script＞

＜scriptsrc="../../dist/js/bootstrap.min.js"＞＜/script＞

＜!--Justtomakeourplaceholderimageswork.Don'tactuallycopythen

extline!--＞

＜scriptsrc="../../assets/js/vendor/holder.min.js"＞＜/script＞

＜!--IE10viewporthackforSurface/desktopWindows8bug--＞

＜scriptsrc="../../assets/js/ie10-viewport-bug-workaround.js"＞＜/script＞

替換為：

＜scriptsrc="js/vendor/jquery-3.1.1.min.js"＞＜/script＞

＜scriptsrc="js/vendor/bootstrap.min.js"＞＜/script＞

＜scriptsrc="js/vendor/holder.min.js"＞＜/script＞

如上所示的官方代碼里，將頁(yè)面分成了三部分，這三部分都可以從其class名看出來(lái)。①導(dǎo)航條放置在navbar-wrapper中。②圖片輪播則放在carousel中。③主要內(nèi)容則是放在container中。在這個(gè)Demo里，footer是放在container中，而不是一個(gè)獨(dú)立的Div。我們已經(jīng)粗略地完成了“hello，world”程序，現(xiàn)在只需要對(duì)其進(jìn)行完善即可。進(jìn)入下一步之前，先對(duì)如下代碼進(jìn)行提交：

gitadd.

gitcommit-m"initproject"

2.2.2完善原型由于這是一個(gè)很匹配我們需求的模板，我們只需要修改代碼中相應(yīng)的內(nèi)容即可。1．修改頁(yè)面標(biāo)題將代碼中title標(biāo)簽的內(nèi)容修改為＜title＞GrowthStudio-EnjoyCreate＆Share＜/title＞。2．修改導(dǎo)航將Projectname修改為GrowthStudio，并修改代碼中不同導(dǎo)航欄的名稱。3．修改輪播圖片及介紹部分只需要添加我們所需要的文本到相應(yīng)的文字塊即可。4．修改Footer部分將如下代碼：

＜footer＞

＜p

class="pull-right"

＞＜a

href="#"

＞

Backtotop

＜/a＞＜/p＞

＜p＞

＆copy;2016Company，Inc.＆middot;

＜a

href="#"

＞

Privacy

＜/a＞

＆middot;

＜a

href="#"

＞

Terms

＜/a＞＜/p＞

＜/footer＞

修改為

＜footer＞

＜p

class="pull-right"

＞＜a

href="#"

＞

回到頂部

＜/a＞＜/p＞

＜p＞

＆copy;GrowthStudio

＜/p＞

＜/footer＞

Done!讓我們?cè)賹⑸厦娴拇a添加到版本控制里：

gitadd.

gitcommit-m"updatecontent"

如果我們有一個(gè)對(duì)應(yīng)的故事卡，就可以這樣來(lái)寫提交信息：[card-xx]updatecontent。如果這是一個(gè)多人合作的項(xiàng)目，就應(yīng)該將我們的名字加上，如：[card-xx]Phodal:updatecontent。由于著陸頁(yè)只有一個(gè)頁(yè)面，并且函數(shù)功能都依賴于框架，所以不需要對(duì)這些代碼進(jìn)行測(cè)試。2.2.3簡(jiǎn)單上線制作完著陸頁(yè)后，接下來(lái)需要上線。如果你想嘗試在服務(wù)器上運(yùn)行你的網(wǎng)站，則需要：找到一個(gè)域名服務(wù)商，并注冊(cè)、購(gòu)買一個(gè)域名。租用一個(gè)云服務(wù)或者虛擬主機(jī)。有一些云服務(wù)提供商（如AmazonAWS云服務(wù)）會(huì)提供一年的免費(fèi)試用。注冊(cè)、購(gòu)買域名是必需的，至于云服務(wù)，我們則更推薦先使用免費(fèi)的。因篇幅原因，這部分內(nèi)容略去不談。因此，我們先介紹如何使用GitHubPages來(lái)發(fā)布我們的網(wǎng)站。1．使用GitHubPages事實(shí)上，如果你熟悉Git和GitHub，只需要在命令行里執(zhí)行如下語(yǔ)句：

gitcheckout-bghs

來(lái)創(chuàng)建一個(gè)ghs分支，然后向GitHub提交這個(gè)分支即可：

gitpushoriginghs

訪問(wèn)在GitHub后臺(tái)的設(shè)置（Settings），就可以在GitHubPages上看到類似于圖2-5所示的內(nèi)容。圖2-5GitHubPages顯示URL這里的URL是根據(jù)下面的規(guī)則生成的：用戶名或者組織名.github.io/項(xiàng)目名，如https://growth-studio.github.io/homepage/。如果讀者有一個(gè)域名，只需要在域名解析服務(wù)器上添加相關(guān)的CNAME\h\h(1)域名解析，將其指向你的用戶名或者組織名.github.io，并在項(xiàng)目文件里添加對(duì)應(yīng)的CNAME文件，在CNAME里添加我們想要指定的域名。圖2-6是筆者擁有的域名growth.ren，只需要添加在主機(jī)記錄studio（即要使用的二級(jí)域名）中。接著，在記錄值里填上growth-studio.github.io即可。圖2-6GrowthStudioCNAME添加最后，在我們的項(xiàng)目里添加一個(gè)名為CNAME的文件，在文件中寫入studio.growth.ren。等幾分鐘后，就可以直接訪問(wèn)studio.growth.ren來(lái)查看我們的網(wǎng)站了。現(xiàn)在，我們只需要訪問(wèn)這個(gè)URL就可以訪問(wèn)網(wǎng)站了，是不是很酷。2．HTTP服務(wù)器當(dāng)我們?cè)L問(wèn)studio.growth.ren域名的時(shí)候，在服務(wù)器端將有一個(gè)對(duì)應(yīng)的HTTP服務(wù)器來(lái)對(duì)請(qǐng)求進(jìn)行處理?，F(xiàn)在，讓我們來(lái)搭建一個(gè)簡(jiǎn)單的HTTP