【筆記】前端開發的演變
引言
在大學裡接觸的就是網站MVC開發模式,期末作業就是圖書管理系統或是訂單系統之類的。當時對於前端的理解就是一個單純展示資料、極其無聊、毫無挑戰性、工資很低的在專案中充當配角的職業。畢業後,正直vue熱火朝天,一發不可收,重新整理了人們對於前端的認知,也引出了風火多年但沒什麼人問津的react、angular等老傢伙,這才入了前端這個坑,越陷越深。前端還是那個前端,他一直充當著專案研發的配角,但是一個好的前端將是專案中威力無比的強大輔助!
下文節選自:前端開發的演變·語雀
靜態頁面階段
網際網路發展的早期,網站的前後端開發是一體的,即前端程式碼是後端程式碼的一部分。
- 後端收到瀏覽器的請求
- 生成靜態頁面
- 傳送到瀏覽器
那時的前端頁面都是靜態的,所有前端程式碼和前端資料都是後端生成的。前端只是純粹的展示功能,指令碼的作用只是增加一些特殊效果,比如那時很流行用指令碼控制頁面上飛來飛去的廣告。
那時的網站開發,採用的是後端 MVC 模式。
- Model(模型層):提供/儲存資料
- Controller(控制層):資料處理,實現業務邏輯
- View(檢視層):展示資料,提供使用者介面
前端只是後端 MVC 的 V。
AJAX 階段
2004年,AJAX 技術誕生,改變了前端開發。Gmail 和 Google 地圖這樣革命性的產品出現,使得開發者發現,前端的作用不僅僅是展示頁面,還可以管理資料並與使用者互動。
AJAX 技術指的是指令碼獨立向伺服器請求資料,拿到資料以後,進行處理並更新網頁。整個過程中,後端只是負責提供資料,其他事情都由前端處理。前端不再是後端的模板,而是實現了從“獲取資料 --》 處理資料 --》展示資料”的完整業務邏輯。
就是從這個階段開始,前端指令碼開始變得複雜,不再僅僅是一些玩具性的功能。
前端 MVC 階段
前端程式碼有了讀寫資料、處理資料、生成檢視等功能,因此迫切需要輔助工具,方便開發者組織程式碼。這導致了前端 MVC 框架的誕生。
2010年,第一個前端 MVC 框架 Backbone.js 誕生。它基本上是把 MVC 模式搬到了前端,但是隻有 M (讀寫資料)和 V(展示資料),沒有 C(處理資料)。因為,Backbone 認為前端 Controller 與後端不同,不需要、也不應該處理業務邏輯,只需要處理 UI 邏輯,響應使用者的一舉一動。所以,資料處理都放在後端,前端只用事件響應處理 UI 邏輯(使用者操作)。
後來,更多的前端 MVC 框架出現。另一些框架提出 MVVM 模式,用 View Model 代替 Controller。MVVM 模式也將前端應用分成三個部分。
- Model:讀寫資料
- View:展示資料
- View-Model:資料處理
View Model 是簡化的 Controller,所有的資料邏輯都放在這個部分。它的唯一作用就是為 View 提供處理好的資料,不含其他邏輯。也就是說,Model 拿到資料以後,View Model 將資料處理成檢視層(View)需要的格式,在檢視層展示出來。
這個模型的特點是 View 繫結 View Model。如果 View Model 的資料變了,View(檢視層)也跟著變了;反之亦然,如果使用者在檢視層修改了資料,也立刻反映在 View Model。整個過程完全不需要手工處理。
SPA 階段
前端可以做到讀寫資料、切換檢視、使用者互動,這意味著,網頁其實是一個應用程式,而不是資訊的純展示。這種單張網頁的應用程式稱為 SPA(single-page application)。
所謂 SPA,就是指在一張網頁(single page)上,通過良好的體驗,模擬出多頁面應用程式(application)。使用者的瀏覽器只需要將網頁載入一次,然後所有操作都可以在這張頁面上完成,帶有迅速的響應和虛擬的頁面切換。
隨著 SPA 的興起,2010年後,前端工程師從開發頁面(切模板),逐漸變成了開發“前端應用”(跑在瀏覽器裡面的應用程式)。
目前,最流行的前端框架 Vue、Angular、React 等等,都屬於 SPA 開發框架。