Cách học hiệu quả
Mỗi module trong lộ trình Master Frontend đều yêu cầu 3 vòng học xoắn ốc. Trang này giải thích phương pháp để bạn học sâu — không hời hợt, không chạy theo số lượng.
Spiral Learning — 3 vòng
Không học theo đường thẳng. Mỗi module được đi qua 3 lần, mỗi lần sâu hơn:
| Vòng | Mức độ | Hoạt động |
|---|---|---|
| Vòng 1: Foundation | Biết nó là gì | Đọc tài liệu gốc, viết code demo, hiểu cơ chế hoạt động |
| Vòng 2: Application | Biết dùng nó trong thực tế | Áp dụng vào project, xử lý edge case, đọc source code thư viện |
| Vòng 3: Mastery | Biết tại sao nó thiết kế như vậy | Re-implement từ đầu, phân tích trade-off, dạy lại người khác |
Ví dụ với Module 0.1 (JS Engine):
- V1: Đọc "You Don't Know JS", vẽ Event Loop
- V2: Benchmark object shape, debug race condition, đọc V8 blog
- V3: Edge Case Lab (eval() phá vỡ hidden class), War Story, Teach Back
Deliberate Practice — 4 hoạt động bắt buộc mỗi tuần
| Hoạt động | Tần suất | Mục đích |
|---|---|---|
| Source Code Reading | 2–3 giờ/tuần | Đọc source Zustand, TanStack Query, Radix, React Fiber, V8 blog |
| Edge Case Lab | 1 buổi/tuần | "Điều gì xảy ra nếu...", viết test cho edge case, simulate failure |
| War Story Documentation | 1 bài/tuần | Bối cảnh → Ràng buộc → Lựa chọn → Quyết định → Trade-off → Bài học |
| Teach Back | 1 buổi/tuần | Giải thích cho junior tưởng tượng hoặc viết blog kỹ thuật |
Exit Criteria
Mỗi module có Exit Criteria cụ thể. Không được sang module tiếp theo nếu chưa đạt. Đây là nguyên tắc quan trọng nhất của lộ trình.
Ví dụ Exit Criteria một số module:
| Module | Exit Criteria |
|---|---|
| 0.1 JS Engine | Giải thích được vì sao Promise.then chạy trước setTimeout(..., 0). Debug được memory leak qua Chrome DevTools Memory tab. |
| 0.2 Browser Rendering | Vẽ được Rendering Pipeline từ HTML đến Pixel. Giải thích được tại sao transform: translate3d mượt hơn top: 10px. |
| 0.3x Web Components | Viết được custom element với Shadow DOM, slot, và ::part(). Xử lý được form participation và event retargeting. |
| 0.6 HTTP & Networking | Giải thích được tại sao HTTP/2 multiplex nhưng vẫn cần domain sharding. Phân biệt preload vs prefetch vs preconnect. |
| 2.2 Next.js App Router | Giải thích được 4 loại cache và cách invalidate. Không thêm 'use client' ở root layout. |
| 2.4 Accessibility | Landing page pass WCAG 2.1 AA audit (axe DevTools 0 critical/serious). Navigate được toàn bộ site bằng keyboard. |
Milestone đánh giá năng lực
Đây là các cột mốc định tính giúp bạn biết mình đang ở đâu trên hành trình:
| Milestone | Mô tả | Gợi ý Stage đạt được |
|---|---|---|
| 1 | Debug được 1 bug production thực mà không cần Google | Stage 0 (sau Module 0.7) |
| 2 | Review PR của người khác, tìm ra lỗi security/performance họ không thấy | Stage 2–3 |
| 3 | Viết ADR với ít nhất 3 lựa chọn đã cân nhắc, mỗi lựa chọn có rủi ro cụ thể | Stage 4–5 |
| 4 | Tự implement 1 thư viện nhỏ (giống Zustand, Virtual Scroll, hoặc 1 phần React) | Stage 5–6 |
| 5 | Xử lý được incident 2 giờ sáng (simulate) — quyết định rollback/feature flag/fix trong 10 phút | Stage 7 |
Checkpoint tự đánh giá (mỗi 3 tháng)
Dùng bảng này để tự kiểm tra định kỳ. Nếu trả lời "Không" cho câu nào, quay lại module tương ứng.
| Câu hỏi | Nếu trả lời "Không" → Quay lại |
|---|---|
| Tôi có giải thích được Event Loop cho junior không? | Stage 0, Module 0.1 |
| Tôi có vẽ được Browser Rendering Pipeline không? | Stage 0, Module 0.2 |
| Tôi có giải thích được HTTP/2 vs HTTP/3 không? | Stage 0, Module 0.6 |
| Tôi có giải thích được Stacking Context và Containing Block không? | Stage 0, Module 0.2 |
| Tôi có debug được bug production trong 30 phút không cần Google không? | Stage 0, Module 0.7 |
| Tôi có debug được hydration mismatch không cần Google? | Stage 2, Module 2.2 |
| Tôi có viết được component accessible từ đầu không? | Stage 2, Module 2.4 |
| Tôi có đo và giảm INP trên app thực không? | Stage 2, Module 2.13 |
| Tôi có setup được CI/CD với preview deploy không? | Stage 2, Module 2.14 |
| Tôi có giải thích được Dark Launch vs Canary không? | Stage 4, Module 4.8 |
| Tôi có setup được OpenTelemetry trace xuyên suốt không? | Stage 4, Module 4.10 |
| Tôi có setup được RUM và Alerting không? | Stage 4, Module 4.10 |
| Tôi có tích hợp LLM API với streaming và function calling không? | Stage 5, Module 5.5 |
| Tôi có migrate được jQuery → React không downtime không? | Stage 7, Module 7.3 |
| Tôi có viết được ADR với 3 lựa chọn đã cân nhắc không? | Stage 6, Module 6.8 |
Core Loop — Vòng xoắn ốc vĩnh cửu
Roadmap này không kết thúc ở Stage 8. Sau khi hoàn thành, bạn quay lại Stage 0 với góc nhìn mới — lần này đọc source code thay vì tutorial, đọc lại YDKJS và hiểu sâu hơn.
Vòng 1: Foundation (tutorial, demo)
→ Vòng 2: Application (project, source code)
→ Vòng 3: Mastery (re-implement, teach back)
→ Vòng 1 lần 2: (đọc lại, hiểu sâu hơn)
→ ...Sau mỗi Project (Stage 2–7), bắt buộc viết ít nhất 1 ADR và 1 War Story trước khi sang Stage tiếp theo.
Tài liệu tham khảo cho Deep Dive
Sách bắt buộc
| Tài liệu | Tác giả | Cách đọc |
|---|---|---|
| "You Don't Know JS" | Kyle Simpson | Đọc 3 lần: lần 1 nhanh, lần 2 ghi chú, lần 3 dạy lại |
| "How Browsers Work" | HTML5 Rocks / web.dev | Vẽ pipeline sau mỗi chương |
| "High Performance Browser Networking" | Ilya Grigorik | Đọc theo module HTTP, DNS, TLS, HTTP/2 |
| React Source Code | facebook/react | Đọc ReactFiberWorkLoop.js, ReactHooks.js |
| Next.js Source Code | vercel/next.js | Đọc caching mechanism trong next/src/server/lib/ |
| Zustand Source Code | pmndrs/zustand | ~100 lines core — đọc để hiểu pub/sub pattern |
| TanStack Query Source Code | tanstack/query | Đọc caching mechanism, garbage collection |
| React Scheduler Source | facebook/react | Đọc packages/scheduler — task priority, lane-based |
Sách nên đọc
| Tài liệu | Tác giả | Ghi chú |
|---|---|---|
| "Effective TypeScript" | Dan Vanderkam | 62 items, mỗi item viết 1 demo |
| "Designing Data-Intensive Applications" | Martin Kleppmann | Ch 1–4 trước, sau đó đọc cả cuốn |
| OWASP Top 10 + Cheat Sheet | OWASP | Đọc và implement từng lỗ hổng trong demo app |
| "Inclusive Design Patterns" | Heydon Pickering | Accessibility từ gốc, không chỉ checklist |
| "The Design of Web APIs" | Arnaud Lauret | REST design, pagination, versioning |
Blog & Newsletter (theo dõi hàng tuần)
| Nguồn | Tại sao theo dõi |
|---|---|
| Overreacted — Dan Abramov | React core team, insights sâu về React internals |
| Kent C. Dodds Blog | Testing, React patterns, career advice |
| Vercel Engineering Blog | Next.js updates, best practices, case studies |
| Web.dev — Google | Web standards, Core Web Vitals, performance |
| Josh W Comeau Blog | CSS, React, animation — giải thích rất trực quan |
| WebAIM | Accessibility news, screen reader testing |
Repo mẫu & Open Source (đọc code, học pattern)
| Repo | Tại sao đọc |
|---|---|
| shadcn/ui | Cách tổ chức component, dùng Radix, Tailwind, TypeScript |
| TanStack Query | Source code để hiểu caching mechanism |
| Zustand | ~100 lines core — đọc để hiểu pub/sub pattern |
| Next.js Commerce | E-commerce template từ Vercel |
| Radix UI Primitives | Headless component, accessibility patterns |
| Vercel AI SDK | LLM integration, streaming, function calling |
Tư duy đúng đắn
"Không hời hợt, nghiên cứu sâu."
Với mindset này, bạn không còn "học để pass phỏng vấn" — bạn học để trở thành người mà người khác tìm đến khi production gặp vấn đề.
Quy tắc vàng:
- Không sang module sau khi chưa đạt Exit Criteria
- Không học vội để "kịp timeline"
- Không so sánh với người khác — chỉ so sánh với chính mình 3 tháng trước
- Phải giải thích được cho người khác — nếu không giải thích được, chưa hiểu sâu
➡️ Xem lộ trình chi tiết — Danh sách các Stage và module cụ thể.