先後端分離

發展歷程

---

 

　  隨着業務需求增長 複雜度的增加，網站開發愈來愈大，一個程序猿開發全站變得愈來愈難，所以網站開發逐漸分紅了前端和後端兩個職位。除了職位的分離，還須要代碼分離，否則兩撥人開發 維護同一套代碼就很不方便了。項目越複雜，出現你等我，我等你的狀況就會愈來愈多，這樣就拖慢了總體團隊的節奏。
　　先後端的分離方式分爲部分分離和所有分離兩種，部分分離是隻把腳本和樣式分離出去，而html模板還留在後端經過jsp，velocity或者freemarker來渲染；另外一種就是徹底分離，腳本樣式以及模板全都放在前端來維護。
　　部分分離已經很大程度上解決了先後端開發時的協調問題，開發效率也獲得了很大程度的提高。但也得認可，這種方式也仍是有問題的。當咱們要開發html模板的時候，就須要搭起一整套後端的開發環境，或者是找後端同窗來協助。
　　而徹底分離通常有兩種方案，第一種就是使用velocity這種在nodejs和java下均可以編譯的頁面模板，在開發時放到前端項目裏，但在發佈時，會把模板發佈到後端的模板目錄下，這樣，開發時就作到了徹底分離。這種方式最大的好處就是線上模板的渲染仍是由java來作的，造成的是帶有動態數據的html，比較有利於SEO。但這種方式下，前端的開發環境和發佈系統的複雜度都相對較高，單純的前端改動也仍是要帶着後端一塊兒發佈。
　　第二種徹底分離的方式，就是把純靜態的html模板徹底放在前端，數據所有經過RESTful接口來進行交互。這樣先後端就徹底分開了，脫離了後端的模板，而這種方式的系統複雜度也會比第一種徹底分離的方式低。但這種方案下，全部的頁面數據都是用js渲染的，沒有動態模板，不太利於SEO。這個不足咱們能夠經過作server render或者給蜘蛛作一套定製頁面來解決。

　　先後端分離並不僅是開發模式，而是web應用的一種架構模式。在開發階段，先後端工程師約定好數據交互接口，實現並行開發和測試；在運行階段先後端分離模式須要對web應用進行分離部署，先後端以前使用HTTP或者其餘協議進行交互請求。

　　在開發模式上，先後段分離不只僅只是工程師的分工開發，更重要的意義在於實現了先後端的並行開發，簡化了開發流程。

　　在開發期間先後端共同商定好數據接口的交互形式和數據格式。而後實現先後端的並行開發，其中前端工程師再開發完成以後能夠獨自進行mock測試，然後端也可使用接口測試平臺進行接口自測，而後先後端一塊兒進行功能聯調並校驗格式，最終進行自動化測試。

分離好處

---

 

先後端分離模式和傳統的web應用架構相比有很大的不一樣，到底分仍是不分，這還真是個問題。

從目前應用軟件開發的發展趨勢來看，主要有兩方面須要注意：

1. 愈來愈注重用戶體驗，隨着互聯網的發展，開始多終端化。

2. 大型應用架構模式正在向雲化、微服務化發展。

咱們主要經過先後端分離架構，爲咱們帶來如下四個方面的提高：

 

• 爲優質產品打造精益團隊
• 提高開發效率

          先後端分離之後，能夠實現先後端代碼的解耦，只要先後端溝通約定好應用所需接口以及接口參數，即可以開始並行開發，無需等待對方的開發工做結束。與此同時，即便需求發生變動，只要接口與數據格式不變，後端開發人員就不須要修改代碼，只要前端進行變更便可。如此一來整個應用的開發效率必然會有質的提高。

• 完美應對複雜多變的前端需求

• 加強代碼可維護性

應用代碼將會變得整潔清晰，不管是代碼閱讀仍是代碼維護都會比之前輕鬆

使用場景

---

 

任何一項技術以及架構都不是適用於任何場景，先後端分離一樣也是如此。雖然先後端分離架構能帶來許多的好處，但前提是創建在開發團隊合適的基礎上的。

1. 頁面佈局複雜

2. 須要有較高的頁面渲染效果

3. 前端頁面中包含複雜業務邏輯

4. 頁面須要渲染的數據量較大

像這種重前端的應用，適合採用先後端分離架構。

部署方案

---

 

先後端分離以後，應用在部署時也須要進行先後端分離。在進行先後端分離方案選擇時，須要結合項目的實際狀況和用戶來考慮。

分離以前的架構

　　先後端分離以前，後端架構是Nginx服務和後端的PHP服務以及前端的靜態資源都是部署在同一臺服務器上。當瀏覽器發起訪問請求時，如何請求的是靜態資源，Nginx直接把靜態資源返回給服務器；若是請求的是頁面或後端服務，則經Nginx將請求轉發到後端的PHP服務器，完成響應後經Nginx返回到瀏覽器。

　　這個方案比較簡單，易於實現，並且能到達先後端解耦的目的。並且不少公司目前都是基於這種架構或者必定的變形來實現的web應用。

　　可是對於頁面量比較大，須要有良好SEO的應用來講，此方案缺點也較爲明顯。由於 Nginx只是向瀏覽器返回頁面靜態資源，而國內的搜索引擎爬蟲只會抓取靜態數據， 不會解析頁面中的js，這使得應用得不到良好的搜索引擎支持。同時由於Nginx不會進行頁面的組裝渲染，須要把靜態頁面返回到瀏覽器，而後完成渲染工做，這加劇了瀏覽器的渲染負擔。

　　另外，因爲這種架構使得前端工程師的工做範圍只侷限在了瀏覽器一側，致使在進行一些特殊的性能優化時，前端工程師沒法獨立完成，還須要後端開發人員的配合，這也必定程度上影響了雙方的進度。

分離以後的架構

　　先後端分離以後，咱們在原先的架構只上再單獨增長了一個Node Server做爲中間層，將前端資源部署到Node Server中。Node Server還實現了一層數據代理服務，負責與提供數據的後端服務進行通訊。

　　而且還在這個基礎上增長並使用了前端機（前端機是對全部的請求進行預處理和負載均衡，而後再轉發給後端機。）的Nginx服務，瀏覽器發起的請求通過前端機的Nginx進行分發，URL請求統一分發到Node Server，在Node Server中根據請求類型從後端服務器上經過RPC服務請求頁面的模板數據，而後進行頁面的組裝和渲染；API請求則直接轉發到後端服務器，完成響應。

結語

---

 

　　先後端分離並不是僅僅只是先後端開發的分工，而是在開發期進行代碼存放分離、先後端開發職責分離，先後端可以並行開發（先後端共同商定好數據接口的交互形式和數據格式） 獨立測試（其中前端工程師再開發完成以後能夠獨自進行mock測試，然後端也可使用接口測試平臺進行接口自測）;在運行期進行應用部署分離，先後端之間經過HTTP請求進行通信。

　　先後端分離適合在前端頁面邏輯較複雜，頁面渲染要求較高的重前端應用中使用。

　　先後端分離的開發模式與傳統模式相比，能爲咱們 提高開發效率、加強代碼可維護性，打造一個先後端並重的精益開發 團隊。

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　整理總結自 先後端分離實踐