分離是為了以後更好的相聚。- 匿名
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後端介面開發的過程及其細節。