後端框架與API 開發(六) - 前後分離開發演進
※ 原本狀態：伺服器渲染
這是 MVC 架構下的 request / response 示意圖，在這張圖呈現的架構裡，畫面和資料都由同一個架構處理。
伺服器渲染流程：
- 瀏覽器針對特定網址送出請求。
- 路由器解析請求後，轉接給對應的 controller。
- controller 按照要求，透過 model 拿資料。
- controller 拿到資料後，呼叫 view template，並嵌入資料。
- 把「有資料的 template」回傳給瀏覽器，變成使用者看到的畫面。
在這種架構下，幾乎伺服器解決所有事情，瀏覽器只負責處理伺服器已經計算好的靜態網頁。
優點在於，網頁前端的邏輯非常簡單，對瀏覽器的效能需求也非常低。因此，這種開發方式主要應用於行動裝置，或基礎建設沒有這麼完善的國家。
缺點在於，大部分計算都在伺服器，導致伺服器運算效能消耗大；同時，前後端的程式碼容易混在一起，後續維護和修改都不易，容易發生改前端卻誤改後端程式碼的情況。
※ API 出現：AJAX + API 溝通資料
Google 的 Gmail 大量活用了 AJAX (Asynchronous JavaScript and XML) 和 API (Application Programming Interface)。這種技術允許前端透過 AJAX 發送多個請求，並且可以透過 API 只更新部分資料。例如，當從收件夾切換到垃圾郵件時，不需要改變網頁的大部分內容，只需要向伺服器請求部分資料，並取代部分畫面。
AJAX 技術的實現，讓前端、後端分離的概念發生。
※ 分離狀態：前端模組化
模組化以後的前端，請求會變得相對明確及繁瑣，原本向後端直接請求一個網頁，現在會請求多個元件，例如：文章資料、使用者資料分開請求，每個元件送出各自的 API，不會像前一階段直接取得一大組資料。
Express.js 專案變成了「後端」，只專門管資料，這時瀏覽器發出請求，第一個接到請求的是前端，前端再發送請求給後端請求資料。
取得資料之後，前端把資料塞進自己的 template（模板），回傳給用戶端。
※ 小結
前後端分離的優點在於前後端可以各自獨立，工程師更加專才，所以在開發、管理、後續的維護成本都可以下降，前、後端各自更針對性地效能優化。
缺點在於前端邏輯變得複雜，網頁需要載入大量 JavaScript，再用 JavaScript 運算出整個畫面，如果瀏覽器的效能不足，使用者操作網頁可能會出現卡頓。
留言0
查看全部
你可能也想看
Google News 追蹤
嘿，大家新年快樂~ 新年大家都在做什麼呢？
跨年夜的我趕工製作某個外包設計案，在工作告一段落時趕上倒數。
然後和兩個小孩過了一個忙亂的元旦。在深夜時刻，看到朋友傳來的解籤網站，興致勃勃熬夜體驗了一下，覺得非常好玩，或許有人玩過了，但還是想寫上來分享紀錄一下~
接續上一篇
Step2：VC#專案建立
Step3：IIS新建站台
Step4：VC#架設到IIS中
xhr
在下面的例子裡，我們首先建立了一個 XMLHttpRequest 物件，並使用 .open() 開啟一個 URL，最後使用 .send() 發出 request。
具體來說步驟有四個：
建立XMLHttpReque
開啟一個請求。
送出請求。
拿到回應後去處理畫面要如何呈現。
CSR（Client Side Rendering）是一種將渲染資料的過程交由瀏覽器端處理的方法。
伺服器端渲染（SSR）是一種在伺服器端渲染 HTML 頁面的技術。
在開發前後端分離架構時，使用兩個不同網域所遇到跨域請求問題。特別是在POST請求時行為差異大，揭示了「簡單請求」與「預檢請求」的關鍵差異。簡單請求不需預檢，但application/json會觸發預檢請求，需透過特定設定解決。分享這篇文章希望幫助開發者有效處理跨域問題。
先前幾篇筆記介紹了網路請求，瀏覽器儲存資料的方式，那麼實務上，前端最常需要發送網路請求的時候，就是透過呼叫 API，去向後端工程師發送/請求資料，所以今天來記錄什麼是 API吧！
Request內容
package main
import (
"fmt"
"log"
"net/http"
"strings"
)
func request(w http.ResponseWriter, r *http.Request) {
//這些資訊是輸出到伺服器端的列印訊息
資訊回應(Informational responses)
100~199
100(Continue)：伺服器在等待用戶端繼續請求。
102(Processing)：伺服器收到請求正在處理中。
成功回應(Successful responses)
200~299
200(OK)：請求
嘿，大家新年快樂~ 新年大家都在做什麼呢？
跨年夜的我趕工製作某個外包設計案，在工作告一段落時趕上倒數。
然後和兩個小孩過了一個忙亂的元旦。在深夜時刻，看到朋友傳來的解籤網站，興致勃勃熬夜體驗了一下，覺得非常好玩，或許有人玩過了，但還是想寫上來分享紀錄一下~
接續上一篇
Step2：VC#專案建立
Step3：IIS新建站台
Step4：VC#架設到IIS中
xhr
在下面的例子裡，我們首先建立了一個 XMLHttpRequest 物件，並使用 .open() 開啟一個 URL，最後使用 .send() 發出 request。
具體來說步驟有四個：
建立XMLHttpReque
開啟一個請求。
送出請求。
拿到回應後去處理畫面要如何呈現。
CSR（Client Side Rendering）是一種將渲染資料的過程交由瀏覽器端處理的方法。
伺服器端渲染（SSR）是一種在伺服器端渲染 HTML 頁面的技術。
在開發前後端分離架構時，使用兩個不同網域所遇到跨域請求問題。特別是在POST請求時行為差異大，揭示了「簡單請求」與「預檢請求」的關鍵差異。簡單請求不需預檢，但application/json會觸發預檢請求，需透過特定設定解決。分享這篇文章希望幫助開發者有效處理跨域問題。
先前幾篇筆記介紹了網路請求，瀏覽器儲存資料的方式，那麼實務上，前端最常需要發送網路請求的時候，就是透過呼叫 API，去向後端工程師發送/請求資料，所以今天來記錄什麼是 API吧！
Request內容
package main
import (
"fmt"
"log"
"net/http"
"strings"
)
func request(w http.ResponseWriter, r *http.Request) {
//這些資訊是輸出到伺服器端的列印訊息
資訊回應(Informational responses)
100~199
100(Continue)：伺服器在等待用戶端繼續請求。
102(Processing)：伺服器收到請求正在處理中。
成功回應(Successful responses)
200~299
200(OK)：請求