# 網頁發展 - 前後端

## web 1.0

* 比較代表的大概是 JSP、ASP 和 PHP
* 這時候的前後端互動
* 發送 URL 的請求
* Server 收到後，根據請求「動態地」產生一個靜態的 HTML，回傳給使用者
* 使用者在瀏覽器上看到網頁內容
* 早期的 JavaWeb 開發很簡單，後端產生 HTML 方式其實就是一行一行的把 HTML 刻出來，後來 PHP 與 ASP 則在 HTML 中加入一些語法，來動態的根據資料產生對應的 HTML，JAVA 也跟進，出現了 JSP。
* JavaScript 也是這時候出現，目的是為了與 HTML 頁面互動。
* 當任務越來越複雜時，需要有架構的系統，因此後端開始出現分工
* 後端 MVC 化

    digraph hierarchy {
        nodesep=1.0
        
        node [color=Black,fontname=Courier,shape=box]
        edge [color=Black]
        
        subgraph cluster_S {
            label = "Server side";
            Model->{View}
            Control->{Model}
            {rank=same; Control, View}
        }
        label = "Client side";
        View->{Browser_View}
        Browser_View->{Control}
        
    }

## web 2.0

* 在前面的時代，當使用者瀏覽網頁時，如果想要更新頁面的內容，就必須重新向 Server 發出 Request，以得到新的頁面，然而實際應用時會發現，許多時候我只是想要更新頁面中的部分內容而已
> 例如在 HackMD 中，總不能打一個字就重整頁面吧！
* 其實最早在 1995 年，JAVA 就已經實現非同步載入，通過執行網頁中的 JAVA APPLETS 與伺服器交換資料，因此不需要每次都重新整理網頁。
* 到了 1998 年 AJAX 誕生，最大的優點在於只要瀏覽器支援 JaveScript 即可，任何後端語言都可以透過 Request-Response 讓前端達到非同步更新。
* 這時候的前後端互動變成

    digraph hierarchy {
        nodesep=1.0
        
        node [color=Black,fontname=Courier,shape=box]
        edge [color=Black]
        
        subgraph cluster_S {
            label = "Server side";
            Web_Server
            {rank=same;}
        }
        label = "Client side";
        Web_Server->{HTML, JS, CSS}
        JS->{Web_Server}
        {HTML, JS, CSS}->Browser_View
        {rank=same;}
        
    }

## 前端 MVC

* 在這之後又出現了 jQuery，加速了前端開發，雖然到目前看起來一切都好像還不錯，然而前端最大的問題在於過於龐大，因此自然而然地出現了前端框架。
* MVC
* Model 數據層：定義各種變數及功能函式，透過閉包來儲存，並對外提供接口。數據層的內容影響了視圖層渲染的結果。
* View 視圖層：當使用者造訪頁面時，根據數據層的內容，進行網頁的初始化，建立整個 HTML 架構樹。
* Control 控制層：連接視圖層與數據層，當視圖層發生的事件時，透過控制層對數據層進行更新。

digraph hierarchy {
    nodesep=1.0

    node [color=Black,fontname=Courier,shape=box]
    edge [color=Black]

    subgraph cluster_C {
        label = "Client side";
        View->{Control}
        Control->{Model}
        Model->{View}
        {rank=same; Control, Model}
    }
    subgraph cluster_S {
        Model->{Web_Server}
        Web_Server->{Model}
        {rank=same; Web_Server}
    }
}

* 過往 jQuery 的操作目標為 DOM，然而前端框架的目標卻是 model，能更有效的維護網頁中的各個部分。

## MVP

* 前面的架構導致數據流的混亂，可以想像今天有多個 View 與 Model，當這些節點之間都有互相構通時，可能產生非常可怕的事情。
* MVP
* 在 MVP 架構中，View 與 Model 之間，一律通過 Presenter 擔任中間人，進行一切的溝通。

    digraph hierarchy {
        nodesep=1.0

        node [color=Black,fontname=Courier,shape=box]
        edge [color=Black]

        View->{Presenter}
        Presenter->{Model}
        Model->{Presenter}
        Presenter->{View}
        {rank=same; View, Presenter, Model}
    }

* 然而當大部分邏輯都必須通過 Presenter 進行管理時，Presenter 反而會變得過於龐大，難以管理。

## MVVM

* 延伸前面的架構，視圖層與數據層之間透過某種機制綁定。
* 與 MVP 最大的不同在於，ViewModel 與 View 之間的狀態是同步的，因此 View 中的數據修改時，不需要跟任何人溝通。
* MVVM
* View 和 Model 是分離的，View 的資料與 ViewModel 同步，因此不需要知道 Model 的存在，同樣 Model 也完全忽略 ViewModel 與 View 的存在。

    digraph hierarchy {
        nodesep=1.0

        node [color=Black,fontname=Courier,shape=box]
        edge [color=Black]

        View->{ViewModel}
        ViewModel->{Model}
        Model->{ViewModel}[style=dashed]
        ViewModel->{View}[style=dashed]
        {rank=same; View, ViewModel, Model}
    }

* 根據不同的前端框架，View 與 Model 的數據綁定可能是單向數據流，也可能是雙向數據流。

## MTV

* 典型的 MTV 框架就是 Django，他是一個後端為主的網頁框架。
> 即使是後端框架，仍然會有前端的部分，也就是後端也會處裡試圖渲染等等的任務，如 SSR。
* MTV 中的 TV 分別為 Template 與 View，可以想成原本 MVC 中的 View 被拆成了兩個部分：
* Template 負責處理 HTML 的內容，其中也包含了需要動態填入的數據，這些數據會通過 View 得到。
* View 則透過 Model 得到數據，並加以運算，最後配合 Template 渲染出視圖，回傳給前端使用者。
* MTV 可以想成將所有的渲染工作都交由後端處裡，前端只會收到單純的 HTML、JS 及 CSS。
> 並非代表 Django 就一定是 SSR 或者就一定包辦所有前後端的工作，完全看開發者如何設計，你也可以後端使用 Django 進行數據處理，而渲染的工作則另外交由其他 MVVM 的前端框架，也就是完全的前後端分離。