CH8 · 應用層・資料流與業務版型 詳細 ROADMAP
計畫文件，不會被 Quartz 渲染。
回主 roadmap → frontend/ROADMAP.md
章節目標
應用層拆成兩章：
- CH8（本章） 處理資料流：狀態管理、API 通訊、表單、常見業務版型
- CH9 處理效能與工程化：效能、建置、部署
本章建立從 useState 到 TanStack Query、從 REST 到 Streaming UI、從 React Hook Form 到 XState、到 Dashboard / 電商 / Admin / SaaS / Landing 五大萬用版型的完整能力。
🌱 基本介紹
| # | 主題 | Slug | Stage | 大綱 |
|---|
| 01 | 應用層資料流是什麼 | 01-what-is-data-flow | 🌱 | Local / Server / URL / Global state 分類、資料流向（單向 vs 雙向）、React 世代的主流設計 |
❓ 為什麼需要
| # | 主題 | Slug | Stage | 大綱 |
|---|
| 02 | 為什麼需要狀態管理（useState 不夠嗎） | 02-why-state-management | 🌱 | props drilling 的極限、跨組件共享、server state 特殊性、URL 為什麼是 state、全域 store 什麼時候才需要 |
| 03 | 為什麼需要 API 層抽象（fetch 不夠嗎） | 03-why-api-abstraction | 🌱 | 攔截（auth / error / logging）、重試 / 快取 / 去重、錯誤映射、TypeScript 整合 |
| 04 | 為什麼需要表單抽象（原生表單不夠嗎） | 04-why-form-abstraction | 🌱 | 錯誤訊息整合、非同步驗證、複雜表單（多步 / 陣列 / 條件顯示）、跟 schema 對齊 |
| 05 | 為什麼需要「業務版型思維」（每個專案從零想起不行嗎） | 05-why-business-patterns | 🌱 | Dashboard / E-commerce / Admin / SaaS 都有驗證過的 UX 模式、從版型起手避免 reinvent、省時 + 降低 UX 風險 |
🕰️ 演進
| # | 主題 | Slug | Stage | 大綱 |
|---|
| 06 | 狀態管理演進（應用層角度） | 06-state-management-evolution-app | 🌱 | 全域變數 → Redux → MobX → Context + Hooks → Zustand / Jotai → TanStack Query + Signals |
| 07 | 表單處理演進 | 07-form-evolution | 🌱 | uncontrolled → controlled → Formik → React Hook Form → Zod + RHF 整合 |
| 08 | 前端打 API 演進（pointer） | → CH3 #11 | 🌿 | 跨章，連到 JS 章 |
| 09 | UI 版型演進（從 pixel perfect 到 design system → 從 template 到 pattern library） | 09-ui-template-evolution | 🌱 | Bootstrap Admin（2010s）→ Ant Design Pro → shadcn/ui → Tailwind UI blocks、template 跟 pattern 的差異 |
🧠 知識型
F08 狀態管理
| # | 主題 | Slug | Stage | 大綱 |
|---|
| 10 | Local / Server / URL / Global state 分類 | 10-state-types | 🌱 | 每種狀態該住哪、誤放帶來的代價、辨識流程 |
| 11 | Context + useState 原生組合 | 11-context-usestate | 🌱 | 什麼時候夠用、什麼時候會 re-render 爆炸、優化技巧 |
| 12 | Redux / Zustand / Jotai tradeoff | 12-redux-zustand-jotai | 🌱 | 三種 API 風格、樣板量、效能、TypeScript、何時選哪個 |
| 13 | TanStack Query：server state | 13-tanstack-query | 🌱 | server state 抽離、快取 / 重試 / 失效、optimistic update、為什麼不再放 Redux |
| 14 | 狀態機：XState | 14-xstate | 🌱 | 複雜 flow（multi-step form / wizard）、visual tool、取代一堆 boolean 變數 |
| 15 | Signals 狀態管理 | 15-signals-state | 🌱 | Preact / Vue / Solid 的狀態模式、跟 React 世代的差異 |
F09 API 與通訊
| # | 主題 | Slug | Stage | 大綱 |
|---|
| 16 | REST 基礎 | ⛔️ fundamentals/frontend-api-methods / fundamentals/restful-api | 🌿 | 跨系列 |
| 17 | GraphQL 深入 | 17-graphql-deep | 🌱 | Schema / Query / Mutation / Subscription、N+1 問題、Apollo Client / Relay / urql |
| 18 | GraphQL 什麼時候值得投入 | 18-when-graphql-worth-it | 🌱 | 多頁面共用 query 的 win、學習曲線代價、team size 門檻、選型決策樹 |
| 19 | tRPC | 19-trpc | 🌱 | End-to-end TypeScript、為什麼 Next.js + tRPC 成經典、跟 GraphQL 定位差異 |
| 20 | WebSocket 實戰 | ⛔️ fundamentals/websocket | 🌿 | 跨系列 |
| 21 | Server-Sent Events | 21-sse | 🌱 | 單向推播、為什麼 AI chatbot 多用 SSE 不用 WebSocket |
| 22 | Streaming UI / chunked response | 22-streaming-ui | 🌱 | Suspense + React streaming、AI chat 的 streaming output、server push 的 UI 模式 |
| 23 | API Client 架構 | 23-api-client-architecture | 🌱 | 中介層設計（interceptor / retry / cache / dedup）、error 分層 |
| 24 | 錯誤處理策略 | 24-error-handling-strategy | 🌱 | 三層錯誤（網路 / 業務 / UI）、Error Boundary、toast 時機、sentry 整合 |
| 25 | 前端認證 | ⛔️ fundamentals/oauth-guide | 🌿 | 跨系列 |
| 26 | Mock & Contract Testing | 26-mock-contract-testing | 🌱 | MSW / Pact、前後端獨立開發、契約測試 |
| 27 | OpenAPI → TS 自動生成 | 27-openapi-ts-codegen | 🌱 | openapi-typescript、graphql-codegen、為什麼手寫 type 不可行 |
F10 表單與資料流
| # | 主題 | Slug | Stage | 大綱 |
|---|
| 28 | Controlled vs Uncontrolled | 28-controlled-uncontrolled | 🌱 | 兩種心智模型、效能、整合第三方、選擇依據 |
| 29 | React Hook Form + Zod | 29-rhf-zod | 🌱 | 2026 主流組合、type-safe、驗證分層 |
| 30 | 複雜表單策略 | 30-complex-forms | 🌱 | 多步 / 條件顯示 / 陣列欄位 / cross-field 驗證 / 非同步驗證 |
🏗️ 常見業務版型（NEW：萬用版型）
| # | 主題 | Slug | Stage | 大綱 |
|---|
| 31 | Dashboard 版型 | 31-dashboard-template | 🌱 | Sidebar + Topbar + Content、Widget 網格、Data Table + Chart、filter / date range / export、Responsive 行動優化 |
| 32 | E-commerce 版型 | 32-ecommerce-template | 🌱 | Product List (grid / list) → Detail → Cart → Checkout → Account，每階段的 state / 常見 UX pattern、轉換率關鍵點 |
| 33 | Admin / CMS 版型 | 33-admin-template | 🌱 | CRUD 表格、Bulk action、Filter + Search、權限控制、Activity log、Settings panel |
| 34 | SaaS 版型 | 34-saas-template | 🌱 | Onboarding flow、多租戶切換（organization switcher）、Settings / Billing / Team UI、Usage metering 顯示、Upgrade prompts |
| 35 | Landing Page 版型 | 35-landing-template | 🌱 | Hero + Social proof + Features + Pricing + Testimonials + CTA + Footer、跟 SEO 整合、A/B testing 準備 |
| 36 | App-like 版型（行動優先） | 36-app-like-template | 🌱 | Bottom nav / Tab view / Drawer、pull-to-refresh、infinite scroll、native-like 互動 |
🔧 小實作注意事項
| # | 主題 | Slug | Stage | 大綱 |
|---|
| 37 | 狀態住哪的決策練習 | 37-state-decision-practice | 🌱 | 10 個情境題練習 |
| 38 | API Client 從 0 搭建 | 38-build-api-client | 🌱 | interceptor / retry / cache / error map 完整實作 |
| 39 | Streaming UI 實戰（跟 AI chat 整合） | 39-streaming-ui-practice | 🌱 | Server → SSE / Response.body ReadableStream → React Suspense / 自訂 hook |
| 40 | 複雜表單實戰（多步 wizard） | 40-wizard-form-practice | 🌱 | RHF + XState 組合、跨步驟驗證、離開確認 |
| 41 | 版型改造實戰：從 shadcn/ui blocks 客製 | 41-template-customization | 🌱 | 別人的 template 怎麼客製到你家 DS、避免 lock-in、維護性 |
💣 Anti-pattern
| # | 主題 | Slug | Stage | 大綱 |
|---|
| 42 | 資料流 Anti-patterns | 42-data-flow-anti-patterns | 🌱 | server state 塞 Redux、表單狀態塞全域、localStorage 放 auth token、錯誤 swallow、手動管 API cache 的噩夢、版型直接抄沒理解結構 |
🧰 對應檢查工具
| # | 主題 | Slug | Stage | 大綱 |
|---|
| 43 | 資料流工具 | 43-data-flow-tooling | 🌱 | Redux DevTools、React Query DevTools、MSW、Apollo Client DevTools、Storybook（版型預覽） |
📎 補充
| # | 主題 | Slug | Stage | 大綱 |
|---|
| S01 | Feature Flags 系統 | s01-feature-flags | 🌱 | LaunchDarkly / PostHog / 自建、gradual rollout、A/B 測試 |
| S02 | i18n 實作框架 | s02-i18n-frameworks | 🌱 | react-i18next / next-intl / FormatJS、跟 CH1 lang 屬性連動 |
| S03 | 實用實用套件庫合輯 + 為什麼 | s03-essential-packages | 🌱 | lodash-es / date-fns / immer / nanoid / clsx / zod，每個解什麼 |
章節進度統計
- 知識主題：43 + 3 補充 = 46 項
- 🌿 growing：3（跨系列）
- 🌱 seed：43
跨系列連結
- →
frontend/framework/ CH6（狀態管理演進、Concurrent / Suspense）
- →
frontend/js/ CH3（API 打法演進、fetch 原理）
- →
frontend/browser/ CH4（Streaming、SSE、WebSocket）
- →
frontend/engineering/ CH9（效能、建置、部署）
- →
frontend/testing/ CH10（Mock / Contract）
- →
frontend/design-system/ CH14（版型 ↔ 元件庫互動）
- → W05 CMS capstone（streaming、feature flag、i18n）