18 · Engineering craft
Design patterns
The reusable patterns that show up in machine-coding rounds.
Classic GoF patterns and how they actually appear in frontend code. Expect "what pattern is this / how would you refactor this?"
⭐ Flagship: Observer / Event Bus
| Pattern | Difficulty | Time | Tags | Frontend example |
|---|---|---|---|---|
| Observer / Pub-Sub | 🟡 | 45m | #behavioral |
Flagship ⭐ — event emitters, RxJS |
| Module | 🟢 | 30m | #structural |
patterns.dev — ES modules |
| Singleton | 🟢 | 30m | #creational |
patterns.dev — store, config |
| Factory | 🟡 | 30m | #creational |
patterns.dev — component factories |
| Builder | 🟡 | 30m | #creational |
Query/request builders |
| Prototype | 🟡 | 30m | #creational |
patterns.dev — JS prototypes |
| Adapter | 🟡 | 30m | #structural |
API response adapters |
| Facade | 🟢 | 30m | #structural |
SDK wrappers |
| Decorator | 🟡 | 45m | #structural |
HOCs, middleware |
| Proxy | 🟡 | 45m | #structural |
patterns.dev — reactivity, Vue |
| Composite | 🟡 | 45m | #structural |
Component trees |
| Flyweight | 🔴 | 45m | #structural |
patterns.dev — virtualization |
| Bridge | 🔴 | 45m | #structural |
Renderer abstractions |
| Strategy | 🟡 | 45m | #behavioral |
Pluggable sort/validation |
| Command | 🟡 | 45m | #behavioral |
Undo/redo, action creators |
| Mediator | 🟡 | 45m | #behavioral |
patterns.dev — event bus |
| Chain of Responsibility | 🟡 | 45m | #behavioral |
Middleware pipelines |
| Iterator | 🟢 | 30m | #behavioral |
Generators, iterables |
| State | 🟡 | 45m | #behavioral |
State machines, wizards |
| Template Method | 🟡 | 30m | #behavioral |
Lifecycle hooks |
| Visitor | 🔴 | 45m | #behavioral |
AST transforms, compilers |
| Dependency Injection | 🟡 | 45m | #architectural |
Context, service providers |
| HOC / Render Props / Hooks | 🟡 | 45m | #react |
patterns.dev: React patterns |
| Container / Presentational | 🟢 | 30m | #react |
Smart vs dumb components |
| Compound Components | 🔴 | 45m | #react |
patterns.dev — Tabs, Select |
📖 The best single resource: patterns.dev ⭐ · Refactoring Guru
Related: 08-architecture · 06-react · 03-javascript
Missing a pattern? Add a row.