Terry Yao's Blog

ROADMAP

ROADMAP

閱讀時間約 9 分鐘

前端系列 Roadmap

計畫文件，不會被 Quartz 渲染（無 frontmatter）。每個 chapter 有自己的詳細 ROADMAP。

編排原則

1. 五段式結構（每章節）+ 可選 📎 補充

  • 🌱 基本介紹 — 是什麼（What）
  • ❓ 為什麼需要 — 根本問題（Why，不用這個東西會痛在哪）
  • 🕰️ 演進 — 版本史、歷史脈絡（How we got here）
  • 🧠 知識型 — 深入概念、核心機制（How it works）
  • 🔧 小實作注意事項 — gotcha、實戰 tips、mini-exercises（How to apply）
  • 💣 Anti-pattern — 這領域的地雷合輯
  • 🧰 對應檢查工具 — lint / 格式化 / 驗證工具
  • 📎 補充（可選）— niche / 進階 / 冷門但值得記錄的主題（例：CH4 的 WebUSB、CH3 的 Decorator、CH2 的 CSS 老式 hacks）

為什麼拆開 What / Why / How we got here / How it works：很多新手看演進會問「所以到底為什麼要這個」。獨立 Why 段落直接處理「不用的話會痛在哪」的根本問題——例如為什麼需要打包工具（明明可以直接 <script> 執行）。

1.1 Why-first 原則（每篇都要）

不只章節有 ❓ 段落——每一篇文章內部也要回答「為什麼需要」。這是寫作紀律：

  • 開頭段或前 1/3 就要講「不用這個會痛在哪」
  • 如果想不出 Why，表示這題不值得寫
  • 詳細規則見 CLAUDE.md 的「Why-first 原則」

2. 全章通用段落（每章都要補）

  • Anti-pattern — 這個領域的地雷合輯
  • 對應檢查工具 — lint / 格式化 / 驗證工具

3. 推進順序：完成一章再進下一章

基礎層（CH1–CH5）
  CH1 HTML    → CH2 CSS    → CH3 JS    → CH4 瀏覽器平台 + Wasm    → CH5 TS

抽象與架構（CH6–CH7）
  CH6 框架（含 RSC/Signals/Island 等新典範）    → CH7 架構決策

應用層（CH8–CH9）
  CH8 資料流與業務版型（狀態/API/表單/Streaming/版型）
  CH9 效能與工程化（CWV/Bundler/npm/部署）

品質層（CH10–CH15，獨立）
  CH10 測試  → CH11 資安  → CH12 A11y  → CH13 Mobile  → CH14 Design System  → CH15 觀測

工具 DX 層（CH16–CH17）
  CH16 DevTools 與工程化  → CH17 AI 輔助前端開發

職涯與 Meta（CH18–CH19）
  CH18 職涯與面試（對標 roadmap.sh）  → CH19 生態系（npm/套件/資源）

跨系列 Pointer
  SEO pointer（連到 seo/，見文件末）

實作練習（walkthroughs/）
  W01 無框架建站  → W02 造自己的工具  → W03 Level 1–5  → W04 API 5 種接法  → W05 CMS (capstone)

4. 狀態標記

  • 🌱 seed — 待寫
  • 🌿 growing — 已寫
  • 🌳 mature — 完整（有出處、校對、交叉連結）
  • ⛔️ 在其他 series 已寫

章節明細（每章都有自己的 ROADMAP.md）

CH章節詳細計畫現有 🌿估計 🌱
CH1HTMLfrontend/html/ROADMAP.md3~15
CH2CSSfrontend/css/ROADMAP.md6~28
CH3JS 語言核心frontend/js/ROADMAP.md6~22
CH4瀏覽器平台 + WebAssemblyfrontend/browser/ROADMAP.md5~15
CH5TypeScriptfrontend/typescript/ROADMAP.md5~12
CH6框架frontend/framework/ROADMAP.md3~20
CH7架構決策frontend/architecture/ROADMAP.md2~8
CH8應用層・資料流frontend/application/ROADMAP.md~5~46
CH9應用層・效能與工程化frontend/engineering/ROADMAP.md0~40
CH10測試frontend/testing/ROADMAP.md2~10
CH11資安frontend/security/ROADMAP.md1~10
CH12A11yfrontend/a11y/ROADMAP.md0~8
CH13Mobile / Cross-platformfrontend/mobile/ROADMAP.md0~6
CH14Design Systemfrontend/design-system/ROADMAP.md0~8
CH15觀測與錯誤追蹤frontend/observability/ROADMAP.md0~5
CH16DevTools 與工程化frontend/devtools/ROADMAP.md0~8
CH17AI 輔助前端開發frontend/ai-assisted/ROADMAP.md0~6
CH18職涯與面試frontend/career/ROADMAP.md0~8
CH19生態系frontend/ecosystem/ROADMAP.md0~10
—SEO pointer本文件內——
WalkthroughsW01–W05walkthroughs/ROADMAP.md~0~25
合計~48~250

SEO pointer（跨系列）

連到 seo/ 系列（12 篇，獨立 roadmap 已存在）。前端工程師必看：

  • seo/02-technical-seo — meta、canonical、sitemap
  • seo/06-og-social-sharing — 社群分享預覽
  • seo/08-aeo-structured-content — JSON-LD
  • seo/10-performance-cwv — Core Web Vitals（效能即 SEO）

延伸問題（歸到 CH9 應用層・效能與工程化）：

  • SEO 分數如何回頭影響前端架構決策（SSR / SSG / RSC 選型）

進度追蹤

Milestone 流程：

  • M1–M5：基礎層完整（CH1–CH5）
  • M6–M7：抽象與架構（CH6–CH7）
  • M8–M9：應用層（資料流 + 效能工程化）
  • M10–M15：品質層
  • M16–M17：DX 工具層
  • M18–M19：職涯 / 生態系
  • SEO pointer 確認（併入 M9）
  • 最終 capstone：W05 CMS

每章完成定義：

  • 基本介紹、演進、知識型、小實作四段都有文章 🌿
  • Anti-pattern 與檢查工具段都有列出
  • 跟其他章節的交叉連結齊全
  • 架構師已檢查過漏項

附錄 A：前端 → 通用系列 Cross-Reference 盤點

整理前端 ROADMAP 裡所有 ⛔️ 或 → 指向通用系列的引用，給未來整理通用系列時的自己參考。 當前狀態：通用系列各自只有 index.md，尚未建立獨立 ROADMAP.md。整理通用系列那輪（最後一輪）會用獨立視角重整，不靠前端帶——但下面這些引用要確保整理後仍對得上。

A-1 fundamentals/（前端會引的既有文章）

前端位置引用文章狀態
CH1 #02 HTML 結構fundamentals/html-structure✅
CH4 #01 瀏覽器運作fundamentals/browser-mechanism✅
CH4 #02 DOMfundamentals/dom✅
CH4 #03 BOMfundamentals/bom✅
CH4 #04 請求流程fundamentals/browser-request-flow✅
CH4 #24 / CH8 #20 WebSocketfundamentals/websocket✅
CH6 #14 React Hooksfundamentals/react-hooks✅
CH8 #16 REST 基礎fundamentals/frontend-api-methods、fundamentals/restful-api✅
CH8 #25 前端認證fundamentals/oauth-guide✅

通用系列整理時的問題：fundamentals/ 目前是「跨領域基礎」混合資料夾，未來可能會拆（HTTP / 瀏覽器 / API / Auth 各自歸隊）。搬移時記得同步更新以上 wikilink。

A-2 testing/

前端位置引用文章狀態
CH10 #08 單元測試testing/13-unit-test-jest-vitest✅
CH10 #09 E2Etesting/14-e2e-playwright✅

通用系列整理時：testing/ 通用視角的核心（測試金字塔、合約測試、滲透測試、AI 輔助測試）已有文章（05–14 系列），前端視角只引用 13/14 兩篇；前端獨有的 React Testing Library、Storybook、Chromatic 等會留在 frontend/testing/。

A-3 security/

前端位置引用文章狀態
CH11 #02 Web Security 基礎security/03-web-security✅

通用系列整理時：security/ 目前只有 4 篇（安全基礎、紅藍隊、Web Security、SDLC）。前端獨有的 XSS / CSRF / CSP / Cookie 安全 / CSP / Trusted Types 等細項留在 frontend/security/，通用層不重複。

A-4 career/

前端位置引用文章狀態
CH18 #02 好的前端工程師career/01-good-frontend-engineer✅
CH18 #03 Junior vs Seniorcareer/06-junior-vs-senior✅

通用系列整理時：career/ 已有 13 篇（01–06 角色 + guide-* 策展）。前端獨有的面試題庫、portfolio、Proto repo、AI 時代前端策略等全部留在 frontend/career/。

A-5 process/

前端位置引用文章狀態
CH10 #18 測試策略總覽process/02-testing-strategy✅
CH10 #19 TDD / BDD / SDDprocess/14-tdd-bdd-sdd✅
CH9 #19 Monorepo vs Multi-repoprocess/06-monorepo-vs-multirepo✅

通用系列整理時：process/ 已 14 篇（含多輪重寫版本 -2/-3/-4/-5），是相對成熟的系列。前端不重寫這些，只引用。

A-6 standards/

前端位置引用文章狀態
CH9 #29 前端 CI/CDstandards/06-good-cicd-pipeline✅
（主 roadmap 連結）好的前端專案standards/01-good-frontend-project✅

通用系列整理時：standards/ 8 篇體檢表，前端只連好的前端專案 + CI/CD。

A-7 seo/

前端位置引用文章狀態
CH1 #27 Meta / OG 深入seo/06-og-social-sharing✅
CH9 #09 Core Web Vitalsseo/10-performance-cwv✅
CH9 #14 SEO 驅動前端架構seo/10-performance-cwv（延伸）✅
主 roadmap SEO pointerseo/02、seo/06、seo/08、seo/10✅

通用系列整理時：seo/ 12 篇已有獨立 roadmap，前端只 pointer 過去，不重寫。

A-8 micro-service/

前端位置引用文章狀態
CH7 #02 渲染策略總覽micro-service/16-f2e-render-strategy✅
CH9 #09 Lighthouse 排名micro-service/15-f2e-lighthouse-ranking✅

通用系列整理時：micro-service/ 目前是混合資料夾（壓測平台 + 前端 SEO/效能案例）。未來可能拆——15/16 前端相關文章可能搬到 frontend/ 或獨立 case-studies/，屆時 wikilink 要同步更新。

A-9 前端跨到其他 frontend 子目錄（內部）

以下不是跨系列，但也記錄下來方便校對：

主題位置
frontend/js/05-why-bundlerCH9 pointer（Bundler 已在 CH3 處理）
frontend/react-architecture、react-architecture-2、rendering-decisions待整理進 frontend/framework/ 或 frontend/architecture/（Phase 2 cleanup）

附錄 B：未解決 / 待後續處理

  • Phase 2 cleanup：3 個 root 層文章要搬到對應子目錄
    • react-architecture.md → frontend/framework/react/
    • react-architecture-2.md → frontend/framework/react/
    • rendering-decisions.md → frontend/architecture/
  • Walkthroughs W06–W08 詳細展開：留待 infra / 通用 規劃輪次
  • 新子目錄的 index.md：有實際文章後才建（避免空白頁）
  • 通用系列 ROADMAP：最後一輪重整時建立，獨立視角重寫

關係圖譜

反向連結

  • ROADMAP

    後端系列 Roadmap 計畫文件，不會被 Quartz 渲染（無 frontmatter）。每個 chapter 有自...

  • ROADMAP

    Walkthroughs 詳細 ROADMAP 計畫文件，不會被 Quartz 渲染（無 frontmatter）。 公...