後端、前端、App 各自需要什麼?
一句話總結:10 維度是所有 Proto 的基線,但後端在意 API 架構和資料庫層,前端在意狀態管理和元件系統,App 在意原生功能和安全存儲。
結論先講:如果你只拿通用的 10 維度來檢查所有 Proto,一定會漏掉 Track 特有的需求。後端沒有 Repository Pattern 不行,前端沒有 Error Boundary 白屏,App 沒有 Certificate Pinning 被中間人攻擊——這些都是各 Track 的「生死問題」。
B2E(後端):API 服務的完整骨架
後端 Proto 的核心是「從請求進來到回應出去的每一層都有規範」。
除了通用的 10 維度之外,後端特別需要:
套件管理:lockfile 一定要有。dev / test / lint 的依賴要分組,production image 不需要包含開發工具。
資料庫層:連線池設定、Base Model(UUID PK + soft delete + timestamps)、Migration 命名規範、zero-downtime migration 原則。
API 架構:RESTful 命名慣例、版本前綴 /api/v1/、Serializer / DTO 處理請求驗證和回應格式化、Cursor-based + Offset-based 兩種分頁、OpenAPI 自動產生。
認證授權:JWT lifecycle(Login / Logout / Refresh)、Access + Refresh Token 管理、RBAC 角色權限檢查。
業務層:Service Pattern 把邏輯集中在 Service 層、Repository Pattern 把資料存取抽象出來。至少一組從 Router → Service → Repository 的完整 CRUD 範例。
範圍外:Docker、CI/CD、CORS、部署、備份、Multi-tenancy、WebSocket。這些不是每個專案都需要,或者歸 Infra 管。
F2E(前端):SPA 的完整骨架
前端 Proto 的核心是「從路由到元件到狀態管理的每一層都有規範」。
路由:路由表設定、lazy loading、Layout System(Base / Auth / Admin 切換)、Navigation Guards 做認證和權限檢查。
狀態管理:全域 Store(Auth Store、App Store)+ Feature Store。統一的 action / getter 命名規範。
API 層:HTTP Client 封裝(Axios + Interceptors),Token 自動注入、401 自動處理、Error 統一轉換。每個 feature 有自己的 api 檔案。
錯誤處理:Error Boundary 防白屏、Loading / Empty / Error 三態元件、Toast 友善提示。
表單系統:Schema-based validation(Zod / Yup)、即時驗證 + 送出驗證的 UX pattern。
元件系統:Design Tokens(Color / Typography / Spacing)、基礎元件(Button / Input / Select)、Overlay 元件(Modal / Drawer / Toast)。
範圍外:Docker、CI/CD、PWA(選做)、Push Notification(選做)。
App(行動應用):跨平台的完整骨架
App Proto 除了前端的那些需求之外,還有原生功能跟安全的特殊要求。
安全存儲:flutter_secure_storage / Keychain / Keystore。敏感資料不能放 SharedPreferences 或 AsyncStorage。
Certificate Pinning:SHA-256 指紋驗證,防止 MITM 攻擊。這不是選配。
原生功能整合:Push Notification(FCM / APNs)、Network Connectivity(離線處理)、App Lifecycle(前背景切換)、Permission 管理(相機、相簿、位置)。
認證:除了 JWT lifecycle,還有 OAuth(Google / Apple 登入)和 Biometric Auth(指紋 / Face ID)。
Crash Reporting:Sentry 或 Crashlytics 整合。App 裡的錯誤你看不到 log,crash report 是唯一的線索。
範圍外:CI/CD Pipeline、Android/iOS 簽章、Store 上架流程——歸 Infra。
各 Track 的實際完成度
做過 Gap Analysis 之後,三個 Track 的有效完成度:
- B2E (Django):~89%(扣除 Infra 項)
- F2E (Vue 3):~86%
- App (Flutter):~86%
未完成的項目多是可選項(Analytics、i18n)或已歸 Infra 的項目。安全層在 App Track 達到 100%——這是正確的優先順序。
這篇的重點回顧
每個 Track 在通用 10 維度之上都有自己的核心需求。跨 Track 的共同標準是「回答同樣的問題」(怎麼管狀態?怎麼做認證?),具體的答案隨語言和框架而異。
系列文章:
- Proto 規劃(一):為什麼需要 Proto
- Proto 規劃(二):10 維度完整性檢查
- 你在這裡 → Proto 規劃(三):各 Track 標準
- Proto 規劃(四):Gap Analysis
- Proto 規劃(五):多語言延伸與維護
延伸閱讀:
「好的 Track 標準不是要求所有語言做法一樣,而是要求所有語言回答同樣的問題。」