Design Patterns for Frontend
Classical software design patterns applied to real frontend problems. Observer for event systems, Factory for dynamic creation, Strategy for swappable algorithms, Command for undo/redo, Proxy for lazy loading, State machines for complex UI flows — each pattern taught with JavaScript implementations and production use cases, not academic UML diagrams.
Build reactive systems from scratch. The Observer pattern powers DOM events, React subscriptions, RxJS, and every event-driven architecture in frontend.
Decouple components completely with publish-subscribe. Build event buses, understand Redux middleware, and learn when Pub/Sub beats Observer.
Create objects without specifying exact classes. Factory functions for components, API clients, validators, and dynamic UI generation in TypeScript.
Swap algorithms at runtime without changing the code that uses them. Strategy pattern for sorting, validation, rendering, and pricing in real frontend systems.
Turn operations into objects that can be stored, replayed, and reversed. Build undo/redo systems like Figma and Google Docs with the Command pattern.
When one instance is enough — and when it's a trap. Module-scoped singletons, service containers, and why global state is the real anti-pattern.
Wrap functions with new behavior without modifying them. HOCs, Express middleware, function composition, and the decorator proposal in real frontend code.
Intercept and control object access with ES6 Proxy. Build reactive state, lazy-loading wrappers, validation layers, and understand how Vue 3 reactivity works.
Model complex UI flows with finite state machines. Auth flows, form wizards, media players, and multi-step processes that never reach impossible states.
Custom iterables, lazy evaluation, async generators for streaming data, and pagination patterns. Master the iterator protocol that powers for...of, spread, and destructuring.