Frontend Systems — Production Reference

Not a tutorial. Not a framework comparison.
A structured reference for reasoning about frontend systems in production.

Each section explores architectural decisions, rendering strategies, performance trade-offs, and failure modes that emerge as systems scale.

← Previous

TypeScript — Modeling & Type Systems

Union Types

Finite type composition used to model explicit domain states and eliminate invalid value space at compile time.

type UserRole = "guest" | "member" | "admin";
  let role: UserRole = "member";

✅ Good Practices

  • Encodes domain invariants directly in the type system.

❌ Anti-Patterns

  • Open string types silently expand the allowed domain.

🧠 Decision

Model every finite domain state explicitly using unions instead of primitive string types.

📈 Scale Impact

Prevents invalid state propagation across shared modules and distributed UI layers.

⚖ Consistency Model

Compile-time finite state enforcement.

🏗 Infrastructure Impact

Zero runtime cost; reduces defect surface area in large teams.

🔥 Failure Mode

Using string instead of a union allows invalid states to flow undetected.