我們都知道全棧工程師能夠快速地開發出一個網站或者APP，那麼他們到底是怎麼做到的呢？我花了一些時間將我在這個實驗性的小專案中所作的一些實踐寫成文章，並給這個系列起了個名字叫做《全棧修煉》，在簡書上與大家進行分享。
如果你問十個全棧工程師，如何快速構建一個Web應用，我相信你會得到10個不同的答案，因為每一名全棧工程師的技術棧都不盡相同。以設計見長的全棧設計師可能會告訴你，做一個很好的設計，然後套用一個部落格系統或基於CMS的內容管理平臺（如Drupal，Jommla，Wordpress）就可以快速建站，而前端全棧工程師可能會建議，用HTML5+JavaScript（AngularJS或React）來寫網站的前端，用Node.js來寫後端服務。我最早是一名Java程式設計師，後來當了架構師，成為了一名全棧工程師。因此，我會更偏向於使用Java來構建穩定且便於擴充套件的後端服務，並用Html5+CSS3+JavaScript，再結合一些流行的前端框架來快速寫出一個Web應用來。當然，這絕對不是唯一或最優秀的技術組合，你需要根據不同的應用場景和你自身的專長來進行合理的選擇。
//在此我向大家推薦一個前端全棧開發交流圈：931661106 突破技術瓶頸，提升思維能力
網站定位與功能設定
網站無論大小都應該有清晰的定位，也就是你希望你的網站做什麼？這一點非常重要，我見過很多網站雖然功能很多，但由於缺少明晰的定位而少人問津。而我要寫的這個小站只有一個核心功能，那就是要幫助我的微信訂閱使用者們（大多是學習計算機或設計的在校大學生和那些工作不久希望提升技能的設計師或程式設計師們）分享那些優秀的開發或設計（學習）資源。
圍繞這個核心功能，我便得到了構成這個網站所需要的三個主體功能：
資源釋出與展示。（核心功能，使用者可以分享他們的資源，也可以看到其他人的分享）
使用者的第三方登入（為了快速開發，我省略了不必要的使用者註冊功能，全部採用第三方社交平臺登入）
使用者反饋功能。（使用者反饋幾乎是我自建的每個網站中都包含的功能，這使我能通過不斷收集使用者的反饋來改進這個平臺。）
至此，已經完成了網站的功能設定，我儘可能省略了一切不必要網站功能，也沒有寫任何文件，這使我能夠以最快的速度將這個Web應用實現出來。這種方式也是目前增長黑客們所普遍採用的一種做法：快速搭建出一個具備核心功能的應用原型 —— MVP(Most Viable Product 最小化可行產品)，來驗證自己的業務模型，然後再根據使用者的需求和反饋來不斷進行改進。當然，隨著專案規模的不斷擴大，以及更多團隊成員的加入，我們可以回過頭來再去補齊那些在前期遺漏的文件，記住，僅當確認文件能夠產生價值時，才去編寫它們。
資訊架構
這個階段在不同的團隊或專案中會有很多不同的名字，比如概要設計、業務建模等等，而我最喜歡資訊架構這個名字，因為在這個階段，我們所要做的就是對不同緯度和粒度的資訊進行抽象、規劃、設計，來支撐整個網站的資訊體系。我曾經歷過很多不同的資訊架構方法論，從最初基於模組的設計，到後來的領域驅動設計（DDD）、面向服務的設計(SOA)，Oracle的基於資料建模驅動的設計，再到最新的微服務架構設計 等等。我想說，這些方法論大多是針對那些大規模應用而言的，你需要了解它們，並有意識地在你的系統設計中去匹配這些優秀的架構和設計思想，這有利於你做出可擴充套件性良好的系統，從而避免因整個系統複雜度與規模的擴大而導致的大規模重構風險。
對於我們這個小站來說，我們只需要先定義出合適的業務領域和實體模型，這裡，我們定義出以下三個業務實體，併為這些實體新增所需要的欄位。
User-使用者
Resource-資源
Feedback-使用者反饋。
圍繞著這三個領域模型，我們再定義出三個服務，併為它們增加相應的方法：
UserService-使用者服務
ResourceService-資源服務
FeedbackService-使用者反饋服務。
資訊架構階段完成後，我們已經對整個網站有了一個全面的檢視，下一步，我們就可以進入UI設計階段了。
UI設計
我經常在CSDN、V2EX等一些開發社群看到一些程式設計師分享的由他們獨立開發的網站或工具。當我訪問這些網站時卻往往發現，這些網站大多隻是簡單套用了一個模板或乾脆根本沒有任何設計。這樣的網站雖然功能不錯，但很難吸引使用者前來使用。但當我需要獨立完成一個網站時，我仍然會盡我所能地做一些設計，而為了能夠快速實現一個網站，我的做法往往是藉助現代網站設計工具（比如Blocs）或利用現成的網頁模板去實現它。而在這個專案中，我也用到了一套相對簡潔的H5+CSS3網頁模板。
使用模板有很多優點，比如你可以直接獲得優秀的設計，利用網頁模板自帶的HTML、CSS、JavaScript程式碼，可以節省大量開發時間等等。但使用模板同樣會帶來一些問題，比如網頁模板可能會包含大量你不需要使用的頁面或程式碼，你需要小心地剔除它們，一些設計師寫的指令碼很可能存在缺陷，你需要去修復它。同時我想說，你必須首先理解設計才能正確地使用模板，因為模板往往不能解決你所有的設計需求，你總會需要在你的設計中新增一些額外的頁面，這時你就必須基於現有的設計，去進行新增或改造，這往往比從頭開始進行一個完整的設計還要難，因為你必須保持和網頁模板的設計者相一致的設計思路，否則你的網站將變得非常不和諧，而在整個過程中，你必須理解設計的各個方面：色彩、字型、動效 等等。
下面是我在做技匠社網站時，用Sketch所做的一個資源詳情頁面的設計。
為了得到更好的使用者體驗，我也會在最終的顯示效果中，利用CSS3的@Keyframe加上諸如開啟報紙般的簡單動效，讓應用顯得更加生動。
應用架構
接下去，我要做的便是為網站選擇合適的應用架構。我曾為那些銀行或保險公司寫過底層核心框架，來支援它們複雜或對併發要求極高的業務場景。但對於一個剛剛起步的網站，你完全不需要去做如此複雜的架構設計，儘可能去使用那些標準和開源的框架和技術就能夠保證你做出一個具有良好擴充套件性的網站。請記住：沒有最好的架構，只有最合適的架構。
為了便於系統日後的擴充套件，我採用了前後端分離的架構設計：
前端：
目前最流行的兩個前端框架是AngularJS和React，在這個專案中我選擇的是AngularJS，主要出於以下兩個方面的原因：
我需要的是一個更完整的JavaScript框架，AngularJS能滿足我全面性方面的要求，我可以使用它的Controller，Service，Directive等特性來構建出一個完整的Web應用。
我會在將來用Ionic來寫出一個App應用，由於Ionic也是基於AngularJS的，這意味著，我將可以複用很多前端程式碼。
後端：
我選擇的是基於SpringBoot的框架，SpringBoot並不是Spring的一個升級版本，而是一個為構建微服務提供更好支援的全新框架。SpringBoot能夠為我提供一個具有良好擴充套件性的框架，在初期我可以將所有的功能作為一個整體對外服務，隨著使用者數量的上升，和系統規模的不斷擴大，我將可以藉助SpringBoot，並基於Domain Driven Design的設計思想將系統的服務進行拆分，構建出一系列微服務。
目前，在後端我主要使用到了下面這些技術或框架組合：
SpringBoot: 開發基於REST的服務，使用JSON作為資料交換格式。
MyBatis：提供基於SQL的持久層支援。
Redis：由於採用了前後端分離的做法，我用Redis來持久化使用者Session資訊。
Spring Security: 提供安全方面的支援，能與SpringBoot無縫整合。
MySQL：資料庫，在這個專案中我仍然使用了傳統的關係型資料庫。
Maven：專案的包依賴管理，以及專案打包。
開發
開發相對來說倒是一件按部就班的事情，首先基於SpringBoot以及其他第三方庫所提供的API來開發出基於REST的服務。然後在前端利用AngularJS將應用分為幾個模組UserManager,ResourceManger，FeedbackManager分別開發，通過$http來呼叫後端服務來進行業務處理和資料互動。
//在此我向大家推薦一個前端全棧開發交流圈：931661106 突破技術瓶頸，提升思維能力
整個開發過程中，你仍需要去解決一些問題：
前後端分離之後，如何進行Session的管理
如何實現安全的跨域請求
在Spring Boot中如何整合MyBatis框架
如何利用Spring Security來構建安全的REST服務
利用雲服務實現圖片的上傳與處理
以上這些具體的開發技巧，我都會在《全棧修煉》的後續文章中與大家分享。
部署
選擇雲伺服器
雖然我們採用了前後端分離的架構，但在上線初期，我們可以將系統的前端、後端和資料庫都部署在一臺雲伺服器上。我們需要選擇一個雲服務提供商，將應用部署上去了。如果你是一個學生，我建議你選擇亞馬遜雲，因為它能提供首年免費使用的服務。我由於有多臺伺服器使用了阿里雲，所以為了管理的方便，我還是選擇了阿里雲伺服器來部署我的應用，作業系統方面，我選擇的是Ubuntu Linux，其他硬體方面除了頻寬，我選擇了3M之外，其他我都使用的是最低的配置，因為根據上線初期的用量評估，這樣的配置已經足夠使用了，當使用者和規模增加時，可以通過升級配置的方式來獲得更多硬體資源，這一點還是非常方便和經濟的。
應用部署
後端： 由於採用了SpringBoot，後端的服務可以用Maven Plugin直接打包成一個可執行的jar包，它整合了jetty伺服器可以直接向外提供REST服務。當然，如果你不喜歡jetty，也可以通過在pom.xml中簡單地修改配置來整合tomcat作為你的應用伺服器。最後在你的伺服器啟動指令碼中，簡單地使用 java -jar命令，就可以啟動你的後端服務了。
前端： 前端是一個靜態網站，包含HTML、CSS、以及圖片檔案。我將它部署在了一臺Apache伺服器上，當然你也可以選擇Nginx這樣的高效能伺服器。
安全
你需要定義出網站的安全策略，比如使用者組，使用者許可權的分配，出於安全的考慮，儘可能將不需要開放的埠用防火牆隔離，只保留80等幾個對外提供服務的埠等等。另外，如果你的網站互動中包含一些敏感的資訊，那麼你還應該使用TLS對資料的傳輸進行加密處理。
//在此我向大家推薦一個前端全棧開發交流圈：931661106 突破技術瓶頸，提升思維能力
效能調優
正式上線之前，你還應該對網站做一些效能調優，以保證網站能夠有比較好的響應速度。使用YSlow等工具是一個不錯的選擇，它能告訴你網站載入緩慢的原因，並給出優化的建議。
下面是一些常見的優化方法：
合併壓縮靜態檔案： 將JavaScript，CSS檔案進行壓縮（去掉不必要的空格、換行和註釋）與合併（將多個CSS或JavaScript檔案合併成一個檔案），並且使用GZIP進行壓縮，可以提高網站的載入速度。
使用前端映象庫： 對於網站中用到的第三方字型和前端程式碼庫，我通過360和百度的前端映象站點來獲取，這樣可以降低網站本身流量的開銷，也可以提高網站的整體載入速度。
利用雲端儲存和CDN進行加速： 技匠社的資源分享有圖片上傳功能，而圖片是最佔頻寬的，3M的頻寬根本支援不了幾個使用者的同時訪問。因此，我選擇使用了七牛雲，我將使用者上傳的圖片通過七牛雲的API傳到七雲端儲存空間內，並直接利用它的CDN對這些靜態資源進行加速，這樣一來網站的圖片以及那些靜態檔案（我們將那些不會頻繁修改的JavaScript、CSS等都放到了CDN上）就不會佔用阿里雲的頻寬了。另外，不得不說七牛雲的價格對於個人使用者或初創企業來說還是比較優惠的，比如10G空間以內的儲存都是免費的。
//在此我向大家推薦一個前端全棧開發交流圈：582735936 突破技術瓶頸，提升思維能力
下圖為網站的CDN流量統計：
網站資料統計
網站上線後，你仍然需要對網站的訪問量，使用者情況進行持續的統計和分析，大家可能發現在網站的功能裡我們並沒有加入相應的使用者訪問跟蹤模組，是的，我們可以藉助第三方的統計平臺來幫我們做這件事。由於國內無法使用Google Analytics，因此我選擇了百度統計，你只需要在百度統計中註冊一個賬號並加入你的站點，然後在你的網站頭部加入一小段JavaScript程式碼就能實現最基礎的網站統計功能了。當你需要更多使用者個性化分析時，可以在應用的內部去增加相應的模組，進行資料的抓取和分析。
Eclipse
Eclipse是我一直在使用的後端JAVA開發IDE，我也使用它來開發基於SpringBoot的後端服務應用。其實比起商用過的Intellij它仍然遜色不少，推薦它是因為一方面我一直在使用它，另一方面它是免費的。
Sublime Text 3
我使用Sublime Text來開發前端基於AngularJS的靜態網站。它是我開發前端程式碼時最喜歡使用的IDE。我非常喜歡它的那些使程式碼異常清晰的主題，以及功能豐富的外掛。有了它開發HTML、CSS、JavaScript變成了一件非常愉悅的事情。
Code Kit
CodeKit 可自動編譯自動編譯Less, Sass, Stylus, CoffeeScript, Jade & Haml等檔案。為 JavaScript 提供合併、壓縮以及錯誤檢查。還可以優化 jpeg 和 png 圖片，併為我提供一個本地的測試環境。當然，你也可以不使用任何工具，直接通過Grunt或Gulp的外掛去實現所有這些功能。
//在此我向大家推薦一個前端全棧開發交流圈：931661106 突破技術瓶頸，提升思維能力
Sketch 3
Sketch是我目前最常使用的設計工具。它只有幾十M，相較於Photoshop,它小巧得多，更重要的是它是專為UI設計而生的，我不必關注那些與我做UI設計毫無關係的圖片處理功能，從而降低了工作環境中的噪音。另外，通過強大的外掛功能，我能根據需要進行安裝使用，這大大提高了我的工作效率。所以，現在大到做一個完整的UI設計，小到設計一個圖示或修一張圖片我都會首先選擇Sketch這個工具。
能夠快速構建出一個Web應用或APP是全棧工程師的核心競爭力，這也是為什麼那麼多初創公司都在尋找全棧工程師的原因。如果你也希望成為全棧工程師，跟著我一起全棧修煉吧_
作者：技匠