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

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

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

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

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

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

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

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

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

信息架構(gòu)

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

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

User-用戶

Resource-資源

Feedback-用戶反饋。

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

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

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

UI設(shè)計(jì)

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

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

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

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

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

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

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

前端：

目前更流行 的兩個(gè)前端框架是AngularJS和React，在這個(gè)項(xiàng)目中我選擇的是AngularJS，主要出于以下兩個(gè)方面的原因：

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

后端：

我選擇的是基于SpringBoot的框架，SpringBoot并不是Spring的一個(gè)升級版本，而是一個(gè)為構(gòu)建微服務(wù)提供更好支持的全新框架。SpringBoot能夠?yàn)槲姨峁┮粋€(gè)具有良好擴(kuò)展性的框架，在初期我可以將所有的功能作為一個(gè)整體對外服務(wù)，隨著用戶數(shù)量的上升，和系統(tǒng)規(guī)模的不斷擴(kuò)大，我將可以借助SpringBoot，并基于Domain Driven Design的設(shè)計(jì)思想將系統(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ù)庫，在這個(gè)項(xiàng)目中我仍然使用了傳統(tǒng)的關(guān)系型數(shù)據(jù)庫。 Maven：項(xiàng)目的包依賴管理，以及項(xiàng)目打包。

開發(fā)

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

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

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

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

部署

選擇云服務(wù)器

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

應(yīng)用部署

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

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

安全

你需要定義出網(wǎng)站的安全策略，比如用戶組，用戶權(quán)限的分配，出于安全的考慮，盡可能將不需要開放的端口用防火墻隔離，只保留80等幾個(gè)對外提供服務(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等工具是一個(gè)不錯(cuò)的選擇，它能告訴你網(wǎng)站加載緩慢的原因，并給出優(yōu)化的建議。

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

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

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

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

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

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

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

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

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

Eclipse

Eclipse是我一直在使用的后端JAVA開發(fā)IDE，我也使用它來開發(fā)基于SpringBoot的后端服務(wù)應(yīng)用。其實(shí)比起商用過的Intellij它仍然遜色不少，推薦它是因?yàn)橐环矫嫖乙恢痹谑褂盟?，另一方面它是免費(fèi)的。

Sublime Text 3

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

Code Kit

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

Sketch 3

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

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

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

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