📘 Mediator Pattern: Object Communication

🎯 Introduction

Welcome to this exciting tutorial on the Mediator Pattern! 🎉 In this guide, we’ll explore how to manage complex object communication in TypeScript using this powerful design pattern.

Have you ever tried to coordinate a group chat where everyone talks to everyone? It gets messy fast! 😅 The Mediator Pattern is like having a group admin who manages all the messages - making communication organized and efficient.

By the end of this tutorial, you’ll feel confident implementing the Mediator Pattern in your own projects! Let’s dive in! 🏊‍♂️

📚 Understanding Mediator Pattern

🤔 What is the Mediator Pattern?

The Mediator Pattern is like an air traffic controller at an airport 🛫. Instead of planes talking directly to each other (chaos!), they all communicate through the control tower. This central mediator coordinates all interactions, keeping things safe and organized.

In TypeScript terms, the Mediator Pattern defines how a set of objects interact by encapsulating their communication in a mediator object. This means you can:

✨ Reduce dependencies between communicating objects
🚀 Change interaction logic in one place
🛡️ Keep objects loosely coupled

💡 Why Use the Mediator Pattern?

Here’s why developers love the Mediator Pattern:

Decoupling 🔗: Objects don’t need to know about each other
Reusability ♻️: Components can be reused in different contexts
Maintainability 🔧: Changes to communication logic are centralized
Testability 🧪: Easier to test individual components

Real-world example: Imagine building a smart home system 🏠. With the Mediator Pattern, your lights, thermostat, and security system don’t talk directly - they communicate through a central hub!

🔧 Basic Syntax and Usage

📝 Simple Example

Let’s start with a friendly chat room example:

// 👋 Hello, Mediator Pattern!
interface Mediator {
  sendMessage(message: string, sender: User): void;
  addUser(user: User): void;
}

// 🎨 Creating a user class
class User {
  constructor(
    public name: string,
    private mediator: Mediator
  ) {}
  
  // 💬 Send a message
  send(message: string): void {
    console.log(`${this.name}: ${message}`);
    this.mediator.sendMessage(message, this);
  }
  
  // 📨 Receive a message
  receive(message: string, sender: string): void {
    console.log(`  ${this.name} received from ${sender}: ${message}`);
  }
}

// 🎯 The chat room mediator
class ChatRoom implements Mediator {
  private users: User[] = [];
  
  addUser(user: User): void {
    this.users.push(user);
    console.log(`✨ ${user.name} joined the chat!`);
  }
  
  sendMessage(message: string, sender: User): void {
    this.users.forEach(user => {
      if (user !== sender) {
        user.receive(message, sender.name);
      }
    });
  }
}

💡 Explanation: Notice how users don’t know about each other - they only know about the mediator! The ChatRoom handles all the message routing.

🎯 Common Patterns

Here are patterns you’ll use daily:

// 🏗️ Pattern 1: Abstract mediator
abstract class BaseMediator {
  protected components: Component[] = [];
  
  abstract notify(sender: Component, event: string): void;
  
  register(component: Component): void {
    this.components.push(component);
    component.setMediator(this);
  }
}

// 🎨 Pattern 2: Component interface
interface Component {
  setMediator(mediator: BaseMediator): void;
  operation(): void;
}

// 🔄 Pattern 3: Concrete implementation
class ConcreteComponent implements Component {
  private mediator!: BaseMediator;
  
  setMediator(mediator: BaseMediator): void {
    this.mediator = mediator;
  }
  
  operation(): void {
    this.mediator.notify(this, "operation");
  }
}

💡 Practical Examples

🛒 Example 1: Smart Shopping System

Let’s build a shopping system where inventory, payment, and shipping communicate:

// 🛍️ Define our shopping mediator
interface ShoppingMediator {
  processOrder(orderId: string): void;
  notifyComponent(sender: string, event: string, data?: any): void;
}

// 📦 Inventory system
class InventorySystem {
  private mediator: ShoppingMediator;
  private stock: Map<string, number> = new Map([
    ["laptop", 5],
    ["phone", 10],
    ["tablet", 3]
  ]);
  
  constructor(mediator: ShoppingMediator) {
    this.mediator = mediator;
  }
  
  // 🔍 Check if item is available
  checkStock(item: string, quantity: number): boolean {
    const available = this.stock.get(item) || 0;
    const hasStock = available >= quantity;
    
    console.log(`📦 Inventory: ${item} - ${hasStock ? "✅ In stock" : "❌ Out of stock"}`);
    this.mediator.notifyComponent("inventory", "stock-checked", { item, hasStock });
    
    return hasStock;
  }
  
  // 📉 Reserve items
  reserveItems(item: string, quantity: number): void {
    const current = this.stock.get(item) || 0;
    this.stock.set(item, current - quantity);
    console.log(`📦 Reserved ${quantity} ${item}(s)`);
  }
}

// 💳 Payment system
class PaymentSystem {
  private mediator: ShoppingMediator;
  
  constructor(mediator: ShoppingMediator) {
    this.mediator = mediator;
  }
  
  // 💰 Process payment
  processPayment(amount: number): boolean {
    const success = Math.random() > 0.1; // 90% success rate
    
    if (success) {
      console.log(`💳 Payment: $${amount} processed successfully! ✅`);
      this.mediator.notifyComponent("payment", "payment-success", { amount });
    } else {
      console.log(`💳 Payment: Failed to process $${amount} ❌`);
      this.mediator.notifyComponent("payment", "payment-failed");
    }
    
    return success;
  }
}

// 🚚 Shipping system
class ShippingSystem {
  private mediator: ShoppingMediator;
  
  constructor(mediator: ShoppingMediator) {
    this.mediator = mediator;
  }
  
  // 📮 Schedule delivery
  scheduleDelivery(orderId: string): void {
    const deliveryDate = new Date();
    deliveryDate.setDate(deliveryDate.getDate() + 3);
    
    console.log(`🚚 Shipping: Order ${orderId} scheduled for ${deliveryDate.toDateString()}`);
    this.mediator.notifyComponent("shipping", "delivery-scheduled", { orderId, date: deliveryDate });
  }
}

// 🎮 The shopping mediator
class ShoppingSystemMediator implements ShoppingMediator {
  private inventory: InventorySystem;
  private payment: PaymentSystem;
  private shipping: ShippingSystem;
  
  constructor() {
    this.inventory = new InventorySystem(this);
    this.payment = new PaymentSystem(this);
    this.shipping = new ShippingSystem(this);
  }
  
  // 🛒 Process complete order
  processOrder(orderId: string): void {
    console.log(`\n🛒 Processing order ${orderId}...`);
    
    // Check inventory
    if (this.inventory.checkStock("laptop", 1)) {
      // Process payment
      if (this.payment.processPayment(999.99)) {
        // Reserve items and schedule shipping
        this.inventory.reserveItems("laptop", 1);
        this.shipping.scheduleDelivery(orderId);
        console.log(`\n🎉 Order ${orderId} completed successfully!`);
      } else {
        console.log(`\n😔 Order ${orderId} failed - payment issue`);
      }
    } else {
      console.log(`\n😔 Order ${orderId} failed - out of stock`);
    }
  }
  
  // 📢 Handle notifications between components
  notifyComponent(sender: string, event: string, data?: any): void {
    // Central logging or additional coordination logic
    console.log(`📢 Event from ${sender}: ${event}`);
  }
}

// 🎮 Let's use it!
const shop = new ShoppingSystemMediator();
shop.processOrder("ORD-12345");

🎯 Try it yourself: Add a notification system that emails customers about order status!

🎮 Example 2: Game Event System

Let’s make a game where players, enemies, and the UI communicate:

// 🏆 Game mediator for coordinating events
interface GameMediator {
  notify(sender: GameObject, event: GameEvent): void;
  registerObject(obj: GameObject): void;
}

// 🎯 Game events
type GameEvent = 
  | { type: "damage"; amount: number; target: string }
  | { type: "heal"; amount: number }
  | { type: "levelUp" }
  | { type: "enemyDefeated"; exp: number };

// 🎮 Base game object
abstract class GameObject {
  constructor(
    protected name: string,
    protected mediator: GameMediator
  ) {
    mediator.registerObject(this);
  }
  
  abstract handleEvent(event: GameEvent): void;
}

// 🦸 Player class
class Player extends GameObject {
  private health = 100;
  private level = 1;
  private exp = 0;
  
  constructor(name: string, mediator: GameMediator) {
    super(name, mediator);
    console.log(`🦸 ${name} enters the game!`);
  }
  
  // ⚔️ Attack an enemy
  attack(targetName: string): void {
    const damage = 10 + this.level * 5;
    console.log(`⚔️ ${this.name} attacks for ${damage} damage!`);
    this.mediator.notify(this, { type: "damage", amount: damage, target: targetName });
  }
  
  // 📨 Handle game events
  handleEvent(event: GameEvent): void {
    switch (event.type) {
      case "damage":
        if (event.target === this.name) {
          this.health -= event.amount;
          console.log(`💔 ${this.name} takes ${event.amount} damage! Health: ${this.health}`);
        }
        break;
      case "enemyDefeated":
        this.exp += event.exp;
        console.log(`✨ ${this.name} gains ${event.exp} exp!`);
        if (this.exp >= this.level * 100) {
          this.levelUp();
        }
        break;
    }
  }
  
  // 📈 Level up!
  private levelUp(): void {
    this.level++;
    this.health = 100 + this.level * 20;
    console.log(`🎉 ${this.name} reached level ${this.level}!`);
    this.mediator.notify(this, { type: "levelUp" });
  }
}

// 👾 Enemy class
class Enemy extends GameObject {
  private health: number;
  private expReward: number;
  
  constructor(name: string, health: number, expReward: number, mediator: GameMediator) {
    super(name, mediator);
    this.health = health;
    this.expReward = expReward;
    console.log(`👾 Wild ${name} appears!`);
  }
  
  handleEvent(event: GameEvent): void {
    if (event.type === "damage" && event.target === this.name) {
      this.health -= event.amount;
      console.log(`💥 ${this.name} takes ${event.amount} damage! Health: ${this.health}`);
      
      if (this.health <= 0) {
        console.log(`☠️ ${this.name} is defeated!`);
        this.mediator.notify(this, { type: "enemyDefeated", exp: this.expReward });
      }
    }
  }
}

// 📊 UI System
class GameUI extends GameObject {
  constructor(mediator: GameMediator) {
    super("UI", mediator);
  }
  
  handleEvent(event: GameEvent): void {
    switch (event.type) {
      case "levelUp":
        this.showNotification("🌟 LEVEL UP! 🌟");
        break;
      case "enemyDefeated":
        this.showNotification("💀 Enemy Defeated! 💀");
        break;
    }
  }
  
  private showNotification(message: string): void {
    console.log(`\n🖼️ UI Notification: ${message}\n`);
  }
}

// 🎯 The game mediator
class BattleMediator implements GameMediator {
  private gameObjects: GameObject[] = [];
  
  registerObject(obj: GameObject): void {
    this.gameObjects.push(obj);
  }
  
  notify(sender: GameObject, event: GameEvent): void {
    // Broadcast event to all game objects
    this.gameObjects.forEach(obj => {
      if (obj !== sender) {
        obj.handleEvent(event);
      }
    });
  }
}

// 🎮 Let's play!
const game = new BattleMediator();
const ui = new GameUI(game);
const hero = new Player("TypeScript Hero", game);
const goblin = new Enemy("Goblin", 30, 50, game);

hero.attack("Goblin");
hero.attack("Goblin");
hero.attack("Goblin");

🚀 Advanced Concepts

🧙‍♂️ Advanced Topic 1: Type-Safe Event System

When you’re ready to level up, try this advanced pattern:

// 🎯 Advanced type-safe mediator
type EventMap = {
  userJoined: { userId: string; timestamp: Date };
  messagePosted: { userId: string; message: string };
  userLeft: { userId: string };
};

type EventType = keyof EventMap;

class TypeSafeMediator {
  private handlers = new Map<EventType, Set<(data: any) => void>>();
  
  // ✨ Type-safe event subscription
  on<T extends EventType>(
    event: T,
    handler: (data: EventMap[T]) => void
  ): void {
    if (!this.handlers.has(event)) {
      this.handlers.set(event, new Set());
    }
    this.handlers.get(event)!.add(handler);
  }
  
  // 🚀 Type-safe event emission
  emit<T extends EventType>(event: T, data: EventMap[T]): void {
    const eventHandlers = this.handlers.get(event);
    if (eventHandlers) {
      eventHandlers.forEach(handler => handler(data));
    }
  }
}

// 🪄 Using the type-safe mediator
const mediator = new TypeSafeMediator();

mediator.on("userJoined", (data) => {
  // TypeScript knows data has userId and timestamp! ✨
  console.log(`👋 ${data.userId} joined at ${data.timestamp}`);
});

mediator.emit("userJoined", { 
  userId: "hero123", 
  timestamp: new Date() 
});

🏗️ Advanced Topic 2: Async Mediator Pattern

For the brave developers handling async operations:

// 🚀 Async mediator for complex operations
class AsyncMediator {
  private asyncHandlers = new Map<string, (data: any) => Promise<any>>();
  
  // 🎯 Register async handler
  registerHandler(event: string, handler: (data: any) => Promise<any>): void {
    this.asyncHandlers.set(event, handler);
  }
  
  // ⚡ Process async request
  async request<T>(event: string, data: any): Promise<T> {
    const handler = this.asyncHandlers.get(event);
    if (!handler) {
      throw new Error(`No handler for event: ${event}`);
    }
    
    console.log(`⏳ Processing ${event}...`);
    const result = await handler(data);
    console.log(`✅ ${event} completed!`);
    
    return result;
  }
}

// 🎮 Example usage
const asyncMediator = new AsyncMediator();

// Register handlers
asyncMediator.registerHandler("fetchUser", async (userId: string) => {
  // Simulate API call
  await new Promise(resolve => setTimeout(resolve, 1000));
  return { id: userId, name: "TypeScript Master", level: 42 };
});

// Use it!
async function demo() {
  const user = await asyncMediator.request("fetchUser", "user123");
  console.log(`🎉 Fetched user: ${user.name}`);
}

⚠️ Common Pitfalls and Solutions

😱 Pitfall 1: The God Mediator

// ❌ Wrong way - mediator knows too much!
class GodMediator {
  private userAge: number = 0;
  private userEmail: string = "";
  private productPrice: number = 0;
  // ... hundreds of properties 😰
  
  handleEverything(): void {
    // Complex business logic everywhere! 💥
  }
}

// ✅ Correct way - keep mediator focused!
class FocusedMediator {
  notify(sender: Component, event: string): void {
    // Just coordinate, don't store business data! 🛡️
    this.components.forEach(c => {
      if (c !== sender) {
        c.handleEvent(event);
      }
    });
  }
}

🤯 Pitfall 2: Direct Component References

// ❌ Dangerous - components know each other!
class BadComponent {
  constructor(private otherComponent: BadComponent) {} // 💥 Coupling!
  
  doSomething(): void {
    this.otherComponent.react(); // Direct call!
  }
}

// ✅ Safe - components only know mediator!
class GoodComponent {
  constructor(private mediator: Mediator) {} // ✅ Decoupled!
  
  doSomething(): void {
    this.mediator.notify(this, "something-happened");
  }
}

🛠️ Best Practices

🎯 Keep Mediator Simple: Don’t put business logic in the mediator
📝 Clear Event Names: Use descriptive event names like “order-completed”
🛡️ Type Safety: Use TypeScript’s type system for event data
🎨 Single Responsibility: Each component should have one job
✨ Loose Coupling: Components shouldn’t know about each other

🧪 Hands-On Exercise

🎯 Challenge: Build a Smart Home System

Create a type-safe smart home system with mediator pattern:

📋 Requirements:

✅ Devices: Lights, Thermostat, Security System, Smart Speaker
🏷️ Events: motion detected, temperature changed, voice command
👤 Scenarios: Away mode, Sleep mode, Party mode
📅 Time-based automation
🎨 Each device needs an emoji!

🚀 Bonus Points:

Add energy saving features
Implement scene presets
Create a mobile app controller component

💡 Solution

🔍 Click to see solution

// 🎯 Our smart home mediator system!
interface SmartHomeMediator {
  notify(sender: SmartDevice, event: HomeEvent): void;
  registerDevice(device: SmartDevice): void;
  activateScene(scene: "away" | "sleep" | "party"): void;
}

type HomeEvent = 
  | { type: "motion"; location: string }
  | { type: "temperature"; value: number }
  | { type: "voice"; command: string }
  | { type: "lightChange"; brightness: number }
  | { type: "securityAlert"; severity: "low" | "high" };

abstract class SmartDevice {
  constructor(
    protected name: string,
    protected emoji: string,
    protected mediator: SmartHomeMediator
  ) {
    mediator.registerDevice(this);
    console.log(`${emoji} ${name} connected to smart home!`);
  }
  
  abstract handleEvent(event: HomeEvent): void;
}

// 💡 Smart lights
class SmartLights extends SmartDevice {
  private brightness = 50;
  
  constructor(location: string, mediator: SmartHomeMediator) {
    super(`${location} Lights`, "💡", mediator);
  }
  
  setBrightness(level: number): void {
    this.brightness = level;
    console.log(`${this.emoji} ${this.name}: Brightness set to ${level}%`);
    this.mediator.notify(this, { type: "lightChange", brightness: level });
  }
  
  handleEvent(event: HomeEvent): void {
    switch (event.type) {
      case "motion":
        console.log(`${this.emoji} Motion detected - turning on lights!`);
        this.setBrightness(100);
        break;
      case "voice":
        if (event.command.includes("lights off")) {
          this.setBrightness(0);
        }
        break;
    }
  }
}

// 🌡️ Smart thermostat
class SmartThermostat extends SmartDevice {
  private temperature = 22;
  
  constructor(mediator: SmartHomeMediator) {
    super("Thermostat", "🌡️", mediator);
  }
  
  setTemperature(temp: number): void {
    this.temperature = temp;
    console.log(`${this.emoji} Temperature set to ${temp}°C`);
    this.mediator.notify(this, { type: "temperature", value: temp });
  }
  
  handleEvent(event: HomeEvent): void {
    if (event.type === "lightChange" && event.brightness === 0) {
      console.log(`${this.emoji} Lights off - entering sleep mode`);
      this.setTemperature(18);
    }
  }
}

// 🔒 Security system
class SecuritySystem extends SmartDevice {
  private armed = false;
  
  constructor(mediator: SmartHomeMediator) {
    super("Security System", "🔒", mediator);
  }
  
  arm(): void {
    this.armed = true;
    console.log(`${this.emoji} Security system ARMED 🚨`);
  }
  
  disarm(): void {
    this.armed = false;
    console.log(`${this.emoji} Security system disarmed ✅`);
  }
  
  handleEvent(event: HomeEvent): void {
    if (event.type === "motion" && this.armed) {
      console.log(`${this.emoji} ALERT! Motion detected while armed! 🚨`);
      this.mediator.notify(this, { type: "securityAlert", severity: "high" });
    }
  }
}

// 🏠 The home automation hub
class SmartHomeHub implements SmartHomeMediator {
  private devices: SmartDevice[] = [];
  
  registerDevice(device: SmartDevice): void {
    this.devices.push(device);
  }
  
  notify(sender: SmartDevice, event: HomeEvent): void {
    this.devices.forEach(device => {
      if (device !== sender) {
        device.handleEvent(event);
      }
    });
  }
  
  activateScene(scene: "away" | "sleep" | "party"): void {
    console.log(`\n🎬 Activating ${scene} mode...`);
    
    switch (scene) {
      case "away":
        this.notify(this as any, { type: "voice", command: "lights off" });
        // In real implementation, would arm security
        break;
      case "sleep":
        this.notify(this as any, { type: "lightChange", brightness: 10 });
        break;
      case "party":
        this.notify(this as any, { type: "lightChange", brightness: 100 });
        console.log("🎉 Party mode activated!");
        break;
    }
  }
}

// 🎮 Test it out!
const home = new SmartHomeHub();
const livingRoomLights = new SmartLights("Living Room", home);
const thermostat = new SmartThermostat(home);
const security = new SecuritySystem(home);

// Simulate events
console.log("\n🏃 Someone enters the room...");
livingRoomLights.handleEvent({ type: "motion", location: "Living Room" });

console.log("\n😴 Time for bed...");
home.activateScene("sleep");

🎓 Key Takeaways

You’ve learned so much! Here’s what you can now do:

✅ Create mediator patterns with confidence 💪
✅ Avoid tight coupling between objects 🛡️
✅ Apply the pattern in real projects 🎯
✅ Debug communication issues like a pro 🐛
✅ Build scalable systems with TypeScript! 🚀

Remember: The Mediator Pattern is your friend when objects need to talk but shouldn’t know each other’s phone numbers! 🤝

🤝 Next Steps

Congratulations! 🎉 You’ve mastered the Mediator Pattern!

Here’s what to do next:

💻 Practice with the smart home exercise above
🏗️ Refactor existing code to use mediator pattern
📚 Move on to our next tutorial: Observer Pattern
🌟 Share your mediator implementations with others!

Remember: Every TypeScript expert was once a beginner. Keep coding, keep learning, and most importantly, have fun! 🚀

Happy coding! 🎉🚀✨

Prerequisites

What you'll learn