Observer Pattern — Notify many without knowing who
Subject broadcasts; observers react without the subject knowing concrete types. · Unsubscribe to avoid leaks in long-lived UIs.
Watch
Watch, then scroll down for code and practice.
In code
type Unsub = () => void;
class EventBus<T> {
private subs: ((payload: T) => void)[] = [];
subscribe(fn: (payload: T) => void): Unsub {
this.subs.push(fn);
return () => {
this.subs = this.subs.filter((x) => x !== fn);
};
}
emit(payload: T) {
this.subs.forEach((fn) => fn(payload));
}
}interface Observer {
update(price: number): void;
}
class Stock {
private observers: Observer[] = [];
private price = 0;
attach(o: Observer) {
this.observers.push(o);
}
setPrice(p: number) {
this.price = p;
this.observers.forEach((o) => o.update(p));
}
}📘 Key ideas
The pattern
A subject maintains a list of observers. When state changes, it notifies all observers without knowing their concrete types.
Key interfaces
Subject: subscribe(observer), unsubscribe(observer), notify(). Observer: onEvent(data). The subject never imports a concrete Observer class.
Real-world analogy
Event listeners in browsers, Redux subscriptions, React's useEffect with dependencies — all are implementations of Observer.
Push vs Pull
Push: subject sends full data in notification. Pull: subject sends minimal signal, observer fetches what it needs. Pull is more flexible.
🧠 Practice — Apply What You Learned
Factory Pattern: Notification Creator
A NotificationService creates different notification objects based on type: EMAIL, SMS, PU…
Builder Pattern: SQL Query Builder
Building a SQL query string by concatenating strings leads to bugs and unreadable code. De…
Singleton Pattern: Thread-Safe Config Manager
Design an AppConfig singleton that loads configuration from environment/file once and prov…
Observer Pattern: Stock Price Alerts
Design a StockMarket system where multiple observers (mobile app, email alert, dashboard w…
Decorator Pattern: Coffee Customisation
Design a coffee ordering system where a base Coffee can be decorated with add-ons (Milk, S…
Logger / Logging Framework
Design a flexible logging framework that supports multiple log levels, formatters, and out…
Food Delivery System (Swiggy/Zomato)
Design a food delivery platform where customers can browse restaurants, place orders, and …
Chat Application (WhatsApp-like)
Design a messaging system supporting 1-on-1 chats, group chats, message status, and media …
Notification System
Design a notification service that can send alerts via multiple channels based on user pre…
LRU Cache System
Design an in-memory cache system with LRU eviction policy, TTL support, and thread safety.…
Distributed Job Scheduler
Design a job scheduling system that can queue, execute, and monitor background jobs with r…
Social Media Feed (Twitter/Instagram)
Design a social media platform with posts, follows, and a personalized news feed.…
Rate Limiter
Design a rate limiting service that restricts request rates per user/IP using multiple alg…
🚀 Now apply what you learned
Pick a problem above, write your solution, and get AI feedback on your design.
Start Practice →