Lesson 12 — Architecture and production boundaries¶
Objective¶
Defend a deployable architecture across accessibility, security, reliability, rendering strategy, and observability.
Prerequisites¶
Lesson 11 — Rendering performance and profiling. You should be able to profile and optimize React applications.
Mental Model¶
React is a UI library, not an architecture. Boundaries should follow change, ownership, trust, and operational failure—not arbitrary folders.
Concept¶
Architecture is the set of boundaries that let teams move independently. Group code by what changes together and who owns it. Distinguish client state, server state, route state, and UI state. SPA, SSR, and streaming each trade simplicity, time-to-interactive, and hosting complexity.
Example¶
src/
features/
topics/
components/
hooks/
types.ts
sessions/
shared/
ui/
routing/
repository/
api.ts
Real-World Usage¶
Multi-team products, design systems, public-facing sites, and regulated applications where trust boundaries and observability matter.
Common Mistakes¶
- Organizing files by type (
components/,hooks/) so everything imports across the app. - Treating client-side validation as trusted.
- Building SSR for a static dashboard that does not need it.
Mini Lab¶
Task¶
Draw boundaries for routes, domain state, server state, transport validation, authentication, and telemetry. Evaluate SPA, SSR, and streaming tradeoffs. Add a route error strategy and a production readiness review.
Constraints¶
- Keyboard and screen-reader paths are explicit.
- Untrusted content is never injected as HTML without sanitization.
- Authorization is enforced by the server.
- Errors have user recovery and operational diagnostics.
- Deployment base paths and caching are tested.
Expected Result¶
A design record documents the chosen architecture, the rejected options, and the failure-mode plan. The app builds and deploys under the configured base path.
Hints¶
Start from ownership and change frequency. Avoid building infrastructure for hypothetical scale until the product demands it.
Knowledge Check¶
- Where are the trust boundaries?
- When does SSR improve the product?
- How do you evolve this app across teams?
Challenge¶
A security audit finds that an admin panel feature is gated only by client-side routing. What is the smallest, most robust change, and why is client-side gating never enough?
Summary¶
Architecture follows ownership and trust. React is a layer in a larger system; production concerns extend beyond the component tree.