Terry Yao's Blog

前端開發 Roadmap

前端開發 Roadmap

閱讀時間約 12 分鐘

前端開發 Roadmap

這是前端工程師的完整學習地圖。重點在紮根——框架會換，HTML/CSS/JS 和瀏覽器平台不會。

學習路徑

[基礎層]
HTML 語意 → CSS 佈局 → JS 核心 → 瀏覽器 API
        ↓
[抽象層]
TypeScript → React / Framework
        ↓
[架構層]
前端架構決策（渲染模式 / Micro-frontend / 架構風格）
        ↓
[應用層]
CH8 資料流（狀態管理 / API / 表單 / 版型）
CH9 效能與工程化（效能 / Bundler / 部署 / DX）
        ↓
[品質與跨切面]
測試 / 資安 / A11y / Mobile / Design System / 觀測
        ↓
[工具 DX 層]
DevTools 工程化 / AI 輔助前端
        ↓
[職涯與生態]
職涯面試 / 生態系
        ↓
[實作驅動]
walkthroughs/（無框架建站、造自己的工具、Level 1~5 專案）

跨領域連結：

Stage：🌱 seed（待寫） / 🌿 growing（已有文章） / 🌳 mature（完整）

基礎層

F01 HTML 與語意化

HTML 已成系列 → 子 roadmap：html

#主題連結stage
01HTML 結構HTML 結構🌿
02語意化標籤（article/nav/main/section/aside）semantic🌿
03表單原生行為（form / input / submit / validation）forms🌿
04表單進階（input types、autofill、file upload、accept）—🌱
05媒體（img / video / audio、lazy loading、srcset）—🌱
06Canvas / SVG 繪圖—🌱
07Web Components / Shadow DOM—🌱
08Drag & Drop / Clipboard API—🌱
09i18n 屬性（lang / dir / hreflang）—🌱
10Meta、OG、Structured DataOG、Schema🌿

F02 CSS 與視覺呈現

CSS 已成系列 → 子 roadmap：css

#主題連結stage
01Box Modelbox-model🌿
02Flexbox（一維佈局）flexbox🌿
03Grid（二維佈局）grid🌿
04Positioning（static/relative/absolute/fixed/sticky）positioning🌿
05Specificity & Cascade（為什麼樣式被蓋掉）specificity🌿
06RWD 與 Media Queryrwd🌿
07Transition、Animation—🌱
08CSS 變數與 Theming—🌱
09造自己的 Utility CSS（迷你 Tailwind）—🌱
10Tailwind / CSS-in-JS / CSS Module 比較—🌱

F03 JavaScript 語言核心

JS 已成系列 → 子 roadmap：js

#主題連結stage
01變數、型別、let/constvariables🌿
02Scope 與 Closureclosure🌿
03this 綁定（call/apply/bind）this-binding🌿
04Event Loop、microtask vs macrotaskevent-loop🌿
05Promise、async/await 錯誤處理async🌿
06Prototype 與 classprototype-class🌿
07Module（ESM / CJS）—🌱
08Iterator / Generator—🌱

F04 瀏覽器 API 與 Web 平台

#主題連結stage
01DOMDOM🌿
02BOMBOM🌿
03瀏覽器運作機制Browser Mechanism🌿
04請求流程Browser Request Flow🌿
05Storage（Cookie / localStorage / IndexedDB）—🌱
06Web Worker / Service Worker—🌱
07WebSocketWebSocket🌿
08Server-Sent Events—🌱
09History API、URL—🌱

抽象層

F05 TypeScript

TypeScript 已成系列 → 子 roadmap：typescript

#主題連結stage
01為什麼要用 TypeScriptwhy🌿
02基本型別primitives🌿
03實戰 Patterns（Utility Types）01🌿
03-2泛型與 Type Guard02🌿
03-3Conditional / Mapped Types03🌿
04型別進階：Template Literal、Infer、Variance—🌱
05跟後端 contract 對齊（OpenAPI / Zod）—🌱

F06 React 與 Framework

#主題連結stage
01React 應用架構01🌿
02Custom Hooks、效能、專案結構02🌿
03React Hooks 基礎react-hooks🌿
04Framework 比較（Vue / Svelte / Solid / Qwik）—🌱
05Meta-framework（Next / Nuxt / SvelteKit / Astro）—🌱

前端框架擴充策略（新結構：frontend/framework/{name}/，跟後端對稱）

現有：frontend/typescript/（13 子題，5 🌿）；frontend/react-architecture*.md 2 篇待搬入

預計觸發子目錄（詳見 CH6 framework ROADMAP）：

優先度Framework子目錄內容重點
🔴Reactfrontend/framework/react/Hooks 進階、Custom Hook patterns、效能、狀態、RSC、測試
🔴Next.jsfrontend/framework/next/App Router、RSC、data fetching、deployment
🟡Vue 3frontend/framework/vue/Composition API、reactivity、Pinia
🟡Svelte 5frontend/framework/svelte/Runes、store、SvelteKit
🟢Solid / Nuxt / Astro / Qwik / Tailwindfrontend/framework/{name}/看需求觸發

選型文 vs 深入教學分工：

  • F06-04/05（上面）= 選型比較文（1 篇/生態，SEO 流量大）
  • frontend/framework/{name}/ = 深入教學（5~15 篇/框架）

優先順序：

  1. 🔴 React（既有 2 篇架構文待搬入；最熟；SEO 流量最大）
  2. 🔴 Next.js（2026 主流 Meta-framework）
  3. 🟡 Vue / Svelte
  4. 🟢 其他（等需求驅動）

架構層

F07 前端架構決策

#主題連結stage
01渲染策略總覽：CSR / SSR / SSG / ISR / RSC渲染策略🌿
02渲染決策框架：什麼場景選什麼rendering-decisions🌿
03Micro-frontend 架構—🌱
04Module Federation—🌱
05架構風格應用→ common/foundations/architecture-patterns/🌱

應用層・資料流（CH8）

詳細計畫 → ROADMAP.md（46 題，含 Dashboard / E-commerce / Admin / SaaS / Landing 五大萬用版型）

F08 狀態管理

#主題stage
01Context / useState 原生組合🌱
02Redux / Zustand / Jotai tradeoff🌱
03TanStack Query：server state vs client state🌱
04狀態機 XState🌱

F09 API 與通訊層

#主題連結stage
01REST 基礎API Methods、RESTful🌿
02GraphQL—🌱
03tRPC—🌱
04WebSocket 實戰WebSocket🌿
05Server-Sent Events—🌱
06API Client 架構（中介層 / retry / cache）—🌱
07錯誤處理策略（網路 / 業務 / UI 三層）—🌱
08前端認證處理（JWT / OAuth / Session）OAuth🌿
09Mock & Contract Testing（MSW / Pact）—🌱
10OpenAPI 自動生成 TS 型別—🌱

F10 表單與資料流

#主題stage
01Controlled vs Uncontrolled🌱
02React Hook Form + Zod🌱
03複雜表單策略（多步、條件顯示、陣列欄位）🌱

應用層・效能與工程化（CH9）

詳細計畫 → ROADMAP.md（40 題，含 Core Web Vitals / Bundle / npm 發布 / Monorepo / 部署）

F11 前端效能

#主題連結stage
01Core Web Vitals 與 LighthouseLighthouse、CWV🌿
02Code Splitting、Lazy Loading—🌱
03Memo、虛擬列表（virtualization）—🌱
04圖片優化（srcset / WebP / AVIF / lazy）—🌱
05RUM 與 Web Vitals 回傳—🌱

F12 建置工具與工程化

#主題連結stage
01為什麼需要 Bundlerwhy-bundlers🌿
02npm 常用指令npm-commands🌿
03Webpack / Vite / Turbopack / esbuild / SWC—🌱
04Monorepo vs Multi-repoMonorepo🌿
05Package 發布到 npm—🌱

F13 部署與 DX

#主題stage
01環境變數分層（build-time vs runtime、.env 管理）🌱
02部署平台（Vercel / Netlify / Cloudflare Pages / GitHub Pages）🌱
03Preview deployment 工作流🌱
04CDN 與 Edge 運算🌱
05版本號、Cache Busting、Source Map 管理🌱
06前端 CI/CD 流程（→ management/engineering-process/ + common/quality/standards/06-good-cicd）🌱

品質與跨切面

F14 測試

#主題連結stage
01單元測試（Jest / Vitest）Vitest🌿
02E2E（Playwright）Playwright🌿
03Testing Library、MSW—🌱
04測試策略總覽Testing Strategy🌿
05TDD / BDD / SDDSDD🌿

F15 資安

#主題連結stage
01前端資安總覽Web Security🌿
02XSS（儲存型 / 反射型 / DOM 型）—🌱
03CSRF 與 SameSite Cookie—🌱
04CSP（Content Security Policy）—🌱
05Cookie 安全（Secure / HttpOnly / SameSite）—🌱
06依賴掃描（Dependabot / Snyk）—🌱

F16 無障礙（A11y）

#主題stage
01ARIA 基礎🌱
02鍵盤導航與 focus 管理🌱
03Screen reader 測試🌱
04顏色對比與視覺可及性🌱
05Lighthouse A11y 稽核🌱

F17 Mobile / Cross-platform

#主題stage
01Responsive vs Adaptive 設計🌱
02PWA（Progressive Web App）🌱
03Electron / Tauri 桌面🌱
04React Native 入口🌱
05Flutter 入口🌱

F18 DevTools 技能

#主題stage
01Chrome DevTools：Network tab 全面用法🌱
02Performance 剖析 / FPS 分析🌱
03Memory / Heap snapshot🌱
04React DevTools / Redux DevTools🌱
05Source map debugging🌱

F19 Design System（里程碑）

做出 Design System 通常代表前端能力走到成熟階段。涵蓋前面所有層的綜合應用。

#主題stage
01元件 API 設計原則🌱
02Design Token 與 Theming🌱
03Storybook 元件文件🌱
04打包、Tree Shaking、npm 發布🌱

F20 觀測與錯誤追蹤

#主題stage
01Sentry 整合🌱
02前端 Log 策略🌱
03RUM（Real User Monitoring）🌱

F21 SEO pointer

SEO 完整 roadmap 在 SEO 系列（12 篇）。前端工程師必看：

實作練習（連到 walkthroughs/）

知識要靠練習才能真正吸收。以下練習完整走法會放在 walkthroughs/，每個 walkthrough 都會引用上面 F01~F20 的文章。

無框架建站系列

從零用 HTML/CSS/JS 做完整網站，知道沒框架時要自己解什麼問題。

  • Landing page（純靜態）
  • 加互動：表單驗證、Modal、Tab
  • SPA 路由（History API）
  • Reactive state（觀察者模式）
  • Web Component 元件化
  • 迷你 template engine

造自己的工具系列

造出來才懂框架在做什麼。

  • 迷你 Tailwind（utility CSS 自動生成）
  • 迷你 fetch client（攔截 / 快取 / 重試）
  • 迷你 state store
  • 迷你 test runner
  • 迷你 bundler
  • 迷你 React（Virtual DOM + Reconciliation）

Level 1~5 實作路徑

每一級做一個專案，做完才升級：

  1. Todo List — 元件、狀態、事件
  2. 個人部落格 SSR/SSG — 路由、SEO、Markdown（相關：01、SEO）
  3. 電商前台 — API 串接、購物車、表單驗證、RWD
  4. 管理後台 Dashboard — 權限、表格、圖表、WebSocket
  5. Design System — 元件設計、a11y、效能、打包發布

策展地圖

跨目錄相關內容（前端視角）

這個 roadmap 只列主題知識。當你要找前端相關的其他內容類型：

實作練習 → walkthroughs/

  • W01 無框架建站（6 集）— 純 HTML/CSS/JS
  • W02 造自己的工具（6 集）— 迷你 Tailwind / 迷你 React
  • W03 Level 1~5（5 個專案）— Todo / 部落格 / 電商 / Dashboard / Design System

技術系統案例 → case-studies/

前端工程師會感興趣的：

  • C01 社群/動態（Twitter Timeline、Instagram Feed）
  • C02 影音串流（Netflix 前端）
  • C06 電商（Shopify 前端）

商業系統分析 → case-studies/business/

前端要懂商業邏輯才做得好：

  • B01 電商金流（狀態機影響 UI 設計）
  • B02 SaaS 訂閱（升級/降級 UI）
  • B03 會員忠誠度（UI 呈現優惠券疊加）

運維踩雷 → ops-notes/

  • O10 前端部署坑（3 案例）— SPA base path / SSR healthcheck / .dockerignore

軟實力 → common/people/soft-skills/

前端工程師日常：

  • SS01 歸納收斂（需求拆解：把模糊設計稿變成 ticket）
  • SS02 跟設計師協作溝通
  • SS04 書寫（PR description、spec）
  • SS05 Code Review 互動

體檢清單 → common/quality/standards/

程式架構 → common/foundations/architecture-patterns/

  • A04 MVC / MVVM（前端常用）
  • A09 Microservices（配合 F07 Micro-frontend）

進度統計

  • 主題群：21（F01~F21）+ 3 系列實作練習
  • 總子題：約 127
  • 🌿 growing：46
  • 🌱 seed：79
  • 🌳 mature：2

架構設計說明

本 roadmap 按五層架構組織，避免把知識主題跟練習主題混層：

層內容範圍
基礎層F01~F04HTML / CSS / JS / 瀏覽器平台
抽象層F05~F06型別系統 / 框架
架構層F07架構決策（渲染 / MFE / 風格）
應用層・資料流F08~F10（CH8）狀態 / API / 表單 / 業務版型
應用層・工程化F11~F13（CH9）效能 / Bundler / 部署 / DX
品質與跨切面F14F19（CH10CH15）測試 / 資安 / A11y / Mobile / DS / 觀測
工具 DX 層F18 + AI（CH16~CH17）DevTools / AI 輔助
職涯與生態CH18~CH19職涯面試 / 生態系
SEO pointerF21連到 common/tooling/seo/ 目錄
實作驅動walkthroughs/不在知識層級，獨立放

此資料夾下有 6 條筆記。

關係圖譜