本文系轉載，原作者，普元，敖顯奇
轉載本文需保留此處版權聲明：本文版權屬于EAII企業(yè)架構創(chuàng)新研究院（微信號：eaworld），違者必究。
一、被誤解的前后端分離
在Web應用開發(fā)過程中，業(yè)界對前后端的分界線似乎一直都沒有確定的概念，不過大多數(shù)人以瀏覽器作為前后端的分界線。將瀏覽器中為用戶進行頁面展示的部分稱為前端，而將運行于服務器，為前端提供業(yè)務邏輯和數(shù)據(jù)準備的所有代碼統(tǒng)稱為后端。
雖然前后端分離在數(shù)年前就已經(jīng)開始受到關注，但很多人對它卻是只聞其聲，未見其形，所以對它產(chǎn)生了一些誤解，誤以為前后段分離只是一種Web應用的開發(fā)模式，只要在Web應用的開發(fā)期進行了前后端開發(fā)工作的分工就是前后端分離。
其實并非如此，準確的說，前后端分離并不只是開發(fā)模式，而是Web應用的一種架構模式。在開發(fā)期，前后端工程師可以通過約定好交互接口，實現(xiàn)并行開發(fā)；在運行期，前后端分離模式需要對Web應用進行分離部署，前后端之間使用HTTP請求進行交互。然而作為應用的架構模式，前后端分離并不是通過這樣一句話就能一概而談的，我們可以從交互形式、代碼組織方式、開發(fā)模式三個方面對前后端分離進行認識。
1、交互形式
在前后端分離架構中，后端只需要負責按照約定的數(shù)據(jù)格式向前端提供可調用的API服務即可。前后端之間通過HTTP請求進行交互，前端獲取到數(shù)據(jù)后，進行頁面的裝配和渲染。
2、代碼組織方式
在傳統(tǒng)架構模式中，前后端代碼存放于同一個代碼庫中，甚至是同一工程目錄下。頁面中還夾雜著后端代碼。前后端工程師進行開發(fā)時，都必須把整個項目導入到開發(fā)工具中。
而前后端分離模式在代碼組織形式上有以下兩種：
半分離
前后端共用一個代碼庫，但是代碼分別存放在兩個工程中。后端不關心或很少關心前端元素的輸出情況，前端不能獨立進行開發(fā)和測試，項目中缺乏前后端交互的測試用例。
分離
前后端代碼庫分離，前端代碼中有可以進行Mock測試（通過構造虛擬測試對象以簡化測試環(huán)境的方法）的偽后端，能支持前端的獨立開發(fā)和測試。而后端代碼中除了功能實現(xiàn)外，還有著詳細的測試用例，以保證API的可用性，降低集成風險。
3、開發(fā)模式
傳統(tǒng)的MVC架構開發(fā)，沒有進行前后端分離，前端工程師負責編寫HTML，完成前端頁面設計，然后給后端工程師員套界面，使用模板技術將前端代碼轉換成JSP頁面，同時內嵌java代碼。應用運行期，將全部代碼進行打包，部署到同一服務器上，或者進行簡單的動靜態(tài)分離部署。
此時，應用的開發(fā)流程如下圖所示。
在前后端分離架構中，前端工程師只需要編寫HTML、js、CSS等前端資源，然后通過HTTP請求調用后端提供的服務即可。除了開發(fā)期的分離，在運行期前后端資源也會進行分離部署。
前后端分離之后，開發(fā)流程將如下圖所示。
通過上面的兩幅流程圖，不難發(fā)現(xiàn)，在開發(fā)模式上，前后段分離不僅僅只是工程師的分工開發(fā)，更重要的意義在于實現(xiàn)了前后端的并行開發(fā)，和簡化了開發(fā)流程。
二、為什么要“離”：4個好處
重新認識前后端分離之后，想必大家心里都會有疑問，前后端分離模式與之前的Web應用架構相比可謂是大相徑庭，我們?yōu)槭裁匆M行前后端分離呢？正如莎士比亞在《哈姆雷特》中的經(jīng)典名句一樣，分還是不分，這是個問題。
從目前應用軟件的發(fā)展趨勢來看，一方面，用戶越來越注重軟件的體驗感，隨著互聯(lián)網(wǎng)的蓬勃發(fā)展，應用開始走向多終端化；另一方面，大型應用的架構模式正紛紛向著云化、微服務化發(fā)展。
雖然過去的應用架構暫時還能支撐起當下應用的開發(fā)，但是各種弊端已經(jīng)開始浮出水面，幾年前能帶來開發(fā)便捷優(yōu)勢的前后端代碼混合模式，在當下已經(jīng)成為了拖慢我們前進步伐的泥沼，讓我們屢屢吃痛。我們之所以開始嘗試前后端分離，是為了能在未來獲得更好的發(fā)展，期望通過前后端分離架構，來為我們帶來以下4個方面的提升。
為孵化優(yōu)質產(chǎn)品打造精益團隊
正如康威定律所述，產(chǎn)品是組織溝通結構的縮影，軟件開發(fā)團隊想要孵化出優(yōu)質的產(chǎn)品，必須先打造一個精益的開發(fā)團隊。開發(fā)團隊的組織劃分是如何影響產(chǎn)品的孵化呢，我們通過下面的示例來進行說明。
如果開發(fā)團隊是按照業(yè)務邊界進行劃分的，開發(fā)出來的產(chǎn)品將可能會是微服務的架構。
如果開發(fā)團隊分為前端團隊、后臺服務團隊和DBA團隊，產(chǎn)品將會成長為下面的架構。
應用不斷迭代，功能日趨完善，開發(fā)團隊也隨之壯大。雖然現(xiàn)在有些人比較推崇全棧工程師，一位全棧工程師就能支持前后端的所有開發(fā)。但是試想一下，如果在開發(fā)團隊中前后端開發(fā)分隔不清，職責邊界模糊不明，代碼均由相同的工程師完成，長此以往前后端代碼的耦合程度可想而知。
通過將開發(fā)團隊前后端分離化，讓前后端工程師只需要專注于前端或后端的開發(fā)工作，使得前后端工程師分別自治，培養(yǎng)其獨特的技術特性，然后構建出一個全棧式的精益開發(fā)團隊。這樣的開發(fā)團隊能夠快速應對需求的變更以及市場的復雜多變，打造出架構清晰、前后端并重的優(yōu)質產(chǎn)品。
提升開發(fā)效率
傳統(tǒng)開發(fā)模式中，前后端開發(fā)強依賴。需要前端工程師先完成靜態(tài)頁面的Demo，后端工程師才能將頁面Demo翻譯成VM模板，如果前端頁面出現(xiàn)變動，又會需要前后端工程師再走一次開發(fā)流程，如此一來開發(fā)效率將會變得很低。
前后端分離以后，可以實現(xiàn)前后端代碼的解耦，只要前后端溝通約定好應用所需接口以及接口參數(shù)，便可以開始并行開發(fā)，無需等待對方的開發(fā)工作結束。與此同時，即使需求發(fā)生變更，只要接口與數(shù)據(jù)格式不變，后端開發(fā)人員就不需要修改代碼，只要前端進行變動即可。如此一來整個應用的開發(fā)效率必然會有質的提升。
完美應對復雜多變的前端需求
Web應用的用戶體驗關注度與日俱增，使得應用的前端界面需要有華麗酷炫的外觀，簡單易用的操作，變化多樣的界面設計和個性化的自定義展示。這使得前端開始變重，邏輯復雜程度加大，渲染效果多樣化加劇。
移動終端的大范圍普及，讓應用向著多終端化發(fā)展，這就要求前端頁面需要對不同終端的顯示都能進行配適。
傳統(tǒng)開發(fā)模式中，前后端工程師開發(fā)職責不明確，面對復雜多變的前端需求，開發(fā)團隊勢必會變得捉襟見肘、不堪重負。
如果開發(fā)團隊能完成前后端分離的轉型，打造優(yōu)秀的前后端團隊，開發(fā)獨立化，讓開發(fā)人員做到專注專精，開發(fā)能力必然會有所提升，能夠完美應對各種復雜多變的前端需求。
增強代碼可維護性
前后端分離后，應用的代碼不再是前后端混合，只有在運行期才會有調用依賴關系。應用代碼將會變得整潔清晰，不論是代碼閱讀還是代碼維護都會比以前輕松。
三、我要不要“離”：4種場景
然而任何一項技術都不是銀彈，前后端分離也是如此。雖然前后端分離架構能帶來眾多優(yōu)勢，但終究得建立在開發(fā)團隊適合的基礎之上。我們暫且以前端頁面的渲染效果與邏輯復雜程度把Web應用大致分為輕前端、重前端、前后均衡三種類型，然后加上現(xiàn)在熱門的微服務架構應用，一起探討一下什么樣的Web應用適合進行前后端分離。
輕前端
頁面布局簡單，顏色、字體類型較少
對前端界面的渲染效果沒有高要求，無動畫效果
只有少量、簡單的業(yè)務邏輯
只需要在不同終端上布局能適應
對于這樣對前端渲染要求不高，業(yè)務邏輯簡單的輕前端應用來說，因為涉及到的前端技術并不復雜，所以沒必要追求前后端分離。將前后端代碼放到一起，反而更方便進行開發(fā)，但是在開發(fā)過程中需要做到關注點分離（Separate Concern）。
重前端
頁面布局復雜，使用了多種顏色和字體
需要有較高的頁面渲染效果，有大量動畫
前端頁面中包含有復雜業(yè)務邏輯
需要在不同終端和瀏覽器上保證布局適應和渲染效果
對于重前端應用，建議采用前后端分離架構，如果開發(fā)團隊中前端工程師不足，需要盡早完善前端團隊的建設，確保前后端并重。
前后均衡
頁面布局適中，使用的顏色和字體種類不多
頁面中使用了少許動畫效果
業(yè)務邏輯較為簡單，可下沉到后端實現(xiàn)
只需要在不同終端上布局能適應
對于前后端均衡應用，建議綜合團隊的人員結構和未來發(fā)展方向進行考慮。如果在團隊中前端工程師的占比不高，后續(xù)也沒有繼續(xù)發(fā)展前端的計劃，那么就不建議過于追求前后端分離。如果對未來有更高期望，即使在前端工程師占比不高的情況下，依然建議團隊嘗試前后端分離轉型，開始著手培養(yǎng)合適的前端工程師。如果團隊中已經(jīng)有了相當規(guī)模的前端工程師，建議立即轉向前后端分離，并且盡早做到前后端代碼分離，為前端提供一個可以進行開發(fā)調試的偽后端。
微服務架構應用
微服務架構應用由大量微服務提供者構成，共同為用戶提供服務。在微服務架構中，很多微服務提供者都是基于SpringBoot實現(xiàn)的，通過API Getway（API網(wǎng)關）進行微服務的整合，然后在一個統(tǒng)一的前端門戶上為用戶提供所需服務。
微服務基于SpringBoot開發(fā)，要達到快速交付的目的，并且每個微服務的粒度都比較小，這必然需要微服務的前后端由不同的工程師分別實現(xiàn)，然后相互之間使用Restful進行通訊。如果還是沿用之前的開發(fā)模式，將會增大微服務架構應用的構建難度。而前后段分離模式正是解決這一難題的良藥。
四、分離部署方案淺析
前后端開發(fā)分離之后，應用在部署時也需要進行前后端分離。在進行前后端分離方案選擇的時候，需要結合項目的需求情況和用戶群體來考慮。目前業(yè)內較為常用的前后端分離部署方案有如下幾種。
1、Nginx+Server
將前端資源部署在Nginx上，后端服務部署在常規(guī)的服務器。當瀏覽器發(fā)起訪問請求的時候，如果請求的是頁面資源，Nginx直接把資源返回到前端；如果請求是調用后端服務，則經(jīng)過Nginx轉發(fā)到后端服務器，完成響應后經(jīng)Nginx返回到瀏覽器。
這個方案比較簡單，易于實現(xiàn)，而且能達到前后端解耦的目的。
但是對于頁面量比較大，需要有良好SEO的應用來說，此方案缺點也較為明顯。因為Nginx只是向瀏覽器返回頁面靜態(tài)資源，而國內的搜索引擎爬蟲只會抓取靜態(tài)數(shù)據(jù)，不會解析頁面中的js，這使得應用得不到良好的搜索引擎支持。同時因為Nginx不會進行頁面的組裝渲染，需要把靜態(tài)頁面返回到瀏覽器，然后完成渲染工作，這加重了瀏覽器的渲染負擔。
2、Node+Server
這是淘寶所使用的前后端分離模式，在瀏覽器與后端服務器之間增加一個了Node Server作為中間層，將前端資源部署到Node Server中。Node Server中還包含了一層Model Proxy，負責與服務端進行通信。
瀏覽器發(fā)出的請求都被Node Server接收，然后通過Model Proxy調用后端服務器提供的服務。Node Server得到后端服務器反饋，接著在Node Server中完成頁面的組裝渲染，把最終頁面返回給瀏覽器。
如此一來不僅達到了前后端解耦的目的，還解決了瀏覽器渲染負擔過重的問題，為SEO提供了比較好的支持。
但在這樣的模式中，瀏覽器所有發(fā)出的請求都需要經(jīng)過Node Server進行中轉，然后才能到達后端服務器。在實際的應用中，并不是所有的請求都需要頁面渲染，只要在頁面上直接調用后端服務器提供的服務即可。所以這個模式必然會對請求性能有所消耗
3、Nginx+Node+Server
為了能解決方案2中請求性能損失的問題，我們可以考慮在其基礎之上增加Nginx。瀏覽器發(fā)起的請求經(jīng)過Nginx進行分發(fā)，URL請求統(tǒng)一分發(fā)到Node Server，在Node Server中進行頁面組裝渲染；API請求則直接發(fā)送到后端服務器，完成響應。
目前在已經(jīng)有一個名為Goku的Go語言框架提供了這樣的前后端分離解決方案。
通過對三種前后端分離方案的對比可以看出：
如果是企業(yè)級應用，不需要考慮對SEO的支持，瀏覽器渲染也可以忽略不計，Nginx+Server的模式無疑是最好的選擇，實施成本相對來說比較低；
如果是互聯(lián)網(wǎng)應用，需要有良好的SEO支持，頁面渲染工作量大，那應該選擇Nginx+Node+Server的方案，各個方面都能得到比較好的兼顧。
五、總結
前后端分離并非僅僅只是前后端開發(fā)的分工，而是在開發(fā)期進行代碼存放分離、前后端開發(fā)職責分離，前后端能夠獨立進行開發(fā)測試；在運行期進行應用部署分離，前后端之間通過HTTP請求進行通訊。前后端分離的開發(fā)模式與傳統(tǒng)模式相比，能為我們提升開發(fā)效率、增強代碼可維護性，讓我們有規(guī)劃地打造一個前后端并重的精益開發(fā)團隊，更好地應對越來越復雜多變的Web應用開發(fā)需求。
傳統(tǒng)的前后端混合開發(fā)模式，雖然久經(jīng)考驗，到現(xiàn)在依然還是能支撐起應用的開發(fā)。但是放眼未來，應用的云化、微服務化勢不可擋。同社會分工精細化一樣，前后端開發(fā)的精細化也是必然趨勢。技術在持續(xù)進步，架構在不斷演進，只有緊跟發(fā)展的腳步，不斷調整項目管理方式，軟件開發(fā)模式，才能在互聯(lián)網(wǎng)浪潮中把握機會，乘風破浪。
前后端分離，是為了讓彼此更好。
關于作者
敖顯奇
現(xiàn)任普元信息SOA產(chǎn)品部開發(fā)工程師，普元新一代數(shù)字化企業(yè)云平臺開發(fā)團隊成員，參與云平臺中VCS、Portal Server領域系統(tǒng)開發(fā)。過去兩年中參與了普元 Platform產(chǎn)品 7.3~7.5版本以及快速流程實施框架等功能組件的開發(fā)。
關于EAII
EAII（Enterprise?Architecture?Innovation?Institute）企業(yè)架構創(chuàng)新研究院，致力于軟件架構創(chuàng)新與實踐，加速企業(yè)數(shù)字化轉型。
