1. 程式人生 > >前後端分離模式

前後端分離模式

javascript html5 nodejs vuejs 前後端分離

我是做java出身的前端開發工程師經歷過由前端視圖邏輯和後端的業務邏輯混合的開發模式,

在到由ajax跨域請求來進行前後端的分離的模式,最後到由nodejs來進行前後端的分離,

今天就分別站在不同的視角上盡可能的為大家剖析下這幾種模式的優缺點。

前後端邏輯混合開發模式:

這種開發模式在現在來看幾乎沒有什麽優點,但是在很多互聯網公司依然在用,我想這大概是歷史原因造成的吧,
也有可能缺乏技術體系的整體思想,但是也不能完全否定其優點,與第二種開發模式相比較。
優點:

1. 用戶體驗好,在相同的網絡條件和業務復雜度以及硬件環境下,他可以快速進行首屏展示,避免ajax請求所帶來的渲染延時。
2. 有利於seo搜索引擎優化。
3. 方便靜態化,在訪問高峰期可以將某些訪問量大並且業務數據大部分不變的頁面生成靜態頁面進行緩存,有利於快速渲染。

缺點:1. 耦合度太高,在協作開發的時候前端的開發人員要與後端的開發人員互相等待來完成整體的功能,而且後端開發人員
        需要了解前端 的頁面結構來填充邏輯代碼,大大降低開發效率並且一旦出問題無法快速定位問題。
     2. 不易維護,由於對於一個頁面的維護需要牽扯到兩端的開發人員來共同進行維護,在需求變更後容易出現bug。
     3. 對後端開發語言進行了強依賴,一旦這兩種語言參雜在一起,對於後端來講前端是無法復用的。

ajax跨域請求前後端分離模式

這種分離模式可以在一定程度上彌補第一種開發模式的不足。

優點:
  1. 前後端的邏輯不需要混合在一起,兩端的開發人員基本不需要參與對方的代碼,大大提升了整體的開發效率,也方便定位問題。
  2. 與第三種開發模式相比較,前端人員不需要關註中間服務器的代碼編寫,從一定程度上減少了工作量。
  3. 在部署方面前後端可以分別部署,從一定程度上提升了前端的價值。

缺點:
  1. 首屏局部板塊的渲染需要等到ajax請求數據返回後才能進行完全的展示,在網絡比較慢的情況下表現的尤為明顯。
  2. 在性能方面ajax請求的暴漲,會影響渲染性能。
  3. 異步請求的嵌套會讓業務代碼晦澀難懂。
  4. 不利於搜索引擎優化。
  5. 需要對請求的異常情況進行視圖邏輯的處理。

nodejs前後端分離模式

這也是我目前非常推崇的一種分離模式。

優點:
1. node的異步特性,一個頁面是被幾十個HTML片段(每個片段一個文件)拼裝成,之前PHP同步include這幾十個片段,一定是串行 
   的,Node可以異步,讀文件可以並行,一旦這些片段中也包含業務邏輯,異步的優勢就很明顯了,真正做到哪個文件先渲染完就先 
   輸出顯示。前端機的文件系統越復雜,頁面的組成片段越多,這種異步的提速效果就越明顯。
2. 前端發揮空間大大提升,能玩的東西變多,例如websocket,前端可以自己來玩並且在controller層和model層上有更多的發揮 
   空間,比如在node端自己做靜態數據緩存等。
3. 服務器優勢,node本身內置服務器功能,幾行代碼就可以啟動一個服務器,免去了對apache,wamp等服務器的依賴。
4. 服務端和瀏覽器端公用一種語言降低了學習成本,寫一套代碼便可前後端同時運行。
5. 前後端徹底分離,node端只要啟動一個http-proxy進行api請求轉發類似於nginx的代理功能,前端只需要玩轉json就可以,也 
   不存在跨域問題。
6. 服務器分別部署,可以單獨進行優化,也方便node做靜態化。
7. 可以進行首屏的渲染,目前像vuejs,react都可以在服務端渲染頁面然後輸出靜態html代碼,從而彌補了ajax請求的不足。

缺點:
1. 對於一般前端開發來說,覺得nodejs學習門檻比較高,牽扯到服務端就望而卻步,其實沒什麽學的,很好上手。
2. node的單線程機制在部署的時候需要啟動一個監控進程,在node掛了後能自動重啟,例如在linux上配置一個supervisor。
3. 在node端調試相對比較麻煩,沒有像java那樣的遠程調試機制,開發者一般通過console.log進行調試,當然也可以是用debug 
   模式啟動node來進行調試。
4. 對開發人員的編碼能力要求比較高,因為單線程的緣故,所以盡量避免寫出同步執行的代碼,對於cpu密集型的運算盡量不要讓 
   node來做。

更多文章 請訪問我的技術棧 前端架構解決方案

技術分享圖片



前後端分離模式