JavaScript

Stage 9: Production Frontend ​

Stage Icon

1. Tổng quan Stage (Stage Overview) ​

Mục tiêu ​

Stage 8 đã giúp người học:

text
JavaScript
→ Browser
→ Network
→ TypeScript
→ Tooling
→ React

Nhưng một React application chạy được chưa đồng nghĩa với một production product.

Stage 9 chuyển trọng tâm từ:

“Feature chạy đúng.”

sang:

“Feature hoạt động tốt với user thật, thiết bị thật, network thật và failure thật.”

Mental model:

text
                    PRODUCTION FRONTEND

User
 │
 ├── Desktop
 ├── Mobile
 ├── Slow Network
 ├── Keyboard
 ├── Screen Reader
 ├── Old Device
 └── Unexpected Input
          │
          ▼
       Frontend
          │
 ┌────────┼────────┐
 ▼        ▼        ▼
UX      Quality   Reliability
 │        │        │
A11y    Testing   Error Handling
Mobile  E2E       Recovery
SEO     CI        Offline
Perf    Regression Production

Stage này là cầu nối trực tiếp từ:

text
Frontend Engineer
        ↓
Production-capable Engineer

và chuẩn bị cho:

text
Stage 10 — Next.js / Full-stack Frontend
Stage 11 — Performance / Security
Stage 12 — Architecture
Stage 13 — Production Engineering

2. Phạm vi Kiến thức & Mô-đun (Scope & Modules) ​

Stage 9 gồm 8 Modules / 39 Lessons:

text
9.1 Accessibility Engineering
9.2 Form Engineering
9.3 Responsive & Mobile Engineering
9.4 SEO & Discoverability
9.5 Testing Strategy
9.6 PWA & Offline
9.7 Production Error Handling
9.8 Product Quality & Release Readiness

3. Dự án Thực hành (Stage Project) ​

4. Tiêu chí Hoàn thành & Đầu ra (Exit & Prerequisites) ​

  • Điều kiện tiên quyết (Prerequisites): Hoàn thành Stage 8
  • Cấp bậc đầu ra (Exit Level): Production UX & QA Mastered (L6-L7)

Tiêu chí kiểm thử năng lực thực tế: ​

Accessibility ​

  • [ ] Xây accessible form.
  • [ ] Keyboard navigation hoạt động.
  • [ ] Focus management đúng.
  • [ ] Modal có focus trap + restoration.
  • [ ] Screen reader semantics đúng ở mức practical.
  • [ ] Dùng ARIA hợp lý.
  • [ ] Pass automated a11y baseline.

Forms ​

  • [ ] Model form state.
  • [ ] Controlled/uncontrolled trade-off.
  • [ ] Schema validation.
  • [ ] Async validation.
  • [ ] Autosave.
  • [ ] Multi-step form.
  • [ ] Optimistic submission.

Mobile ​

  • [ ] Responsive layout.
  • [ ] Touch/pointer handling.
  • [ ] Mobile keyboard handling.
  • [ ] Safe-area awareness.
  • [ ] Network degradation handling.

SEO ​

  • [ ] Dynamic metadata.
  • [ ] Canonical.
  • [ ] Sitemap / robots.
  • [ ] JSON-LD.
  • [ ] Open Graph.
  • [ ] SEO-safe routing.

Testing ​

  • [ ] Unit tests.
  • [ ] Integration tests.
  • [ ] E2E tests.
  • [ ] Network mocking.
  • [ ] Debug flaky test.
  • [ ] Critical path coverage.

PWA ​

  • [ ] Service Worker lifecycle.
  • [ ] Cache strategy.
  • [ ] Offline data.
  • [ ] Offline cart.
  • [ ] Reconnect/sync awareness.

Reliability ​

  • [ ] Error taxonomy.
  • [ ] Graceful degradation.
  • [ ] Recovery strategy.
  • [ ] User-safe errors.
  • [ ] Error reporting.

Release Quality ​

  • [ ] Quality gates.
  • [ ] Regression detection.
  • [ ] Release checklist.
  • [ ] Feature risk assessment.