前端架構之路（1） - 先後端分離、web與static服務器分離

先後端分離、web與static服務器分離

1. 爲何須要 「先後端分離、web與static服務器分離」

web前端的發展歷史大體能夠分爲兩個階段：node 以前與 node 以後。在 nodejs 出現以前，前端的發展一直比較緩慢，主要是由於：

• html/css/js 從設計之初開始，都只爲瀏覽器服務，而且在整個web程序中，是之後端爲主，前端爲輔，前端須要配合不一樣的後端作出調整（如不一樣後端語言的模板），所以前端程序每每是與後端程序耦合在一塊兒的；
• 開發、調試、運行都始終擺脫不了瀏覽器，而且沒有多少可選的工具（如 combo，都是由後端語言在服務器端實現的），不能自動化、工程化的構建前端的代碼；
• 因爲瀏覽器的運行方式，前端代碼一直不能有效的作到模塊化、組件化，項目也沒法版本化管理，項目間也不能很好的共享代碼；
• 瀏覽器運行速度低下，也是早期前端發展的一大障礙，但 chromium 項目的出現，讓前端的運行架上了高鐵的速度。

基於以上的緣由，前端一直不能很好的開發大型應用，因此在web程序中，前端一直處於配角的角色。在 nodejs 出現以後，前端的發展迎來了質的飛躍，帶來了咱們當時沒法想象的便利與潛力。

• node 拓展了 javascript 的運行環境，而且可以開發服務器端程序，這讓前端的開發和運行擺脫對瀏覽器和後端語言的依賴，讓它們成爲了可選項；
• node 使 javascript 擁有了操做本地文件、IO等權限，因而前端開發人員即可編寫各種工具，前端即可作到自動化和工程化；
• 再結合 npm，前端代碼的模塊化、組件化，項目版本化，項目間共享代碼也就不是問題了。

nodejs 出現了以後，又陸續出現了擴展前端運行領域的工具，如

• electron, nw.js: 讓前端能夠開發桌面軟件；
• react-native: 讓前端能夠開發原生app。

隨着 node 的出現與前端的發展，工程化自動構建便成了開發人員的一個基本需求，這即是我要說的 「先後端分離、web與static服務器分離」；

2. 先後端分離

先後端分離，就是讓前端與後端解耦，開發和運行都再也不耦合在一塊兒。這樣，前端開發人員即可更好的掌控本身的代碼，對本身的代碼進行調試，優化等等。

2.1 工程分離

首先是工程的分離，也就是代碼的分離。這就是說讓原來先後端融合在一塊兒的項目分離開，前端一個項目，後端一個項目。

以 python 的 django 框架爲例：

融合在一塊兒的示例：

|-- app/                     # 應用主目錄
    |-- templates/           # html 模板目錄
        |-- app/
            |-- home.html    # 主頁html
            |-- login.html   # 登錄頁html
            |-- about.html   # 關於頁html
            |-- ...
    |-- static/              # 靜態資源目錄
        |-- js/              # js資源目錄
            |-- lib/         # js library 資源目錄
            |-- page1/       # 頁面1 js資源目錄
            |-- page2/       # 頁面2 js資源目錄
            |-- ...
        |-- css/             # css資源目錄
        |-- images/           # 圖片資源目錄
        |-- ...



    |-- admin.py             # 配置模型models在django原生後臺的管理
    |-- apps.py              # 應用級別的配置
    |-- forms.py             # 表單處理邏輯
    |-- managers.py          # 模型處理邏輯
    |-- models.py            # 模型定義
    |-- urls.py              # 路由設置
    |-- views.py             # 控制層
    |-- tests.py

分離以後的 django 項目示例：

|-- app/                     # 應用主目錄
    |-- admin.py             # 配置模型models在django原生後臺的管理
    |-- apps.py              # 應用級別的配置
    |-- forms.py             # 表單處理邏輯
    |-- managers.py          # 模型處理邏輯
    |-- models.py            # 模型定義
    |-- urls.py              # 路由設置
    |-- views.py             # 控制層
    |-- tests.py

分離以後的 web 項目示例（以 lila 構建工具爲例）：

|-- src/
    |-- app/
        |-- home/            # 主頁工做目錄
            |-- index.html   # html 入口文件
            |-- index.js     # js 入口文件
            |-- ...
        |-- login/           # 登錄頁工做目錄
        |-- about/           # 關於頁工做目錄
        |-- ...

本地開發完成後，把構建好的文件傳到服務器相應的位置就行了，像上面的例子就須要把 html 文件傳到 app/templates 目錄下，靜態資源文件傳到 app/static 目錄下。（構建的時候要處理好文件路徑引用）

2.2 數據流分離

• 先後端數據交流使用 json 數據格式，而且推薦使用全 ajax 的方式獲取數據，不用傳統的模板交流或渲染數據，如 java > jsp、php > smarty；
• 但有時候爲了加快前端響應速度，也能夠把 json 數據經過模板返回，但要避免使用後端模板進行邏輯判斷渲染。

<script>
var data = JSON.parse('經過後端模板返回的 json 數據');

// 使用 js 渲染 data 數據
</script>

3. web與static服務器分離

• web 服務器：存放運行後端 web 應用的程序，以及前端 html 文件（入口文件）
• static 服務器：靜態資源服務器，存放前端除 html 文件以外的其餘資源文件，包括 js， css， images...

通常地，仍是以 django 框架爲例，當前端把代碼構建好以後，靜態資源傳到服務器相應的 static 目錄，html 文件傳到相應的 templates 目錄，啓動後端腳本就可運行了。二者不分離主要有如下幾個缺點：

• 前端構建過程當中會產生大量的冗餘文件，這對後端程序來講十分不友好，好比後端打包程序備份的時候，就會致使包很大；
• 不方便前端開發人員管理線上代碼，而且前端人員可以直接接觸到後端代碼，也不夠安全；
• 靜態資源會佔用 web 服務器的資源和帶寬，當訪問量變大的時候，web與static服務器分離是必然的。

web與static服務器分離以後，前端開發人員即可無顧慮的備份前端代碼，清除冗餘代碼等等。

• 大多數狀況下，會有多個項目共用同一個 static 服務器，如此便須要在服務器劃分多個目錄來存放靜態資源文件；
• 構建的過程當中，構建工具須要保證 html 對 js/css/images... 路徑的正確引用，以及 css 對 images... 路徑的正確引用，以 lila爲例，須要配置 staticServerUrl 爲 http://www.static.com/project1

4. 後續

下一篇：本地化接口模擬、先後端並行開發

更多博客，查看 https://github.com/senntyou/blogs

做者：深予之 (@senntyou)

版權聲明：自由轉載-非商用-非衍生-保持署名（創意共享3.0許可證）