全棧應用開發(fā)：精益實踐

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

phodal@ubuntu:~$sudoaptinstallvim

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

正在分析軟件包的依賴關系樹

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

將會同時安裝下列軟件：

vim-runtime

建議安裝：

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

vim-athena-py2

|vim-nox-py2

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

vimvim-runtime

升級了0個軟件包，新安裝了2個軟件包，要卸載0個軟件包，有0個軟件包未被升級。

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

解壓縮后會消耗30.2MB的額外空間。

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

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

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

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

當然也可以直接運行PowerShell，然后輸入：

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

('/install.ps1'))

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

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都需要單獨安裝。（2）快速啟動工具：Launchy同樣，我們也需要在GNU/Linux操作系統(tǒng)上安裝一個快速啟動工具，Launchy就是一個不錯的選擇。它是一個跨平臺的快速啟動工具，只需要按下Alt+空格鍵就可以打開它的主界面，然后就可以和Alfred一樣輸入名字調(diào)出應用程序。6．在MacOS上安裝（1）包管理工具：Homebrew與Windows操作系統(tǒng)相似的是，MacOS上也沒有自帶的包管理工具，因此，需要通過第三方軟件來實現(xiàn)包管理功能。在MacOS下有兩個不錯的包管理工具，一個是MacPorts，另一個是Homebrew，前者因為權限和依賴問題而飽受詬病。其安裝方法也相當簡單，只需要執(zhí)行下面的命令（也可以直接訪問http://brew.sh/來獲?。┘纯桑?/p>

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

Homebrew依賴于XcodeCommandLineTools來編譯和下載軟件。因此，如果沒有安裝該軟件，在安裝過程中會提示安裝該軟件。如果使用該工具來安裝wget，其命令如下：

brewinstallwget

HomebrewCask是Homebrew的擴展，它可以基于Homebrew來安裝帶有圖形界面的應用，而不是通過拖拉來安裝程序。例如，無法通過Homebrew來安裝GoogleChrome瀏覽器，但可以通過HomebrewCask來安裝它。其安裝方式如下：

brewtapcaskroom/cask

隨后，可以通過下面的命令來安裝GoogleChrome瀏覽器：

brewcaskinstallgoogle-chrome

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

$gitconfig--global"用戶名"

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

你可以在GitHub上新建免費的公開倉庫，并按照GitHub的文檔配置SSHKey，然后將代碼倉庫克隆到本地，其實就是將代碼復制到你的機器里，并交由Git來管理：

$gitclonegit@:username/repository.git

或使用HTTPS地址進行克?。?/p>

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

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

$gitadd.

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

$gitadd-p

可以輸入：

$gitstatus

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

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

這里的GROWTH-001就相當于任務號，Phodal則對應于用戶名，后面的提交信息也會寫明這個任務的作用。由于有測試存在，在完成提交之后，就需要運行相應的測試來保證沒有破壞原來的功能。因此，可以PUSH代碼到服務器端：

$gitpush

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

$gitinit

將初始化這個項目：

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

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

touchREADME.md

gitaddREADME.md

gitcommit-m"initcommit"

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

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

gitadd.

gitcommit-m"initproject"

2.2.2完善原型由于這是一個很匹配我們需求的模板，我們只需要修改代碼中相應的內(nèi)容即可。1．修改頁面標題將代碼中title標簽的內(nèi)容修改為＜title＞GrowthStudio-EnjoyCreate＆Share＜/title＞。2．修改導航將Projectname修改為GrowthStudio，并修改代碼中不同導航欄的名稱。3．修改輪播圖片及介紹部分只需要添加我們所需要的文本到相應的文字塊即可。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!讓我們再將上面的代碼添加到版本控制里：

gitadd.

gitcommit-m"updatecontent"

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

gitcheckout-bghs

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

gitpushoriginghs

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