“深入淺出”之老黃談前後端分離

今天詳細瞭解了前端的發展史,同時重點了解了前後端分離的架構原理,個人感覺通過今天的學習研究對前後端分離有了更爲深刻透徹的認識,接下來就與大家分享下老黃眼中的前後端分離。

前端發展歷程

前端發展簡史SPA誕生的前夜

在瞭解前端發展歷史的時候一定要重點說下前端的幾次變革,最開始的網頁就是集成了圖片文字可以通過鏈接相互跳轉的靜態頁面,所有的網頁都是通過後端進行渲染(數據填充)然後返還給瀏覽器進行顯示的(後端路由),這個時候的網站我稱之爲“WebPage”,WebPage最大的問題就是:1. 頁面組件集成化高,且頁面不能複用(頁面佈局稍有不同,就需要一個新的Page)。2. 任何數據更新都需要請求後端,後端更新數據刷新整個頁面,這個時代典型的應用特點就是後端的MVC架構。問題總是與解決問題並存的,隨着時間的流逝,Ajax橫空出世,標誌性事件就是Google推出的Gmail以及谷歌地圖,這算是前端的第一次變革,局部加載帶來流暢度體驗的同時,也使得前端開發漸漸從後端中分離出來,有了Ajax這個把利器,前端頁面完全擁有了自主權,頁面數據從起初的無條件犧牲(前端頁面需要被加工成包含服務端腳本的特殊頁面例如:JSP,PHP,ASP等才能獲取數據),到自主獲取數據而不需要被改的面目全非(深入淺出裏邊講過前端開發人員是看不懂JSP的,那時候的前端開發人員更像是UI設計師也就是不懂技術的“畫家”),並使得動態網頁成爲可能,這是質的飛躍。
在這裏插入圖片描述
Ajax的誕生有如星星之火,緊接着DOM操作的神器基於JavaScript的JQuery誕生了,JQuery是在第二次瀏覽器大戰的背景下誕生的,他主要解決了瀏覽器碎片化以及適配問題,JQuery的誕生使得前後臺數據交互方式變成了:前端通過Ajax向後臺請求數據,然後通過JQuery操作更新DOM樹,至此前端呈現出了欣欣向榮的局面。隨着前端的獨立,網頁複雜性的不斷提高,漸漸出現了前端MVC架構,前端既可以讀寫數據,也可以切換視圖,同時還實現了用戶交互,這樣前端看起來更像是一個應用(WebPage向WebApp(SPA的前身)的轉變),MVC的進一步發展便是
MVVM的誕生,典型的就是前端三大框架(用於開發前端應用的框架)。2009年,Node項目誕生使得JavaScript可以在服務器上運行,JavaScript成爲唯一支持瀏覽器和服務器的語言,同時也意味着前端工程師可以編寫後端的程序了,此刻前端徹底獨立,實現了全棧式開發,在到後來就是大前端的時代(BFF的誕生)以及時下流行的“中途島”模式。

Tomcat在後端渲染以及前端渲染扮演的角色

在SSR的時代,Tomcat是應用服務器的作用,他不光是負責簡單的靜態資源處理,還參與後臺業務邏輯的執行,通信,他是HttpAPI實現的必要條件。同時Tomcat也可以作爲一個簡易版的Web服務器處理靜態資源,當然和Nginx以及Apache比起來會差點。既然Tomcat可以同時扮演兩個角色也就意味着,我們可以將前後端分離的項目集中部署到其中,雖然部署方式是集成後部署,但仍然是前後端分離的架構,這一點需要特別說明。

Node.js與V8引擎

在瞭解前端發展史的時候我們首先必須明白前端開發與後端開發的本質:前端開發指得是面向瀏覽器的開發,代碼最終運行在瀏覽器端。後端開發是面向服務器的開發,代碼最終運行在服務器端。如果你瞭解前端歷史知道著名的瀏覽器大戰就會知道當年Chrome是如何擊敗一衆高手,最後一枝獨秀獨步武林的。Chrome成功的關鍵就是爲JavaScript正名(V8引擎的內嵌),起初的JavaScript只能操作一下Form表單,執行簡單的UI邏輯,Node.js的誕生使得JavaScript可以實現針對服務器進行開發,同時也催生了 node-webkit 等項目,使得JavaScript開發針對GUI的跨平臺桌面應用成爲可能。2010 年 1 月,NPM 作爲 Node.js 的包管理系統首次發佈。開發人員可以按照 CommonJS 的規範編寫 Node.js 模塊,然後將其發佈到 NPM 上面供其他開發人員使用, 前端逐漸呈現出了大一統的趨勢。
在這裏插入圖片描述

分離部署還是分離運行(前後端分離的本質)

前後端分離的本質在於以下幾點:1. 頁面跳轉(路由問題)。2.數據獲取。以前的網站頁面請求方式爲瀏覽器通過URL請求,後端接受請求,利用後端的模板技術以及服務端腳本填充數據,返還視圖模型,視圖解析器解析視圖模型並填充數據形成包含最新數據的頁面返回給瀏覽器,瀏覽器呈現頁面(Java中的Jsp以及JSTL和EL表達式),總結來看頁面的渲染在後端,數據的獲取爲EL表達式。前後端分離之後,後端只負責提供接口(RestFul),前端通過Ajax請求接口數據,JS負責處理數據並控制UI邏輯,代碼運行在瀏覽器中,前後端是獨立的兩個部位。比如你是基於node.js運用前端三大框架進行的開發,那麼在前端項目研發完成之後需要經過node.js的編譯,編譯後的文件才能部署到web服務器,才能在瀏覽器端運行。所以前後端分離的本質與部署方式以及分離運行是無關的,應該看他的數據獲取方式,頁面渲染方式,以及是否前端路由控制頁面跳轉,後端既不參與頁面跳轉,也不參與數據填充,只負責提供數據(類似Android的後端,WebApp就相當於Android的app),處理後端的業務。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章