Learning Path: Security and Reliability Architect
Target learner
This path is for engineers who want to make frontend systems safer under attack, partial outage, poor connectivity, bad dependencies, and product pressure. The goal is to turn security and reliability into design-time constraints instead of late-stage review items.
Prerequisites
You should understand HTTP, cookies, browser storage, auth flows, error boundaries, feature flags, accessibility fundamentals, monitoring, and release rollback basics.
Recommended chapter sequence
| Phase | Chapters | Outcome |
|---|---|---|
| Baseline | Part 0 security, testing, observability, delivery | Build practical vocabulary for browser trust boundaries and verification. |
| Platform | Part II networking, caching, event loop, mobile | Understand runtime failure modes. |
| Reliability | Part V and Part VIII | Design partial outage behavior, frontend SRE practices, accessibility, compliance, CSP, Trusted Types, and chaos drills. |
| Operational toolkit | Part XII and review packets | Use templates and checklists during real reviews. |
Six-week study plan
| Week | Focus | Required output |
|---|---|---|
| 1 | Threat model | Map attacker-controlled inputs, browser sinks, auth boundaries, and third-party scripts. |
| 2 | Security headers | Design CSP, frame, opener, referrer, and cookie policies for one app. |
| 3 | Reliability states | Define degraded, offline, retry, timeout, and partial-data behavior. |
| 4 | Observability | Add error, latency, security violation, and release correlation signals. |
| 5 | Incident practice | Run a simulated incident and write a postmortem. |
| 6 | Capstone | Complete the secure reliable account portal capstone. |
Required exercises
- Write a browser threat model for a dashboard.
- Write a CSP rollout plan using report-only mode and violation triage.
- Design a graceful degradation strategy for a failed search API.
- Create a frontend incident review packet.
Capstone project
Complete capstones/capstone-secure-reliable-account-portal. The final review must include threat model, session/auth model, CSP/security headers, third-party script register, accessibility gates, error-budget policy, degraded UX states, and incident runbook.
Portfolio artifacts
- Threat model
- Security header policy
- Reliability state machine
- Incident postmortem
- Accessibility verification notes
- Launch readiness checklist
Self-assessment rubric
Use rubrics/frontend-architect-rubric and emphasize security, reliability, accessibility, observability, and incident response rows. For specialized roles, add evidence from real or simulated incidents.
Review checklist
- Are browser trust boundaries explicit?
- Is authorization enforced server-side?
- Can unsafe third-party behavior be disabled quickly?
- Does degraded UX preserve user intent?
- Are incidents connected back to architectural guardrails?