從新學習web後端開發-005-瞭解先後端分離開發模式

分離是爲了之後更好的相聚。- 匿名

1. 什麼是先後端分離

在做者早期參加工做時，web項目開發基本上是程序員加美工的組合，那個時候尚未明確的先後端的說法。一個web項目就像一道大雜燴，包括了界面和後端業務邏輯，同時前端的頁面由後端進行渲染。

隨着Ajax，尤爲是nodejs的發展，前端的能力大大加強，工程化也愈來愈成熟。不少以前須要後端去作的事情，好比頁面的渲染，前端已經徹底能夠勝任。而且前端也不只僅侷限於pc桌面，而是發展到移動端，tv等。近年來，先後端分離開發逐漸流行開來，尤爲是在互聯網方向，已經成爲了主流的web開發方式。

2. 先後端分離的優勢

2.1 優勢一：分工明確

專業的人作專業的事情。先後端分離後，前端人員能夠專一於UI界面的設計開發，後端人員則能夠專一於業務邏輯開發，提供前端調用的API接口。

2.2 優勢二：解除耦合

將前端UI界面和後端服務數據分離，能夠將後端服務接口獨立出來，服務於不一樣的前端UI，好比傳統PC桌面，移動端H5，APP等，提升了後端服務的可複用性和可維護性，同時也有利於向分佈式微服務架構進行演變。

2.3 優勢三：提高效率

先後端未分離web開發模式以下圖：

咱們能夠看到，程序員要等待美工先導出html模板後，再開始整合模板，渲染頁面。程序員承擔了大部分的工做，包括頁面的二次處理（數據渲染、頁面整合等）以及後端業務邏輯的開發工做。

先後端人員能夠同時進行開發，互不干擾。雙方遵循統一的規範（產品原型及API接口文檔），各自進行獨立的開發，開發完成後進行聯合測試（俗稱聯調）。

3. 先後端分離後產生的主要問題

3.1 溝通成本上升

先後端分離前，程序員承擔了大部分前端頁面渲染和後端業務邏輯的工做，基本上沒有太多的溝通成本。先後端分離後，前端須要承擔頁面設計和數據渲染的工做，數據須要經過調用後端提供的接口服務來獲取。這樣一來，統一的接口文檔就成爲前端和後端的主要契約，隨着需求的調整以及項目的快速迭代，接口也會隨之出現變更，這時雙方之間的溝通成本將大大增長。若是沒有良好的溝通機制和統一的接口文檔管理將會致使雙方扯皮，互相推諉，影響產品週期和團隊建設。

那麼如何解決這個問題呢？簡單來講就是：統一規範！也就是統一溝通機制以及接口文檔管理。主要有如下幾點建議：

• 接口文檔由先後端中的一方進行統一管理。另一方必須根據接口文檔開展相應的工做。

  至因而由前端去管理仍是後端去管理，能夠綜合團隊先後端人員的能力、業務理解程度等方面狀況來決定。

• 對接口文檔的變動操做，必需要先體如今接口文檔中，並通知到相應人員。切記不要過後再去更改文檔！

• 按期會議溝通，可集合團隊具體的溝通機制進行。

• 使用接口文檔管理系統，對接口進行統一的管理。同時不少接口文檔管理系統還會提供接口版本管理、mock server，接口測試等功能。

  推薦使用YAPI接口管理系統，能夠爲開發、產品、測試人員提供更優雅的接口管理服務。具體使用詳見其官網。

3.2 前端模擬後端接口問題

前端須要有一個可以模擬接口及其數據的服務，這樣前端的開發進度就不依賴於後端的開發進度，雙方就能夠根據統一的接口文檔各自開展工做，而統一的mock server就比不可少了。上面推薦的YAPI接口管理系統，就能夠提供相應的mock功能。

這裏須要注意一個問題，那就是mock server很難徹底覆蓋到後端全部的接口業務邏輯。這也是爲何須要聯調的緣由。畢竟mock的環境與真實的環境仍是存在必定的差別。不過只要根據規範來作，能夠大大提升聯調的效率，節省時間。

3.3 測試介入太晚，拉長產品週期

針對這個問題，做者的經驗是隻要接口文檔肯定好，測試就能夠根據接口文檔寫對於的接口測試用例了，同時還能夠和一些接口測試自動化工具結合在一塊兒，而沒必要等到聯調完成後才介入。

總的來講，在互聯網、移動互聯網等大部分web相關方面，能夠優先考慮採用先後端分離的方式進行web項目的開發。固然，沒有任何的技術、框架或者方案是銀彈，可以一招走天下，咱們須要綜合考慮項目、團隊、成本等多方面因素，採用合適的方案。

4. 小結

本節主要介紹了先後端分離的基本概念、優勢、實踐中存在的問題以及對應的解決思路和建議。從下一節開始，咱們將結合實際的案例開始一步一步的實戰探索web後端接口開發的過程及其細節。