先後端分離思考

起源

公司隨着開發人員的增多，項目數量的增長，先後端溝通的成本不斷加大。原有的項目先後端未分離，做爲前端還須要對PHP等後端語言有所瞭解，這極大增長了前端開發的學習成本，特別是遇到數據庫的報錯，不明因此，花費大量的時間去解決。所以，根據咱們目前的業務須要，咱們從一些新的項目中開始嘗試進行先後端的分離。

目標

1）代碼分離。先後端代碼使用獨立的項目目錄進行分離，前端開發環境不須要配置PHP或者Java環境，所有改用Git管理項目代碼。

2）開發流程改進。開發流程將會分爲local【本地開發】，dev【先後端聯調】，beta【QA測試】和prod【線上發佈】。 

工具

Nodejs

Webpack

Command pad

HostProfiles

Git

Sftp

方法論

1）肯定需求，設計接口。

在整個開發流程中，當肯定了需求和設計以後，前端和後端要先對接口進行設計，肯定對應接口的參數和返回數據的JSON結構，而後獨立進行開發。

 

2）本地開發

本地開發環境的構建能夠藉助Grunt，Gulp，以及Webpack等來搭建，咱們一般是採用Webpack來實現，由於Webpack可以支持模塊化，對React、VUE等開發支持度比較好，社區熱度也比較高，遇到問題能夠比較快的解決。使用Webpack和Webpack-dev-server能夠快速的搭建一個本地服務，支持代碼的熱加載刷新。固然簡單的服務你能夠經過express來搭建。

這個時候咱們一般使用Command Pad來管理命令行，好比經常使用的npm start，或者npm run dist 等等，方便快捷。

圖片資源是統一目錄進行管理，提早進行部署到七牛上面去。

本地開發將使用mock數據的方法，來進行接口的模擬，進行頁面邏輯的開發。在一部分存在jquery的項目中咱們使用了 jquery.mockjax.js 做爲mock工具。一般會建立一個api目錄，集中管理全部的接口數據，經過一個index.js來統一加載和屏蔽。

 

3）先後端聯調

先後端分離以後，先後端數據的聯調就會很是的簡單高效，只須要各自將代碼部署到DEV服務器上，而後使用chrome提供的開發工具進行調試便可。調試過程當中若是遇到問題，能夠隨時進行修改和提交。前端將不依賴後端的開發環境，即使DEV環境出現問題，後端也能夠及時的進行處理，分工明確。特別是引入了Docker以後，咱們能夠方便的建立多個DEV開發環境，這樣即使出現多人同事開發一個項目，也不會互相影響DEV的聯調。

在發佈代碼的時候，引入了Sublime Text的插件sftp，來直接將本地編譯好的代碼推送到DEV服務器上，全程速度飛起。

 

4）QA測試

進入QA的測試階段，幾乎和聯調階段相似，只不過是提供了一個相似於線上的環境，單獨提供給測試使用的。

 

5）線上發佈

發佈以前須要進行代碼的壓縮的打包，也是藉助Webpack完成的。值的提到的是當線上出現bug的時候，咱們須要將線上的代碼映射到本地進行調試，用到了HostProfiles 和 nginx。藉助git的分支功能，建立hotfix分支進行處理。

 

這是一個簡單的先後端分離的方案，只是針對公司現有的項目狀況提出的解決方案，固然還有不少地方能夠改進。好比淘寶提出的中途島計劃，增長nodejs的中間層進行模板渲染和業務處理。