CH6 · 框架（Framework）詳細 ROADMAP
計畫文件，不會被 Quartz 渲染。
回主 roadmap → frontend/ROADMAP.md
章節目標
框架是前端過去 15 年的主戰場。建立從「為什麼需要框架」到 Virtual DOM 實作、從 React 到 Signals / Island / RSC、從狀態管理到渲染策略的完整知識。讓讀者能駕馭任何框架、也能看懂框架底層、更能判斷什麼時候不需要框架。
🌱 基本介紹
| # | 主題 | Slug | Stage | 大綱 |
|---|
| 01 | 前端框架是什麼 | 01-what-is-framework | 🌱 | Library vs Framework 差異、IoC（inversion of control）、React 是不是框架的爭論 |
| 02 | React 應用架構（一） | react-architecture | 🌿 | 已有（元件設計與狀態管理） |
| 03 | Custom Hooks / 效能 / 專案結構 | react-architecture-2 | 🌿 | 已有（二） |
❓ 為什麼需要
| # | 主題 | Slug | Stage | 大綱 |
|---|
| 04 | 為什麼需要前端框架（vanilla JS 不夠嗎） | 04-why-framework | 🌱 | 狀態同步地獄、手動 DOM 操作不可維護、跨瀏覽器差異、大專案一致性、為什麼 jQuery 時代結束、什麼時候反而不需要框架（landing page） |
| 05 | 為什麼需要 Virtual DOM（直接操作 DOM 不行嗎） | 05-why-virtual-dom | 🌱 | DOM 操作昂貴、批次更新、宣告式 vs 指令式、Virtual DOM 解的問題、為什麼 Svelte / Solid 不用 VDOM 也行 |
| 06 | 為什麼需要 Signals（useState 不夠嗎） | 06-why-signals | 🌱 | useState + useMemo + useCallback 的複雜度爆炸、fine-grained reactivity 解什麼、為什麼 Vue 3 / Solid / Preact / Angular 都轉向 Signals |
| 07 | 為什麼需要 RSC（React Server Components） | 07-why-rsc | 🌱 | Bundle size、data fetching 瀑布、SEO / performance 兼顧、為什麼 React 團隊走這條路、跟 Next.js 的關係 |
| 08 | 為什麼需要 Meta-framework（React 本身不夠嗎） | 08-why-meta-framework | 🌱 | Routing / SSR / SSG / Data fetching / Bundler 都要自己搭太累、Next.js / Nuxt / SvelteKit 解的問題 |
🕰️ 演進
| # | 主題 | Slug | Stage | 大綱 |
|---|
| 09 | 框架演進史 | 09-framework-evolution | 🌱 | jQuery → AngularJS → Backbone → Ember → React（2013）→ Vue → Svelte → Qwik / Solid → RSC，每個典範轉移為什麼發生 |
| 10 | 模板引擎演進 | 10-template-evolution | 🌱 | 字串拼接 → Handlebars / Mustache → JSX → Vue Single File Component → Svelte compile-time → Signal fine-grained |
| 11 | 狀態管理演進 | 11-state-management-evolution | 🌱 | 全域變數 → Flux（2014）→ Redux → Context → MobX → Zustand / Jotai → Recoil（棄）→ TanStack Query + Signals |
| 12 | 渲染策略演進 | 12-rendering-evolution | 🌱 | CSR（SPA 時代）→ SSR → SSG → ISR → RSC → Streaming SSR + Suspense、每個解的瓶頸 |
| 13 | React 內部演進 | 13-react-internals-evolution | 🌱 | Class Component → Hooks（2019）→ Concurrent Mode → Suspense → RSC、React 自己在解什麼問題 |
🧠 知識型
React 深入
| # | 主題 | Slug | Stage | 大綱 |
|---|
| 14 | React Hooks | ⛔️ fundamentals/react-hooks | 🌿 | 已有（跨系列） |
| 15 | Hooks 原理（為什麼不能在條件裡 call） | 15-hooks-internals | 🌱 | Hooks linked list、呼叫順序依賴、rule-of-hooks 的原因 |
| 16 | Custom Hooks 設計 | 16-custom-hooks-design | 🌱 | composability、命名規範、什麼時候抽 hook、常見 pattern |
| 17 | React 效能優化 | 17-react-performance | 🌱 | memo / useMemo / useCallback 的正確用法、Profiler、re-render 抓蟲 |
| 18 | Concurrent Mode / Suspense | 18-concurrent-suspense | 🌱 | startTransition、useDeferredValue、Suspense for data fetching |
| 19 | React Server Components | 19-rsc | 🌱 | Server vs Client component 邊界、序列化限制、跟 Next.js App Router 的整合 |
現代典範
| # | 主題 | Slug | Stage | 大綱 |
|---|
| 20 | Signals 深入 | 20-signals | 🌱 | fine-grained reactivity、Preact Signals / Solid / Angular Signals、跟 Vue reactivity 比較 |
| 21 | Island Architecture | 21-island-architecture | 🌱 | Astro / Qwik / Fresh、partial hydration、為什麼 SPA 不再是預設 |
| 22 | Streaming SSR + Suspense | 22-streaming-ssr | 🌱 | progressive hydration、Time to First Byte 優化、跟 RSC 的搭配 |
| 23 | Compile-time 框架 | 23-compile-time-frameworks | 🌱 | Svelte / Solid / Qwik 如何把 runtime 搬到 compile time |
框架比較
| # | 主題 | Slug | Stage | 大綱 |
|---|
| 24 | Framework 選型比較 | 24-framework-comparison | 🌱 | React / Vue / Svelte / Solid / Qwik 面向、生態、學習曲線、效能、何時選哪個 |
| 25 | Meta-framework 比較 | 25-meta-framework-comparison | 🌱 | Next.js / Nuxt / SvelteKit / Astro / Remix / TanStack Start 選型 |
框架內部原理
| # | 主題 | Slug | Stage | 大綱 |
|---|
| 26 | Virtual DOM 演算法 | 26-virtual-dom-algorithm | 🌱 | diff 演算法、key 的必要性、React vs Vue 的 VDOM 實作差異 |
| 27 | Reconciliation / Fiber 架構 | 27-reconciliation-fiber | 🌱 | React Fiber 的想法、可中斷的 render、優先級排程 |
| 28 | Reactivity 系統原理 | 28-reactivity-internals | 🌱 | Vue 3 Proxy-based、Svelte compile-time、Solid Signals，三種 reactivity 實作 |
🔧 小實作注意事項
| # | 主題 | Slug | Stage | 大綱 |
|---|
| 29 | 迷你 Virtual DOM 實作 | 29-mini-vdom | 🌱 | → walkthroughs W02，從零寫 diff 演算法 |
| 30 | 迷你 Signal 系統實作 | 30-mini-signals | 🌱 | → walkthroughs W02，理解 fine-grained reactivity |
| 31 | 單向資料流實戰 | 31-unidirectional-dataflow | 🌱 | Flux / Redux 思想在實務中、vs 雙向綁定、event-driven 架構 |
| 32 | Redux Saga / Thunk / Observable 對比 | 32-redux-middleware | 🌱 | 三種副作用處理的取捨、何時 Saga 過度、Zustand 年代要不要學 Saga |
| 33 | Framework Anti-pattern 合輯（React） | 33-react-anti-patterns | 🌱 | 過度 useMemo、過度 useCallback、不必要 Context、any props、effects 濫用、key={index}、直接 mutate state |
| 34 | Framework Anti-pattern 合輯（Vue） | 34-vue-anti-patterns | 🌱 | watch 濫用、reactive 深層陷阱、Options API vs Composition API 混用、mutations 以外改 store |
| 35 | Framework 升級策略 | 35-framework-upgrade | 🌱 | React 16 → 18 → 19、Class → Hooks 遷移、codemods 工具 |
| 36 | Proto 專案規劃（前端框架專案的正規骨架） | 36-proto-project-structure | 🌱 | folder 結構、typing、testing、CI、文件、docker、env 管理的 starter kit |
| 37 | Junior → Senior 前端路徑（框架角度） | 37-junior-to-senior-framework | 🌱 | 對標 roadmap.sh、能力地圖、從寫組件到設計系統架構、每階段該有的產出 |
💣 Anti-pattern
| # | 主題 | Slug | Stage | 大綱 |
|---|
| 38 | 框架通用 Anti-patterns | 38-framework-anti-patterns | 🌱 | 過度抽象、假 SSR（hydration 錯誤）、錯誤 state 位置、prop drilling 不收、framework lock-in 過深 |
🧰 對應檢查工具
| # | 主題 | Slug | Stage | 大綱 |
|---|
| 39 | 框架檢查工具 | 39-framework-tooling | 🌱 | React DevTools、Vue DevTools、eslint-plugin-react/vue/svelte、Why Did You Render、React Scan（2024） |
📎 補充
| # | 主題 | Slug | Stage | 大綱 |
|---|
| S01 | Scoped CSS in Framework（Vue / Svelte / React） | s01-framework-scoped-css | 🌱 | Vue <style scoped>、Svelte 自動 hash、React 靠第三方（CSS Module / CSS-in-JS），CH2 推到這 |
| S02 | CSS Modules 深入 | s02-css-modules | 🌱 | 編譯期重命名、TypeScript 整合、跟 CSS-in-JS 比較 |
| S03 | Framework 歷史八卦 | s03-framework-history | 🌱 | Angular 1 vs 2 砍掉重練、React 的 Facebook 專利爭議、Vue vs Riot.js、Svelte 作者 Rich Harris 的故事 |
| S04 | Legacy Framework（Backbone / Ember / Knockout） | s04-legacy-frameworks | 🌱 | 歷史上的重要框架、想法還在現代嗎、遷移策略 |
子目錄擴充（集中到 frontend/framework/{name}/，跟後端對稱）
| 優先度 | Framework | 子目錄 | 備註 |
|---|
| 🔴 | React | frontend/framework/react/ | 最熟、SEO 大；既有 react-architecture.md / react-architecture-2.md 搬入 |
| 🔴 | Next.js | frontend/framework/next/ | 2026 主流 Meta-framework |
| 🟡 | Vue 3 | frontend/framework/vue/ | Composition API / Pinia |
| 🟡 | Svelte | frontend/framework/svelte/ | Runes / SvelteKit |
| 🟢 | Solid / Nuxt / Astro / Qwik | frontend/framework/{name}/ | 看需求觸發 |
觸發規則：目錄不預先建，寫到 5+ 篇才 mkdir。frontend/react-architecture*.md 搬入時一起處理。
章節進度統計
- 知識主題：39 + 4 補充 = 43 項（主 roadmap）
- 子目錄擴充：每個框架 10–15 篇，估計 +50–100 項（選擇性推進）
- 🌿 growing：3（已有 React ×2 + Hooks 跨系列）
- 🌱 seed：40
跨系列連結
- →
frontend/js/ CH3（Virtual DOM / Reconciliation / Event Loop）
- →
frontend/css/ CH2（Scoped CSS、CSS Modules）
- →
frontend/architecture/ CH7（Micro-frontend、Module Federation、Island）
- →
frontend/application/ CH8（狀態管理 F08、API F09、效能 F11）
- →
frontend/career/ CH18（Junior → Senior 路徑對框架的能力要求）
- → W02 walkthroughs（迷你 VDOM、迷你 Signal）
- → W05 CMS capstone（框架選型、RSC、Streaming）