後端框架與API 開發(六) - 前後分離開發演進

更新於 2024/07/13閱讀時間約 2 分鐘

※ 原本狀態:伺服器渲染

這是 MVC 架構下的 request / response 示意圖,在這張圖呈現的架構裡,畫面和資料都由同一個架構處理。

raw-image

伺服器渲染流程:

  • 瀏覽器針對特定網址送出請求。
  • 路由器解析請求後,轉接給對應的 controller。
  • controller 按照要求,透過 model 拿資料。
  • controller 拿到資料後,呼叫 view template,並嵌入資料。
  • 把「有資料的 template」回傳給瀏覽器,變成使用者看到的畫面。

在這種架構下,幾乎伺服器解決所有事情,瀏覽器只負責處理伺服器已經計算好的靜態網頁。

優點在於,網頁前端的邏輯非常簡單,對瀏覽器的效能需求也非常低。因此,這種開發方式主要應用於行動裝置,或基礎建設沒有這麼完善的國家。

缺點在於,大部分計算都在伺服器,導致伺服器運算效能消耗大;同時,前後端的程式碼容易混在一起,後續維護和修改都不易,容易發生改前端卻誤改後端程式碼的情況。

※ API 出現:AJAX + API 溝通資料

Google 的 Gmail 大量活用了 AJAX (Asynchronous JavaScript and XML) 和 API (Application Programming Interface)。這種技術允許前端透過 AJAX 發送多個請求,並且可以透過 API 只更新部分資料。例如,當從收件夾切換到垃圾郵件時,不需要改變網頁的大部分內容,只需要向伺服器請求部分資料,並取代部分畫面。

AJAX 技術的實現,讓前端、後端分離的概念發生。

raw-image

※ 分離狀態:前端模組化

模組化以後的前端,請求會變得相對明確及繁瑣,原本向後端直接請求一個網頁,現在會請求多個元件,例如:文章資料、使用者資料分開請求,每個元件送出各自的 API,不會像前一階段直接取得一大組資料。

Express.js 專案變成了「後端」,只專門管資料,這時瀏覽器發出請求,第一個接到請求的是前端,前端再發送請求給後端請求資料。

取得資料之後,前端把資料塞進自己的 template(模板),回傳給用戶端。

raw-image

※ 小結

前後端分離的優點在於前後端可以各自獨立,工程師更加專才,所以在開發、管理、後續的維護成本都可以下降,前、後端各自更針對性地效能優化。

缺點在於前端邏輯變得複雜,網頁需要載入大量 JavaScript,再用 JavaScript 運算出整個畫面,如果瀏覽器的效能不足,使用者操作網頁可能會出現卡頓。

    全端網頁開發專業知識分享
    留言0
    查看全部
    avatar-img
    發表第一個留言支持創作者!
    ※ 什麼是Middleware (中介層)? Middleware 一般翻譯作「中間件」或是「中介軟體」,其實 Express 應用程式就是由一連串的 middleware 串連而成: 從 request 進來到 response 回去會經過一系列的流程。 這個流程會按照路由清單由上而下執行。
    ※ Params是什麼? 在網頁開發中,params代表的是參數(Parameters)。當你在路由(Route)中定義了一個或多個變數時,這些變數的值就會被存儲在 params 對象中。所以,params 就是用來存儲路由參數的地方,這些參數可以在處理請求時使用。 ※ Params的兩個功能:
    ※ 什麼是路由? 當我們說「路由」時,可能是在談論路由器(實體設備),也可能是在談論路由(選擇路徑的過程),或者是在談論路徑(資料封包的傳輸路徑)。 路由器 (Router):這是一種實體設備,負責將資料封包 (Packet) 從一個網路傳送到另一個網路。它的工作方式類似於交通指揮,確保資料封包
    ※ 什麼是 Helper? Helper 通常指的是樣板引擎裡的邏輯工具。當我們想做的事情超越內建功能時,就可以自訂 helper。 ※ Handlebar helper的用處 說明:Handlebars helper 是一種自定義函數,可以在 Handlebars 模板中執行邏輯操作。這些函
    ※ 用 faker 套件產生假資料步驟 安裝 faker套件:快速生成假資料(人名、地名、時間)。 npm install faker@5.5.3 引入 faker 套件: const faker = require('faker') 建立data資料夾來生成假資料。創建一個名為 gene
    使用靜態檔案下載 Bootstrap 的原因主要有以下幾點: 客製化:當你下載了 Bootstrap 的靜態檔案,你可以根據自己的需求來修改這些檔案。例如,你可以改變預設的顏色、字型大小、間距等,使其更符合你的網站風格。這是直接使用 CDN 所無法做到的。 效能優化:如果你的網站只使用 Boot
    ※ 什麼是Middleware (中介層)? Middleware 一般翻譯作「中間件」或是「中介軟體」,其實 Express 應用程式就是由一連串的 middleware 串連而成: 從 request 進來到 response 回去會經過一系列的流程。 這個流程會按照路由清單由上而下執行。
    ※ Params是什麼? 在網頁開發中,params代表的是參數(Parameters)。當你在路由(Route)中定義了一個或多個變數時,這些變數的值就會被存儲在 params 對象中。所以,params 就是用來存儲路由參數的地方,這些參數可以在處理請求時使用。 ※ Params的兩個功能:
    ※ 什麼是路由? 當我們說「路由」時,可能是在談論路由器(實體設備),也可能是在談論路由(選擇路徑的過程),或者是在談論路徑(資料封包的傳輸路徑)。 路由器 (Router):這是一種實體設備,負責將資料封包 (Packet) 從一個網路傳送到另一個網路。它的工作方式類似於交通指揮,確保資料封包
    ※ 什麼是 Helper? Helper 通常指的是樣板引擎裡的邏輯工具。當我們想做的事情超越內建功能時,就可以自訂 helper。 ※ Handlebar helper的用處 說明:Handlebars helper 是一種自定義函數,可以在 Handlebars 模板中執行邏輯操作。這些函
    ※ 用 faker 套件產生假資料步驟 安裝 faker套件:快速生成假資料(人名、地名、時間)。 npm install faker@5.5.3 引入 faker 套件: const faker = require('faker') 建立data資料夾來生成假資料。創建一個名為 gene
    使用靜態檔案下載 Bootstrap 的原因主要有以下幾點: 客製化:當你下載了 Bootstrap 的靜態檔案,你可以根據自己的需求來修改這些檔案。例如,你可以改變預設的顏色、字型大小、間距等,使其更符合你的網站風格。這是直接使用 CDN 所無法做到的。 效能優化:如果你的網站只使用 Boot
    你可能也想看
    Google News 追蹤
    Thumbnail
    *合作聲明與警語: 本文係由國泰世華銀行邀稿。 證券服務係由國泰世華銀行辦理共同行銷證券經紀開戶業務,定期定額(股)服務由國泰綜合證券提供。   剛出社會的時候,很常在各種 Podcast 或 YouTube 甚至是在朋友間聊天,都會聽到各種市場動態、理財話題,像是:聯準會降息或是近期哪些科
    Thumbnail
    在前一篇我們已經成功地建立簽核表單及簽核節點並關聯回請假表單,而本篇會接著介紹如何管理簽核節點狀態並同步更新簽核表單狀態。
    Thumbnail
    本文介紹瞭如何在後端系統開發時設計不同表單的簽核流程,包括請假表單和採購表單。以及如何動態生成簽核表單,並建立簽核節點。另外還介紹瞭如何利用繼承來簡化簽核流程的設定。
    Thumbnail
    ts-rest 可以實現從服務器到客戶端的全型別安全,可以有效降低前後端溝通血流成河的機率。(´,,•ω•,,)
    Thumbnail
    軟體系統的發展歷程大多相似,首重解決基本需求、提供操作介面,進而提升安全性、擴充功能、優化操作。
    Thumbnail
    在軟體開發領域中,Backend 和 Frontend 是兩個常被提及的術語。許多同學常常問我,到底是 Backend 比較難還是 Frontend 比較容易?
    Thumbnail
    製作檔案後續流程 -->底片-->曬版-->印刷機---印刷 -->出版----------->印刷機---印刷 最先接觸的是底片機,那時照相機還是膠捲時代,而報紙與周刊要印刷前都是輸出成透明黑字圖底片,再經由曬版功序進入印刷機。 出片機 以下廠牌為當時最大宗(中譯名),西元年是我
    Thumbnail
    菜雞成長故事 寫這一篇主因也是因為身邊朋友陸陸續續想往軟體業發展,或是想動手做做小專案,故才成就了這一篇心路歷程,這邊會介紹我的背景、學習管道跟我如何選擇第一個程式語言作為敲門磚跟學習時間,希望能幫助還在努力中或是預計要轉職的各位有一個方向或是參考?(雖然我依然還是一個小菜雞,請鞭小力)
    Thumbnail
    #框架 #貝特森 #NLP #徐承庚 #心理學 #薩提爾 #後設模式 今天的影片內容,我們來聊聊你有沒有被框架效應綁架了你的判斷? 想想最近新聞瘋狂報導的白飯之亂,公說公有理,婆說婆有理 到底誰才是對的呢? 而框架效應深深影響著我們在判斷要買什麼東西、做什麼投資...等決策
    Thumbnail
    初學後端的人,可能對如何學習後端技術或語言會感到很困惑。 本篇文章提供了作者的幾種思路,幫助後端學員進行學習
    Thumbnail
    在工作室培訓難免會陷入低潮的原因,本篇文章分析了陷入低潮的原因,及提供預防及解決方法。
    Thumbnail
    *合作聲明與警語: 本文係由國泰世華銀行邀稿。 證券服務係由國泰世華銀行辦理共同行銷證券經紀開戶業務,定期定額(股)服務由國泰綜合證券提供。   剛出社會的時候,很常在各種 Podcast 或 YouTube 甚至是在朋友間聊天,都會聽到各種市場動態、理財話題,像是:聯準會降息或是近期哪些科
    Thumbnail
    在前一篇我們已經成功地建立簽核表單及簽核節點並關聯回請假表單,而本篇會接著介紹如何管理簽核節點狀態並同步更新簽核表單狀態。
    Thumbnail
    本文介紹瞭如何在後端系統開發時設計不同表單的簽核流程,包括請假表單和採購表單。以及如何動態生成簽核表單,並建立簽核節點。另外還介紹瞭如何利用繼承來簡化簽核流程的設定。
    Thumbnail
    ts-rest 可以實現從服務器到客戶端的全型別安全,可以有效降低前後端溝通血流成河的機率。(´,,•ω•,,)
    Thumbnail
    軟體系統的發展歷程大多相似,首重解決基本需求、提供操作介面,進而提升安全性、擴充功能、優化操作。
    Thumbnail
    在軟體開發領域中,Backend 和 Frontend 是兩個常被提及的術語。許多同學常常問我,到底是 Backend 比較難還是 Frontend 比較容易?
    Thumbnail
    製作檔案後續流程 -->底片-->曬版-->印刷機---印刷 -->出版----------->印刷機---印刷 最先接觸的是底片機,那時照相機還是膠捲時代,而報紙與周刊要印刷前都是輸出成透明黑字圖底片,再經由曬版功序進入印刷機。 出片機 以下廠牌為當時最大宗(中譯名),西元年是我
    Thumbnail
    菜雞成長故事 寫這一篇主因也是因為身邊朋友陸陸續續想往軟體業發展,或是想動手做做小專案,故才成就了這一篇心路歷程,這邊會介紹我的背景、學習管道跟我如何選擇第一個程式語言作為敲門磚跟學習時間,希望能幫助還在努力中或是預計要轉職的各位有一個方向或是參考?(雖然我依然還是一個小菜雞,請鞭小力)
    Thumbnail
    #框架 #貝特森 #NLP #徐承庚 #心理學 #薩提爾 #後設模式 今天的影片內容,我們來聊聊你有沒有被框架效應綁架了你的判斷? 想想最近新聞瘋狂報導的白飯之亂,公說公有理,婆說婆有理 到底誰才是對的呢? 而框架效應深深影響著我們在判斷要買什麼東西、做什麼投資...等決策
    Thumbnail
    初學後端的人,可能對如何學習後端技術或語言會感到很困惑。 本篇文章提供了作者的幾種思路,幫助後端學員進行學習
    Thumbnail
    在工作室培訓難免會陷入低潮的原因,本篇文章分析了陷入低潮的原因,及提供預防及解決方法。