【前端架構】前後端分離架構設計

一、前後端分離

1. 為什麼選擇前後端分離
   1. 獨立部署
   2. 厘清職責
   3. 技術棧獨立
   4. 友善系統演進
   5. 提高效率
2. 前後端分離的開發模式
   1. 按業務的展示邏輯，确認出待展示的内容
   2. 前後端根據内容，一起細化每個字段名，直至接口确認完畢
   3. 遇到對接第三方接口時，需要反複進行上一步
   4. 當各種開發完成時，在測試環境進行內建
   5. 将完整的業務功能交給QA進行測試
3. 前後端分離的API設計
   1. RESTful API
      1. 标準的HTTP動詞（又稱HTTP請求方法）：GET、PUT、POST、DELETE、PATCH等，每個動詞的用法應該和它的行為一緻
      2. 狀态碼：20x、40x、50x等常見的狀态碼，都應該正确地使用
      3. 資源路徑：RESTful API中的URL用于代表資源，應該確定資源能遵循相關的規範，例如，/comments/1傳回第一條評論，/comments/傳回所有的評論
      4. 參數處理：如果存在大量的參數，那麼我們就需要通過GET帶查詢字元串（Query String）的方式，或者POST帶body的方式來進行傳遞
   2. API與安全
      1. Token管理
      2. 表單校驗
      3. 權限管理
   3. 應對API變更
      1. 統一API接口服務
      2. API資料模型
      3. 一緻化處理方式
      4. 可選的模型适配層

二、API管理模式：API文檔管理方式

1. 傳統方式
   1. 手寫API文檔
   2. 口頭約定API
   3. 離線API文檔
   4. 線上協作API文檔
   5. 版本化API文檔
   6. 代碼即文檔
2. 網際網路模式
   1. HTTP服務即API文檔
   2. 代碼生成可互動的API文檔，如Swagger

三、前後端并行開發：Mock Server

1. 三種類型Mock Server的比較
   1. 普通Mock Server：HTTP伺服器（如Node.js中的Mock Server架構json-server）
      1. 支援相關字段的查詢、過濾
      2. 支援檔案内容的全文搜尋
      3. 支援正規表達式路由
   2. DSL形式的Mock Server（如Java語言的Mock Server伺服器Moco）
   3. 程式設計型Mock Server（如Swagger）
2. Mock Server的測試：契約測試
   1. 後端契約測試
      1. 運作Mock Server
      2. 發起對Mock Server服務的API請求，擷取相應的傳回資料
      3. 判斷相應的資料，字段與API中的是否一緻
   2. 前端契約測試
      1. 字段名一緻性校驗
      2. 使用interface接口進行API測試（TypeScript編寫的應用）
      3. 檢驗邏輯字段
3. 前後端并行開發總結
   1. 前後端約定契約API，并完成對應的Mock Server實作
   2. 前後端根據各自的邏輯實作對應的業務代碼
   3. 前後端編寫各種契約測試，并确定API的修改能夠反映到持續內建
   4. 前後端進行API內建
   5. 在API修改時，修正對應的API修改

四、服務于前端的後端：BFF

1. BFF的API Gateway

   

   1. 應對多端應用
   2. 聚合後端微服務
   3. 代碼第三方API
   4. 遺留系統的微服務化改造
2. 前後端如何實作BFF
   1. 傳統後端技術棧下的BFF
   2. 前端技術棧下的BFF
      1. 通過Node.js來接收前端發送過來的請求
      2. 根據請求的類型向對應的背景API服務發起請求
      3. 獲得傳回結果後進行處理，并向前端傳回對應的結果
3. 使用GraphQL作為BFF
   1. GraphQL優勢
      1. 按需擷取
      2. 代碼即文檔
      3. 易于使用的API調試工具
      4. 強類型的API檢查
      5. 易于版本化的API
   2. GraphQL缺點
      1. HTTP請求無法被緩存
      2. 錯誤碼處理不友好
      3. 學習成本
      4. 實作複雜
   3. 基于GraphQL的BFF架構
      1. GraphQL->API Gateway->後端服務
      2. GraphQL->REST、RPC等接口的後端服務
      3. GraphQL->GraphQL接口的後端服務

推薦閱讀

1. 上篇：