前端開發的演變

本文介紹前端開發的歷史和趨勢，幫助大家瞭解 React 要解決什麼問題。

靜態頁面階段

網際網路發展的早期，網站的前後端開發是一體的，即前端程式碼是後端程式碼的一部分。

1. 後端收到瀏覽器的請求
2. 生成靜態頁面
3. 傳送到瀏覽器

那時的前端頁面都是靜態的，所有前端程式碼和前端資料都是後端生成的。前端只是純粹的展示功能，指令碼的作用只是增加一些特殊效果，比如那時很流行用指令碼控制頁面上飛來飛去的廣告。

那時的網站開發，採用的是後端 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 開發框架。

React 的定位

我們這個 antd 教程基於 React 框架，所以要介紹一下 React 在前端技術裡面的定位。

React 本身的定位很單純，它是一個網頁元件的解決方案。也就是說，它只解決怎麼把複雜的頁面拆分成一個個元件，然後一個個獨立的元件又怎麼拼裝成可以互相協同的網頁。

元件是中性的，任何一種應用架構都可以採用。因此，React 可以用於 MVC 架構，也可以用於 MVVM 架構，或者別的架構。

社群為 React 應用提出了很多架構解決方案，其中最流行的是 Facebook 公司提出的 Flux 架構，以及基於 Flux 的 Redux 架構。本教程就採用 Redux 架構，只是我們把它封裝了，讓大家可以最簡單地開發出一個 React 應用，因為 Redux 架構涉及的概念較多，需要手寫的程式碼量也比較大，還是較複雜的。通過我們封裝的工具，可以大大簡化開發工作量。