Event-Driven Architecture in Frontend Applications

Event-Driven Architecture in Frontend Applications | DevPrep

// Tight coupling
function addToCart(item) {
  cartService.add(item);
  analyticsService.track("add_to_cart", item);
  notificationService.show("Added to cart");
  recommendationService.update(item);
}

// Event-driven (loose coupling)
function addToCart(item) {
  cartService.add(item);
  eventBus.emit("cart:item-added", item);
}
// Each service listens independently

class EventBus {
  #handlers = new Map();

  on(event, handler) {
    if (!this.#handlers.has(event)) this.#handlers.set(event, new Set());
    this.#handlers.get(event).add(handler);
    return () => this.off(event, handler);
  }

  off(event, handler) {
    this.#handlers.get(event)?.delete(handler);
  }

  emit(event, payload) {
    this.#handlers.get(event)?.forEach(h => {
      try { h(payload); } catch (e) { console.error(e); }
    });
  }

  once(event, handler) {
    const wrapper = (payload) => {
      handler(payload);
      this.off(event, wrapper);
    };
    return this.on(event, wrapper);
  }
}

export const eventBus = new EventBus();

function useEventBus(event, handler) {
  useEffect(() => {
    const unsub = eventBus.on(event, handler);
    return unsub;
  }, [event, handler]);
}

// Usage
function NotificationBar() {
  const [message, setMessage] = useState("");
  useEventBus("notification:show", (msg) => setMessage(msg));
  return message ? <div className="notification">{message}</div> : null;
}

// Dispatch
window.dispatchEvent(new CustomEvent("app:theme-changed", {
  detail: { theme: "dark" }
}));

// Listen
window.addEventListener("app:theme-changed", (e) => {
  applyTheme(e.detail.theme);
});

Event-Driven Architecture in Frontend Applications

Related Articles

System Design #12: Design a Multi-Step Form Wizard

Mastering Senior-Level JavaScript Interview Concepts

System Design #9: Design a Collaborative Text Editor

Comments (0)

Why Event-Driven?

Custom Event Bus

React Integration

Browser Custom Events

When NOT to Use Events