真正接觸先後端分離模式也就幾個月的時間。本文屬於本身對先後端分離模式的一些總結,主要來源於針對以前的後端作數據渲染與分離模式的一些對比。近期會針對一些常見的開發模式作一些分享,若是對你有幫助,給個關注吧!!!html
先後端分離從端口劃分就是將瀏覽器、客戶端分爲前端,提供真實服務的軟件就成爲後端。從開發語言的角度劃分後端的編程語言和前端的編程語言,例如Java是作後端真實數據服務的,JavaScript、HTML是作前端業務數據的展示與用戶行爲操做的。前端
A.爲何會出現前端和後端分離模式,這得從有先後端分離開發模式以前的開發模式提及。咱們先看下面兩張圖。ajax
第一張圖是非先後端分離。數據庫
1.首先,咱們經過圖片能夠看出,一個項目的開始從產品經理,其次是設計工程師,其次是前端開發工程師......最後纔是運維工程師進行項目部署。這樣一個項目纔算的上真正的開發完成了。編程
2.這樣的開發模式全程是一個串行的模式,從外觀就有點像一條龍服務的模式,後者依賴於前者。用編程中的一個詞語就是,高藕和。3.後端
第二張圖是先後端分離。設計模式
1.首先,咱們經過這張圖片能夠看出,一個項目的開始一樣是從產品經理,接着就是設計工程師負責。跨域
2.最重要的一點,咱們看設計工程師在負責的同時,後端工程師和前端工程師都在一樣的進行開發,這樣三者是處於並行進行。瀏覽器
3.而後設計工程師設計完以後,交付給前端工程師,後端開發工程師完成以後能夠和前端工程師作對接。前端工程師
4.這三者完成以後,接下來就是測試工程師,最後一樣的是運維工程師負責。這樣一個項目纔算的上真正的開發完成了。
5.經過這種模式,咱們不難看出,在產品經理完成以後,再也不是單獨的設計工程師完成以後交給前端工程師,而後在交給後端工程師,而是三者能夠處於並行的一個狀態。
B.上面談完了,咱們接下來分析總結一下非先後端分離模式的缺點。
1.開發效率低。
經過上面的圖一,咱們看的出每個環節都依賴進行,不免延長了開發週期。
2.整個團隊的協做耦合度高。
環節層層依賴。若是某個環境進行了修改,其餘的環境就得收到影響。
3.團隊容易甩鍋。
當項目出現問題以後,團隊成員很容易將一些責任推到其餘的環節上面。
4.難以處理愈來愈複雜的業務。
隨着現目前的業務發展趨勢,業務也愈來愈複雜。例如,一些頁面交互效果,數據處理。傳統的模式很難支持這樣的業務場景。經過先後端分離,前端負責對應的交互業務,後端負責數據的處理。
5.使得代碼的耦合度更高。
這裏能夠從一種軟件設計模式來分析。那就是MVC模式,模型層(M)負責數據庫層面的操做,控制層(C)負責處理邏輯,視圖層(V)負責數據渲染。這是一種很不錯的軟件設計模式。但在不作到嚴格規範的狀況下,仍有不少的程序開發者,在控制層C輸出一些視圖層V的業務代碼,這樣的代碼似的代碼的耦合度更高,同時也難以維護。
綜上B點弊端,咱們不難分析出先後端分離的一些好處了。
1.提升開發效率。
2.下降的軟件設計的耦合度。不論是前端仍是後端,均可以針對不一樣的端,實現一些工程化的東西。
3.提升了處理複雜業務的能力。後端能夠只專一後端業務,前端能夠專一於前端的業務。
1.團隊溝通成本。
每一個環節都須要保證溝通、協商好,不然很容易致使團隊混亂,所以先後端分離模式對團隊協調也是有着較高的要求。
2.不利於搜索引擎抓取。
由於搜索引擎看的是html源碼,不能執行js,也就沒法獲取js動態從ajax抓的內容。
3.項目維護成本。
先後端分離,後端的代碼和前端的代碼都須要單獨部署。在開發中也須要針對開發需求部署不一樣的環境。
4.增長繁雜的配置。
先後端分離,須要設置跨域一系列的其餘操做。同時也會針對先後端的一些監控處理。都無疑增長了工做量。
所謂的先後端並非單純的指前端工程師負責的內容和後端工程師負責的內容之間能夠獨立進行。整體概括以下幾點:
1.產品設計
2.設計
3.前端開發
4.後端開發
5.測試
6.部署
這幾個環節,其實不少均可以並行運行。
1.例如,在產品設計好以後,可以具體肯定哪些功能,先後端工程師能夠協商接口、接口參數等須要對接的內容,設計師能夠同時負責設計。
2.當定義好了項目的一些規範,先後端的開發人員在開發的過程當中,可能會須要一些模擬數據,這時候後端開發人員並未開發出對應的接口,那怎麼辦呢?就能夠事先使用mock模擬一些數據,供前端人員調用,後端人員開發完成以後,前端直接調用真實數據。
3.在先後端開發過程當中,測試人員能夠針對前端人員開發的功能進行前端調試,例如UI還原、用戶交互缺陷等。測試人員也能夠針對後端開發人員的接口進行數據調試。
4.最後運維工程師在前端和後端工程師開發過程當中,能夠針對前端的環境進行一些列的搭建,也能夠針對後端的環境進行一系列的搭建。待項目開發、測試完成就直接部署,而不是等到開發、測試完成以後纔來從0開始部署。
本文可轉載,需註明出處(公號:卡二條的技術圈)