Walkthroughs 詳細 ROADMAP

計畫文件，不會被 Quartz 渲染（無 frontmatter）。公開頁面 → walkthroughs/index.md 各系列知識 roadmap → frontend/ROADMAP.md / backend/（待）/ infra/（待）

本文件定位

walkthroughs/index.md 是公開頁，列出 W01–W08 的高階摘要。本 ROADMAP 是詳細規劃檔，每個 walkthrough 逐集展開：目標、起點終點、每集大綱、引用的 roadmap 章節、git 策略、坑點。

範圍切割（本輪）

狀態	範圍
🟢 已詳細展開	W01 無框架建站（6 集）、W02 造工具（6 集）、W03 前端 Level 1–5（5 專案）、W04 無 framework 後端（7 語言）、W05 後端 Level 1–5（5 專案）
🟡 高階描述	W06 全端整合、W07 Rust、W08 運維
🔴 暫停	所有 walkthroughs 實際寫作（等全部地圖畫完再啟動）

共通寫作原則

每個 walkthrough 系列的骨架

🎯 最終產物：做完能端給別人看的東西（URL / GitHub repo / 部署連結）
🧩 起點空白：從空資料夾 / npm init / mkdir 開始
📦 累積：每集接續前一集，不是獨立題目——git 分支 / tag 記錄每集終點
🔗 引用 roadmap：每集末尾列出「這集學到的 roadmap 章節」，wikilink 過去
⚠️ 坑點預告：這系列常見的誤解 / 走歪信號
🛠️ repo 規範：資料夾結構、檔案命名、README 寫法

每集固定結尾

# 這集學到的
（一句話 summary）
 
# 下集會加
（預告）
 
# 相關 roadmap
- [[frontend/xxx|xxx]]
 
# 完整代碼
GitHub repo 連結（tag: `w01-01`）

W01 前端・無框架建站系列（詳細展開）

🎯 系列目標

用純 HTML/CSS/JS（不裝任何 framework / 打包工具）做出一個完整可互動的網站，讓讀者親自感受「沒框架時要自己解什麼問題」。做完才會真正懂 React/Vue 是在幫你解決什麼。

🧩 起點 / 終點

起點：mkdir w01-no-framework && touch index.html — 什麼都沒有
終點：一個 6 頁 SPA，有路由、互動、狀態管理、可重用元件、模板引擎，全部自己手刻
部署：GitHub Pages（靜態檔）

📐 每集詳細大綱

W01-01 純 HTML/CSS/JS 做 Landing Page

項目	內容
🎯 做什麼	一頁式 Landing Page，HTML 語意 + CSS 佈局 + JS 表單驗證
⚙️ 技術	純 HTML5 標籤、Flexbox/Grid、原生 form validation
📚 引用 roadmap	F01 #02 語意化標籤 / F02 Flexbox/Grid / F03 DOM 操作
⚠️ 坑點	初學者常把所有東西塞 `<div>`；這集強制用 `<article>`/`<nav>`/`<main>`
💾 git	`tag: w01-01`

W01-02 加互動：表單驗證、Modal、Tab

項目	內容
🎯 做什麼	加 3 種互動：自訂表單驗證（`input:invalid`）、Modal（`<dialog>`）、Tab（`role="tablist"`）
⚙️ 技術	`<dialog>` 原生 API、ARIA 基本屬性、Event Delegation
📚 引用 roadmap	F01 表單 / F16 A11y / F03 Event
⚠️ 坑點	不用 Bootstrap Modal — 感受原生 `<dialog>` 的好用；Tab 不用 framework — 用 ARIA + Event Delegation
💾 git	`tag: w01-02`

W01-03 自己做 SPA 路由（History API）

項目	內容
🎯 做什麼	手刻 client-side router，3 頁切換不 reload
⚙️ 技術	`history.pushState` / `popstate` / hash routing 對比
📚 引用 roadmap	F04 #09 History API
⚠️ 坑點	刷新後 404（SPA 部署常見坑）— 這集實戰展示 + GitHub Pages `404.html` 解法
💾 git	`tag: w01-03`

W01-04 自己做 reactive state（觀察者模式）

項目	內容
🎯 做什麼	迷你 state container，`subscribe` / `notify`，DOM 綁 state 自動更新
⚙️ 技術	Observer pattern、Proxy（可選加強版）
📚 引用 roadmap	F03 Closure / F08 狀態管理
⚠️ 坑點	這集讓讀者感受：Vue 的 reactivity / Zustand 的 subscribe 不是魔法
💾 git	`tag: w01-04`

W01-05 自己做 Web Component 元件化

項目	內容
🎯 做什麼	把前幾集的 Modal / Tab 包成 `<my-modal>` / `<my-tab>` Web Component
⚙️ 技術	Custom Element、Shadow DOM、Slot
📚 引用 roadmap	F01 #27 Web Components
⚠️ 坑點	Shadow DOM 的樣式隔離會讓 Tailwind 不作用 — 這是 Web Component 的 trade-off
💾 git	`tag: w01-05`

W01-06 自己做迷你 template engine

項目	內容
🎯 做什麼	寫一個 `{{ variable }}` / `{{#if}}` / `{{#each}}` 的 template engine
⚙️ 技術	字串解析、`Function()` 動態編譯（或純字串 replace 版）
📚 引用 roadmap	F03 closure / eval 風險
⚠️ 坑點	`innerHTML` 的 XSS 風險（銜接 CH11）
💾 git	`tag: w01-06`

W02 前端・造自己的工具系列（詳細展開）

🎯 系列目標

造出來才懂 framework 在做什麼。每集做一個迷你版工具，跟 production 工具比較 — 讓讀者具體感受 Tailwind / TanStack Query / Zustand / Vite / React 為什麼長那樣。

🧩 起點 / 終點

起點：每集一個獨立 repo，用前面 W01 累積的知識
終點：6 個能跑的 mini-tool，每個都有 README 對照 production 版差在哪
部署：不部署，純 demo / unit test 跑過

📐 每集詳細大綱

W02-01 迷你 Tailwind（utility CSS 自動生成）

項目	內容
🎯 做什麼	掃 HTML class → 生 CSS utility（例如 `m-4` → `.m-4 { margin: 1rem }`）
⚙️ 技術	glob 掃檔 / 正則解析 / 輸出 CSS
📚 引用 roadmap	F02 #40 Tailwind 原理 / F12 Build
⚠️ 坑點	Tailwind v4 用 Rust 解析器 — 這集只做概念版；production 的 JIT 比這複雜得多

W02-02 迷你 fetch client（攔截 / 快取 / 重試）

項目	內容
🎯 做什麼	包 fetch：攔截器、retry with backoff、in-memory cache、request dedup
⚙️ 技術	Promise chain、WeakMap cache、AbortController
📚 引用 roadmap	F09 API Client 架構
⚠️ 坑點	TanStack Query 不是只有 cache — 它處理 stale-while-revalidate、garbage collection、subscribe，這集只做最淺層

W02-03 迷你 state store

項目	內容
🎯 做什麼	造一個有 `get` / `set` / `subscribe` / `persist` 的 store（Zustand 風格）
⚙️ 技術	Observer pattern、`localStorage` persist、middleware
📚 引用 roadmap	F08 Redux/Zustand tradeoff
⚠️ 坑點	Zustand 用 Immer 做 immutable update — 這集用手動 spread，讓讀者感受 Immer 的價值

W02-04 迷你 test runner

項目	內容
🎯 做什麼	跑一個 `describe` / `it` / `expect` 最小版本，支援 async
⚙️ 技術	函式當值、try/catch、assert 實作
📚 引用 roadmap	CH10 #08 Jest/Vitest
⚠️ 坑點	Vitest 快是因為跑在 Vite 上用 native ESM + worker — 這集只做 sync runner 版

W02-05 迷你 bundler（理解 module resolution）

項目	內容
🎯 做什麼	處理 `import` / `export` 解析、dependency graph、output 單一 bundle
⚙️ 技術	AST（用 `acorn`）、topological sort
📚 引用 roadmap	F03 #05 why-bundler / F12 bundler
⚠️ 坑點	Webpack / Rollup / Vite 的差異（loader / plugin / dev-server）這集暫不碰

W02-06 迷你 React（Virtual DOM + Reconciliation）

項目	內容
🎯 做什麼	實作 `createElement` / `render` / `useState` 極簡版，跑起來一個 Counter
⚙️ 技術	VDOM diff、Fiber 簡化版、hook closure
📚 引用 roadmap	CH6 React 原理
⚠️ 坑點	真正 React 有 Concurrent / Suspense / Transition — 這集不碰，只做 legacy mode

W03 前端・Level 1–5 專案路徑（詳細展開）

🎯 系列目標

實戰應用型。每級做一個完整專案，練習的技能逐級上升（從元件到整合）。做完可以直接放 portfolio。

🧩 Level 升級規則

做完 L1 才 L2（不要跳級）
每個 Level 有「及格 = 功能跑起來」vs「精通 = 效能 / a11y / 測試都顧到」兩個目標
每個 Level 獨立 repo，最後 L5 整合成 monorepo

📐 每級詳細大綱

L1：Todo List

項目	內容
🎯 能力證明	元件拆分、狀態管理、事件處理
⚙️ 技術	React + TypeScript + Vite + localStorage
📚 引用 roadmap	F05 TS / F06 React / F08 狀態
✅ 及格	加 / 刪 / 編輯 / filter
⭐ 精通	RTL 測試、keyboard-only 操作、undo/redo
🚫 走歪信號	用 Redux 做 Todo（over-engineer）

L2：個人部落格（SSR/SSG）

項目	內容
🎯 能力證明	路由、SEO、Markdown 處理、SSG vs SSR 理解
⚙️ 技術	Next.js App Router + MDX + Tailwind
📚 引用 roadmap	F06 Meta-framework / CH7 渲染策略 / SEO
✅ 及格	列表頁 + 文章頁 + SEO meta
⭐ 精通	CWV 全綠、OG 圖動態生成、RSS、部署 Vercel
🚫 走歪信號	用 CSR-only 做部落格（SEO 爛）

L3：電商前台

項目	內容
🎯 能力證明	API 串接、購物車、表單驗證、RWD
⚙️ 技術	Next.js + TanStack Query + RHF + Zod + shadcn/ui
📚 引用 roadmap	F09 API / F10 表單 / CH8 電商版型
✅ 及格	商品列表 + 購物車 + Checkout
⭐ 精通	轉換率優化、optimistic update、a11y、mobile 手勢
🚫 走歪信號	購物車塞 Redux（應該用 URL state + localStorage）

L4：管理後台 Dashboard

項目	內容
🎯 能力證明	權限、複雜表格、圖表、WebSocket 即時更新
⚙️ 技術	TanStack Table + Recharts + WebSocket / SSE
📚 引用 roadmap	CH8 Admin 版型 / Dashboard 版型
✅ 及格	登入、CRUD、圖表、RBAC
⭐ 精通	virtualization（10 萬列不卡）、bulk action、audit log
🚫 走歪信號	重現 Bootstrap Admin 的 2010 感設計（→ 見 CH14 #46 走歪信號）

L5：Design System（capstone）

項目	內容
🎯 能力證明	元件設計、a11y、打包、npm 發布
⚙️ 技術	Radix UI + CVA + Storybook + Changeset + Turborepo
📚 引用 roadmap	CH14 DS / F16 A11y / CH9 npm 發布
✅ 及格	10 個核心元件 + Storybook 文件 + 發 npm
⭐ 精通	Design Token（W3C DTCG）、a11y 全綠、視覺迴歸測試、自動 release-please
🚫 走歪信號	直接抄 shadcn/ui 沒改 token（沒建立自己的 DS）

W06–W08 高階描述（本輪不展開）

W04 後端・無 framework 從零建站（詳細展開）

🎯 系列目標

用語言 stdlib 最小依賴做 HTTP server，讓讀者感受 framework 在幫你做什麼。做完回去用 Express / FastAPI / Gin，你會知道每一行 app.get(...) 背後是什麼。

🧩 起點 / 終點

起點：mkdir w04 && {go.mod / package.json / pyproject.toml / Cargo.toml}——只能用 stdlib 跟極少第三方
終點：可跑的 HTTP server，支援 routing、JSON、middleware chain、graceful shutdown
範圍：本輪詳細展開 Node / Python / PHP 三語言（你熟的），Java / Go / C# / Rust 高階佔位

📐 詳細集數（W04 series）

W04-01 純 Node.js（`http` module）🔴

項目	內容
🎯 做什麼	用 `http.createServer` 手刻 router / middleware chain / JSON parsing
⚙️ 技術	Node.js stdlib only（不裝 npm package）
📚 引用	B02 TCP/HTTP、B04 FD/Signal、B06 Framework 價值
坑點	stream chunk handling、body parser、content-type、CORS 手刻

W04-02 純 Python（`http.server` / socket）🔴

項目	內容
🎯 做什麼	用 `http.server` 或直接 socket；對比 async 版（asyncio + aiohttp-raw）
⚙️ 技術	stdlib only、選擇性加 asyncio
📚 引用	B01 並行模型、B02 TCP/HTTP、B04 FD
坑點	GIL 影響、WSGI vs ASGI 協議要自己處理

W04-03 純 PHP（no framework）🔴

項目	內容
🎯 做什麼	原生 PHP + `$_SERVER` + `fopen`；對比 Swoole 版
⚙️ 技術	PHP 內建 server（`php -S`）或 Swoole
📚 引用	B02 HTTP、B04 FPM 模型、B06 PHP framework 演進
坑點	傳統 PHP 是 per-request 生命週期、Swoole 改變遊戲規則

W04-04 純 Go（`net/http`）🟡 高階展開

項目	內容
🎯 做什麼	`net/http` 手刻 router；對比 Gin / Echo
⚙️ 技術	stdlib + `ServeMux`（Go 1.22+ 增強版）
📚 引用	B02、B04 Goroutine、B06 Go framework

W04-05 純 Java（`ServerSocket` / `com.sun.net.httpserver`）🟡

項目	內容
🎯 做什麼	從 Socket 到 HttpServer 手刻；對比 Spring Boot
⚙️ 技術	Java SE only、thread pool、selector channel
📚 引用	B02、B04、B06 JVM framework

W04-06 純 C#（`HttpListener` / Kestrel raw）🟡

項目	內容
🎯 做什麼	`HttpListener` minimal HTTP server；對比 ASP.NET Core minimal API
⚙️ 技術	.NET BCL only
📚 引用	B02、B04、B06 .NET framework

W04-07 純 Rust（TCP socket + 手動 parse HTTP）🟢 遠期

項目	內容
🎯 做什麼	`TcpListener` 手刻 HTTP parser；對比 Axum
⚙️ 技術	tokio + 手寫 parser
📚 引用	B01 Ownership、B02、B06 Rust framework

W05 後端・Level 1–5（詳細展開）

🎯 系列目標

實戰後端產品開發。每級做一個完整後端服務，技能累積從 CRUD 到微服務拆分。L5 完成後你知道怎麼從 monolith 長出成熟 API 架構。

🧩 Level 升級規則

做完 L1 才 L2
每級有「及格 = 功能跑起來」vs「精通 = 壓測 + 觀測 + 資安都顧到」
L5 是 capstone，整合前面所有能力

📐 每級詳細大綱

L1：RESTful User CRUD

項目	內容
🎯 能力證明	路由、ORM、資料驗證、錯誤處理、分頁
⚙️ 技術	FastAPI + SQLAlchemy + Pydantic + PostgreSQL（或 Express + Prisma）
📚 引用	B09 / B03 / B11 / B06
✅ 及格	CRUD 5 endpoint + pagination + error handling
⭐ 精通	OpenAPI 自動生成 SDK、pytest 覆蓋率 80%、Docker compose 本機起
🚫 走歪	用 dict 存使用者、密碼明碼、沒 validation

L2：Auth 系統（JWT + RBAC）

項目	內容
🎯 能力證明	JWT 生命週期、RBAC 資料模型、middleware 保護、refresh token rotation
⚙️ 技術	JWT RS256 + Redis token blacklist + RBAC middleware
📚 引用	B10 / B07 auth core + middleware
✅ 及格	Login / Logout / Refresh / Protected endpoint / Role check
⭐ 精通	非對稱簽名（RS256）、token blacklist、event-driven revocation（user.deleted event）、audit log
🚫 走歪	JWT 塞密碼、expiration 30 天、只用 HS256 共用 secret

L3：檔案上傳 + 圖片處理

項目	內容
🎯 能力證明	Multipart / streaming / MinIO / 背景影像處理
⚙️ 技術	Pre-signed URL + MinIO + 背景 worker 做 resize
📚 引用	B14 / B12
✅ 及格	直傳 S3 / MinIO + 圖片縮圖 + 下載 pre-signed
⭐ 精通	MIME magic number 驗證、async thumbnail worker、CDN 整合
🚫 走歪	檔案存 DB（blob）、本地 disk、沒 size limit

L4：任務佇列 + 通知

項目	內容
🎯 能力證明	MQ / Worker / Retry / DLQ / Idempotency
⚙️ 技術	RabbitMQ（或 Redis Streams）+ Celery / BullMQ + Email worker
📚 引用	B12 / B07 messaging
✅ 及格	publish event → worker consume → 送 email
⭐ 精通	Outbox pattern、DLQ 監控、idempotency key、exponential backoff retry
🚫 走歪	沒 idempotent consumer、無 DLQ、retry 無上限

L5：拆微服務（API Gateway + 多服務 + 壓測）

項目	內容
🎯 能力證明	Monolith → 3 services、Kong 統一入口、跨服務 auth、observability、壓測驗證
⚙️ 技術	Kong Gateway + User/Auth/Post service + Prometheus + Grafana + Loki + k6（對標 proto）
📚 引用	B08 / B17 / B19 / B07 全套共用規範
✅ 及格	3 服務跑起來 + Kong 路由 + 統一 auth + 基本 metrics
⭐ 精通	Event-driven（token revocation）、壓測 5 scenarios、HPA、blue-green、完整 DLQ 監控
🚫 走歪	Distributed monolith（強耦合）、3 服務共用一個 DB、沒 observability

L5 本質上是 proto 壓測平台的教學版 — proto repo 就是這個成品。

W06 全端整合（capstone 級）

等前端 + 後端 + infra 都成熟後啟動。

#	主題
01	Blog：Vite + React + Fastify
02	SaaS：Next.js + FastAPI + PostgreSQL
03	E-commerce：Nuxt + Spring Boot + Redis
04	即時：SvelteKit + Go + WebSocket

W07 Rust 系列（長期）

等所有主 ROADMAP 完工再啟動。把 proto 壓測平台用 Rust 重做，web UI + terminal UI 雙版本。

W08 運維 / Infra 實作

等 infra ROADMAP 規劃輪次展開。

#	主題
01	本機 K8s（Kind / OrbStack）
02	GitLab CE 地端部署
03	Prometheus + Grafana + Loki
04	Kong Gateway

寫作優先順序

依「ROI / 學習遞進」排：

W01 無框架建站 — 前端學習核心，所有後續 walkthrough 的基礎
W03 L1 Todo — 最快有完整 portfolio 作品
W02 造工具 — 搭配 roadmap 深入某個主題（例如寫 F06 時搭配 W02-06 迷你 React）
W03 L2–L5 — 應用層進階
W04 / W05 — 等後端 roadmap
W06 / W07 / W08 — capstone 級

進度統計

W01–W03（前端，已詳細）：17 集
W04（後端無 framework，7 語言）：7 集
W05（後端 Level 1–5）：5 集
W06–W08（高階描述，等 infra 輪展開）：~15 集
合計：約 44 集
目前全部 🌱
預計啟動時間：全部 ROADMAP（前端 / 後端 / infra / 通用）畫完之後

跨系列連結

→ frontend/ROADMAP.md 主圖
→ backend/ROADMAP.md（待）
→ infra/ROADMAP.md（待）
→ 各 W 系列公開頁 → walkthroughs/index.md

Terry Yao's Blog

目錄

Walkthroughs 詳細 ROADMAP

本文件定位

範圍切割（本輪）

共通寫作原則

每個 walkthrough 系列的骨架

每集固定結尾

W01 前端・無框架建站系列（詳細展開）

🎯 系列目標

🧩 起點 / 終點

📐 每集詳細大綱

W01-01 純 HTML/CSS/JS 做 Landing Page

W01-02 加互動：表單驗證、Modal、Tab

W01-03 自己做 SPA 路由（History API）

W01-04 自己做 reactive state（觀察者模式）

W01-05 自己做 Web Component 元件化

W01-06 自己做迷你 template engine

W02 前端・造自己的工具系列（詳細展開）

🎯 系列目標

🧩 起點 / 終點

📐 每集詳細大綱

W02-01 迷你 Tailwind（utility CSS 自動生成）

W02-02 迷你 fetch client（攔截 / 快取 / 重試）

W02-03 迷你 state store

W02-04 迷你 test runner

W02-05 迷你 bundler（理解 module resolution）

W02-06 迷你 React（Virtual DOM + Reconciliation）

W03 前端・Level 1–5 專案路徑（詳細展開）

🎯 系列目標

🧩 Level 升級規則

📐 每級詳細大綱

L1：Todo List

L2：個人部落格（SSR/SSG）

L3：電商前台

L4：管理後台 Dashboard

L5：Design System（capstone）

W06–W08 高階描述（本輪不展開）

W04 後端・無 framework 從零建站（詳細展開）

🎯 系列目標

🧩 起點 / 終點

📐 詳細集數（W04 series）

W04-01 純 Node.js（http module）🔴

W04-02 純 Python（http.server / socket）🔴

W04-03 純 PHP（no framework）🔴

W04-04 純 Go（net/http）🟡 高階展開

W04-05 純 Java（ServerSocket / com.sun.net.httpserver）🟡

W04-06 純 C#（HttpListener / Kestrel raw）🟡

W04-07 純 Rust（TCP socket + 手動 parse HTTP）🟢 遠期

W05 後端・Level 1–5（詳細展開）

🎯 系列目標

🧩 Level 升級規則

📐 每級詳細大綱

L1：RESTful User CRUD

L2：Auth 系統（JWT + RBAC）

L3：檔案上傳 + 圖片處理

L4：任務佇列 + 通知

L5：拆微服務（API Gateway + 多服務 + 壓測）

W06 全端整合（capstone 級）

W07 Rust 系列（長期）

W08 運維 / Infra 實作

寫作優先順序

進度統計

跨系列連結

關係圖譜

反向連結

W04-01 純 Node.js（`http` module）🔴

W04-02 純 Python（`http.server` / socket）🔴

W04-04 純 Go（`net/http`）🟡 高階展開

W04-05 純 Java（`ServerSocket` / `com.sun.net.httpserver`）🟡

W04-06 純 C#（`HttpListener` / Kestrel raw）🟡