文／技匠（簡書簽約作者）

前不久，為我的微信訂閱用戶編寫了一個分享學(xué)習(xí)編程和設(shè)計資源的小站——技匠社 jijiangshe.com，有朋友問我是如何在短時間內(nèi)寫出這個網(wǎng)站的，我又用到了哪些技術(shù)和框架呢？這其實是一個挺有意思的話題，我們都知道全棧工程師能夠快速地開發(fā)出一個網(wǎng)站或者APP，那么他們到底是怎么做到的呢？我花了一些時間將我在這個實驗性的小項目中所作的一些實踐寫成文章，并給這個系列起了個名字叫做《全棧修煉》，在簡書上與大家進(jìn)行分享。

如果你問十個全棧工程師，如何快速構(gòu)建一個Web應(yīng)用，我相信你會得到10個不同的答案，因為每一名全棧工程師的技術(shù)棧都不盡相同。以設(shè)計見長的全棧設(shè)計師可能會告訴你，做一個很好的設(shè)計，然后套用一個博客系統(tǒng)或基于CMS的內(nèi)容管理平臺（如Drupal，Jommla，Wordpress）就可以快速建站，而前端全棧工程師可能會建議，用HTML5+JavaScript（AngularJS或React）來寫網(wǎng)站的前端，用Node.js來寫后端服務(wù)。我最早是一名Java程序員，后來當(dāng)了架構(gòu)師，又自學(xué)設(shè)計，成為了一名全棧工程師。因此，我會更偏向于使用Java來構(gòu)建穩(wěn)定且便于擴(kuò)展的后端服務(wù)，并用Html5+CSS3+JavaScript，再結(jié)合一些流行的前端框架來快速寫出一個Web應(yīng)用來。當(dāng)然，這絕對不是唯一或最優(yōu)秀的技術(shù)組合，你需要根據(jù)不同的應(yīng)用場景和你自身的專長來進(jìn)行合理的選擇。

作為《全棧修煉》系列的第一篇文章，我將從整體的角度，結(jié)合技匠社這個網(wǎng)站開發(fā)的各個重要環(huán)節(jié)（網(wǎng)站定位、功能設(shè)定、設(shè)計、架構(gòu)、開發(fā)、部署、性能調(diào)優(yōu)、數(shù)據(jù)統(tǒng)計、開發(fā)工具），來談?wù)勎以跇?gòu)建這個真實網(wǎng)站過程中的一些思考與實踐。而在后續(xù)的文章里，我則會結(jié)合這個實際案例，分享具體的技術(shù)實現(xiàn)方法和代碼示例，從而使你也能像全棧工程師那樣獨立開發(fā)出自己的應(yīng)用來。

網(wǎng)站定位與功能設(shè)定

網(wǎng)站無論大小都應(yīng)該有清晰的定位，也就是你希望你的網(wǎng)站做什么？這一點非常重要，我見過很多網(wǎng)站雖然功能很多，但由于缺少明晰的定位而少人問津。而我要寫的這個小站只有一個核心功能，那就是要幫助我的微信訂閱用戶們（大多是學(xué)習(xí)計算機(jī)或設(shè)計的在校大學(xué)生和那些工作不久希望提升技能的設(shè)計師或程序員們）分享那些優(yōu)秀的開發(fā)或設(shè)計（學(xué)習(xí)）資源。

圍繞這個核心功能，我便得到了構(gòu)成這個網(wǎng)站所需要的三個主體功能：

資源發(fā)布與展示。（核心功能，用戶可以分享他們的資源，也可以看到其他人的分享） 用戶的第三方登錄（為了快速開發(fā)，我省略了不必要的用戶注冊功能，全部采用第三方社交平臺登錄） 用戶反饋功能。（用戶反饋幾乎是我自建的每個網(wǎng)站中都包含的功能，這使我能通過不斷收集用戶的反饋來改進(jìn)這個平臺。）

至此，已經(jīng)完成了網(wǎng)站的功能設(shè)定，我盡可能省略了一切不必要網(wǎng)站功能，也沒有寫任何文檔，這使我能夠以最快的速度將這個Web應(yīng)用實現(xiàn)出來。這種方式也是目前增長黑客們所普遍采用的一種做法：快速搭建出一個具備核心功能的應(yīng)用原型 —— MVP(Most Viable Product 最小化可行產(chǎn)品)，來驗證自己的業(yè)務(wù)模型，然后再根據(jù)用戶的需求和反饋來不斷進(jìn)行改進(jìn)。當(dāng)然，隨著項目規(guī)模的不斷擴(kuò)大，以及更多團(tuán)隊成員的加入，我們可以回過頭來再去補(bǔ)齊那些在前期遺漏的文檔，記住，僅當(dāng)確認(rèn)文檔能夠產(chǎn)生價值時，才去編寫它們。

信息架構(gòu)

這個階段在不同的團(tuán)隊或項目中會有很多不同的名字，比如概要設(shè)計、業(yè)務(wù)建模等等，而我最喜歡信息架構(gòu)這個名字，因為在這個階段，我們所要做的就是對不同緯度和粒度的信息進(jìn)行抽象、規(guī)劃、設(shè)計，來支撐整個網(wǎng)站的信息體系。我曾經(jīng)歷過很多不同的信息架構(gòu)方法論，從最初基于模塊的設(shè)計，到后來的領(lǐng)域驅(qū)動設(shè)計（DDD）、面向服務(wù)的設(shè)計(SOA)，Oracle的基于數(shù)據(jù)建模驅(qū)動的設(shè)計，再到最新的微服務(wù)架構(gòu)設(shè)計 等等。我想說，這些方法論大多是針對那些大規(guī)模應(yīng)用而言的，你需要了解它們，并有意識地在你的系統(tǒng)設(shè)計中去匹配這些優(yōu)秀的架構(gòu)和設(shè)計思想，這有利于你做出可擴(kuò)展性良好的系統(tǒng)，從而避免因整個系統(tǒng)復(fù)雜度與規(guī)模的擴(kuò)大而導(dǎo)致的大規(guī)模重構(gòu)風(fēng)險。

對于我們這個小站來說，我們只需要先定義出合適的業(yè)務(wù)領(lǐng)域和實體模型，這里，我們定義出以下三個業(yè)務(wù)實體，并為這些實體添加所需要的字段。

User-用戶

Resource-資源

Feedback-用戶反饋。

圍繞著這三個領(lǐng)域模型，我們再定義出三個服務(wù)，并為它們增加相應(yīng)的方法：

UserService-用戶服務(wù) ResourceService-資源服務(wù) FeedbackService-用戶反饋服務(wù)。

信息架構(gòu)階段完成后，我們已經(jīng)對整個網(wǎng)站有了一個全面的視圖，下一步，我們就可以進(jìn)入UI設(shè)計階段了。

UI設(shè)計

我經(jīng)常在CSDN、V2EX等一些開發(fā)社區(qū)看到一些程序員分享的由他們獨立開發(fā)的網(wǎng)站或工具。當(dāng)我訪問這些網(wǎng)站時卻往往發(fā)現(xiàn)，這些網(wǎng)站大多只是簡單套用了一個模板或干脆根本沒有任何設(shè)計。這樣的網(wǎng)站雖然功能不錯，但很難吸引用戶前來使用。我也不是一名設(shè)計師，只是利用業(yè)余時間自學(xué)了設(shè)計，但當(dāng)我需要獨立完成一個網(wǎng)站時，我仍然會盡我所能地做一些設(shè)計，而為了能夠快速實現(xiàn)一個網(wǎng)站，我的做法往往是借助現(xiàn)代網(wǎng)站設(shè)計工具（比如Blocs）或利用現(xiàn)成的網(wǎng)頁模板去實現(xiàn)它。而在這個項目中，我也用到了一套相對簡潔的H5+CSS3網(wǎng)頁模板。

使用模板有很多優(yōu)點，比如你可以直接獲得優(yōu)秀的設(shè)計，利用網(wǎng)頁模板自帶的HTML、CSS、JavaScript代碼，可以節(jié)省大量開發(fā)時間等等。但使用模板同樣會帶來一些問題，比如網(wǎng)頁模板可能會包含大量你不需要使用的頁面或代碼，你需要小心地剔除它們，一些設(shè)計師寫的腳本很可能存在缺陷，你需要去修復(fù)它。同時我想說，你必須首先理解設(shè)計才能正確地使用模板，因為模板往往不能解決你所有的設(shè)計需求，你總會需要在你的設(shè)計中添加一些額外的頁面，這時你就必須基于現(xiàn)有的設(shè)計，去進(jìn)行添加或改造，這往往比從頭開始進(jìn)行一個完整的設(shè)計還要難，因為你必須保持和網(wǎng)頁模板的設(shè)計者相一致的設(shè)計思路，否則你的網(wǎng)站將變得非常不和諧，而在整個過程中，你必須理解設(shè)計的各個方面：色彩、字體、動效 等等。

下面是我在做技匠社網(wǎng)站時，用Sketch所做的一個資源詳情頁面的設(shè)計。

為了得到更好的用戶體驗，我也會在最終的顯示效果中，利用CSS3的@Keyframe加上諸如打開報紙般的簡單動效，讓應(yīng)用顯得更加生動。

應(yīng)用架構(gòu)

接下去，我要做的便是為網(wǎng)站選擇合適的應(yīng)用架構(gòu)。我曾為那些銀行或保險公司寫過底層核心框架，來支持它們復(fù)雜或?qū)Σl(fā)要求極高的業(yè)務(wù)場景。但對于一個剛剛起步的網(wǎng)站，你完全不需要去做如此復(fù)雜的架構(gòu)設(shè)計，盡可能去使用那些標(biāo)準(zhǔn)和開源的框架和技術(shù)就能夠保證你做出一個具有良好擴(kuò)展性的網(wǎng)站。請記住：沒有最好的架構(gòu)，只有最合適的架構(gòu)。

為了便于系統(tǒng)日后的擴(kuò)展，我采用了前后端分離的架構(gòu)設(shè)計：

前端：

目前最流行的兩個前端框架是AngularJS和React，在這個項目中我選擇的是AngularJS，主要出于以下兩個方面的原因：

我需要的是一個更完整的JavaScript框架，AngularJS能滿足我全面性方面的要求，我可以使用它的Controller，Service，Directive等特性來構(gòu)建出一個完整的Web應(yīng)用。 我會在將來用Ionic來寫出一個App應(yīng)用，由于Ionic也是基于AngularJS的，這意味著，我將可以復(fù)用很多前端代碼。

后端：

我選擇的是基于SpringBoot的框架，SpringBoot并不是Spring的一個升級版本，而是一個為構(gòu)建微服務(wù)提供更好支持的全新框架。SpringBoot能夠為我提供一個具有良好擴(kuò)展性的框架，在初期我可以將所有的功能作為一個整體對外服務(wù)，隨著用戶數(shù)量的上升，和系統(tǒng)規(guī)模的不斷擴(kuò)大，我將可以借助SpringBoot，并基于Domain Driven Design的設(shè)計思想將系統(tǒng)的服務(wù)進(jìn)行拆分，構(gòu)建出一系列微服務(wù)。

目前，在后端我主要使用到了下面這些技術(shù)或框架組合：

SpringBoot: 開發(fā)基于REST的服務(wù)，使用JSON作為數(shù)據(jù)交換格式。 MyBatis：提供基于SQL的持久層支持。 Redis：由于采用了前后端分離的做法，我用Redis來持久化用戶Session信息。 Spring Security: 提供安全方面的支持，能與SpringBoot無縫整合。 MySQL：數(shù)據(jù)庫，在這個項目中我仍然使用了傳統(tǒng)的關(guān)系型數(shù)據(jù)庫。 Maven：項目的包依賴管理，以及項目打包。

開發(fā)

開發(fā)相對來說倒是一件按部就班的事情，首先基于SpringBoot以及其他第三方庫所提供的API來開發(fā)出基于REST的服務(wù)。然后在前端利用AngularJS將應(yīng)用分為幾個模塊UserManager,ResourceManger，F(xiàn)eedbackManager分別開發(fā)，通過$http來調(diào)用后端服務(wù)來進(jìn)行業(yè)務(wù)處理和數(shù)據(jù)交互。

整個開發(fā)過程中，你仍需要去解決一些問題：

前后端分離之后，如何進(jìn)行Session的管理 如何實現(xiàn)安全的跨域請求 在Spring Boot中如何整合MyBatis框架 如何利用Spring Security來構(gòu)建安全的REST服務(wù) 利用云服務(wù)實現(xiàn)圖片的上傳與處理

以上這些具體的開發(fā)技巧，我都會在《全棧修煉》的后續(xù)文章中與大家分享。

部署

選擇云服務(wù)器

雖然我們采用了前后端分離的架構(gòu)，但在上線初期，我們可以將系統(tǒng)的前端、后端和數(shù)據(jù)庫都部署在一臺云服務(wù)器上。我們需要選擇一個云服務(wù)提供商，將應(yīng)用部署上去了。如果你是一個學(xué)生，我建議你選擇亞馬遜云，因為它能提供首年免費使用的服務(wù)。我由于有多臺服務(wù)器使用了阿里云，所以為了管理的方便，我還是選擇了阿里云服務(wù)器來部署我的應(yīng)用，操作系統(tǒng)方面，我選擇的是Ubuntu Linux，其他硬件方面除了帶寬，我選擇了3M之外，其他我都使用的是最低的配置，因為根據(jù)上線初期的用量評估，這樣的配置已經(jīng)足夠使用了，當(dāng)用戶和規(guī)模增加時，可以通過升級配置的方式來獲得更多硬件資源，這一點還是非常方便和經(jīng)濟(jì)的。

應(yīng)用部署

后端： 由于采用了SpringBoot，后端的服務(wù)可以用Maven Plugin直接打包成一個可運(yùn)行的jar包，它集成了jetty服務(wù)器可以直接向外提供REST服務(wù)。當(dāng)然，如果你不喜歡jetty，也可以通過在pom.xml中簡單地修改配置來集成tomcat作為你的應(yīng)用服務(wù)器。最后在你的服務(wù)器啟動腳本中，簡單地使用 java -jar命令，就可以啟動你的后端服務(wù)了。

前端： 前端是一個靜態(tài)網(wǎng)站，包含HTML、CSS、以及圖片文件。我將它部署在了一臺Apache服務(wù)器上，當(dāng)然你也可以選擇Nginx這樣的高性能服務(wù)器。

安全

你需要定義出網(wǎng)站的安全策略，比如用戶組，用戶權(quán)限的分配，出于安全的考慮，盡可能將不需要開放的端口用防火墻隔離，只保留80等幾個對外提供服務(wù)的端口等等。另外，如果你的網(wǎng)站交互中包含一些敏感的信息，那么你還應(yīng)該使用TLS對數(shù)據(jù)的傳輸進(jìn)行加密處理。

性能調(diào)優(yōu)

正式上線之前，你還應(yīng)該對網(wǎng)站做一些性能調(diào)優(yōu)，以保證網(wǎng)站能夠有比較好的響應(yīng)速度。使用YSlow等工具是一個不錯的選擇，它能告訴你網(wǎng)站加載緩慢的原因，并給出優(yōu)化的建議。

下面是一些常見的優(yōu)化方法：

合并壓縮靜態(tài)文件： 將JavaScript，CSS文件進(jìn)行壓縮（去掉不必要的空格、換行和注釋）與合并（將多個CSS或JavaScript文件合并成一個文件），并且使用GZIP進(jìn)行壓縮，可以提高網(wǎng)站的加載速度。

使用前端鏡像庫： 對于網(wǎng)站中用到的第三方字體和前端代碼庫，我通過360和百度的前端鏡像站點來獲取，這樣可以降低網(wǎng)站本身流量的開銷，也可以提高網(wǎng)站的整體加載速度。

利用云存儲和CDN進(jìn)行加速： 技匠社的資源分享有圖片上傳功能，而圖片是最占帶寬的，3M的帶寬根本支持不了幾個用戶的同時訪問。因此，我選擇使用了七牛云，我將用戶上傳的圖片通過七牛云的API傳到七云存儲空間內(nèi)，并直接利用它的CDN對這些靜態(tài)資源進(jìn)行加速，這樣一來網(wǎng)站的圖片以及那些靜態(tài)文件（我們將那些不會頻繁修改的JavaScript、CSS等都放到了CDN上）就不會占用阿里云的帶寬了。另外，不得不說七牛云的價格對于個人用戶或初創(chuàng)企業(yè)來說還是比較優(yōu)惠的，比如10G空間以內(nèi)的存儲都是免費的。

下圖為網(wǎng)站的CDN流量統(tǒng)計：

網(wǎng)站數(shù)據(jù)統(tǒng)計

網(wǎng)站上線后，你仍然需要對網(wǎng)站的訪問量，用戶情況進(jìn)行持續(xù)的統(tǒng)計和分析，大家可能發(fā)現(xiàn)在網(wǎng)站的功能里我們并沒有加入相應(yīng)的用戶訪問跟蹤模塊，是的，我們可以借助第三方的統(tǒng)計平臺來幫我們做這件事。由于國內(nèi)無法使用Google Analytics，因此我選擇了百度統(tǒng)計，你只需要在百度統(tǒng)計中注冊一個賬號并加入你的站點，然后在你的網(wǎng)站頭部加入一小段JavaScript代碼就能實現(xiàn)最基礎(chǔ)的網(wǎng)站統(tǒng)計功能了。當(dāng)你需要更多用戶個性化分析時，可以在應(yīng)用的內(nèi)部去增加相應(yīng)的模塊，進(jìn)行數(shù)據(jù)的抓取和分析。

開發(fā)與設(shè)計工具

最后來分享一下我在整個開發(fā)過程中所使用到的4個主要的開發(fā)和設(shè)計工具，我用到的其他一些工具，也可以在我的《一名全棧設(shè)計師的Mac工具箱（設(shè)計,開發(fā),效率）》中找到。

Eclipse

Eclipse是我一直在使用的后端JAVA開發(fā)IDE，我也使用它來開發(fā)基于SpringBoot的后端服務(wù)應(yīng)用。其實比起商用過的Intellij它仍然遜色不少，推薦它是因為一方面我一直在使用它，另一方面它是免費的。

Sublime Text 3

我使用Sublime Text來開發(fā)前端基于AngularJS的靜態(tài)網(wǎng)站。它是我開發(fā)前端代碼時最喜歡使用的IDE。我非常喜歡它的那些使代碼異常清晰的主題，以及功能豐富的插件。有了它開發(fā)HTML、CSS、JavaScript變成了一件非常愉悅的事情。

Code Kit

CodeKit 可自動編譯自動編譯Less, Sass, Stylus, CoffeeScript, Jade & Haml等文件。為 JavaScript 提供合并、壓縮以及錯誤檢查。還可以優(yōu)化 jpeg 和 png 圖片，并為我提供一個本地的測試環(huán)境。當(dāng)然，你也可以不使用任何工具，直接通過Grunt或Gulp的插件去實現(xiàn)所有這些功能。

Sketch 3

Sketch是我目前最常使用的設(shè)計工具。它只有幾十M，相較于Photoshop,它小巧得多，更重要的是它是專為UI設(shè)計而生的，我不必關(guān)注那些與我做UI設(shè)計毫無關(guān)系的圖片處理功能，從而降低了工作環(huán)境中的噪音。另外，通過強(qiáng)大的插件功能，我能根據(jù)需要進(jìn)行安裝使用，這大大提高了我的工作效率。所以，現(xiàn)在大到做一個完整的UI設(shè)計，小到設(shè)計一個圖標(biāo)或修一張圖片我都會首先選擇Sketch這個工具。

能夠快速構(gòu)建出一個Web應(yīng)用或APP是全棧工程師的核心競爭力，這也是為什么那么多初創(chuàng)公司都在尋找全棧工程師的原因。如果你也希望成為全棧工程師，跟著我一起全棧修煉吧^_^

在我的下一篇文章中，將與你分享《基于Spring Boot構(gòu)建REST服務(wù)》。另外，我們也歡迎你加入技匠社這個開源項目成為Contributor或Core成員，它是一個完全開源的實驗項目，我們希望能在這里匯聚年輕的設(shè)計師與開發(fā)人員，一起實踐優(yōu)秀的設(shè)計和技術(shù)，并通過微創(chuàng)新來做出更多有意思的東西來，期待你的加入！

本文由 技匠 授權(quán) 站長之家 發(fā)表，并經(jīng)站長之家編輯。轉(zhuǎn)載此文請于文首標(biāo)明作者姓名，保持文章完整性，并請附上出處（站長之家）及本頁鏈接。

推薦： 用高性能云服務(wù)器 穩(wěn)定的網(wǎng)站才能更賺錢

本站所有相關(guān)知識僅供大家參考、學(xué)習(xí)之用，本文來源于互聯(lián)網(wǎng)，其版權(quán)均歸原作者及網(wǎng)站所有，如無意侵犯您的權(quán)利，請與小編聯(lián)系，我們將會在第一時間核實， 如情況屬實會在3個工作日內(nèi)刪除；如您有優(yōu)秀作品，也歡迎聯(lián)系小編在我們網(wǎng)站投稿！http://m.nltg.com.cn/聯(lián)系方式： zhengsui888@163.com