Pub Sub Pattern Loose Decoupling

This pattern allows for better modularity and scalability by decoupling the event producers from the event consumers.

The Publish-Subscribe (Pub/Sub) pattern is a software design pattern that facilitates communication between different parts of your application without tight coupling. It establishes a central communication hub, often called a “message broker” or “event bus,” that enables components to:

Publish (Emit) messages (events) to notify interested parties about something that has happened.
Subscribe (Listen) to specific messages (events) to receive notifications and react accordingly.

Implementation

1
type Task<T> = (data: T) => void
2

3
export class PubSub<T> {
4
  #subscriber = new Set<Task<T>>()
5
  constructor() {}
6

7
  subscribe(task: Task<T>) {
8
    this.#subscriber.add(task)
9
    return () => {
10
      this.#subscriber.delete(task)
11
    }
12
  }
13

14
  notify(data: T) {
15
    for (const subscriber of this.#subscriber) {
16
      subscriber(data)
17
    }
18
  }
19
}

Usages

1
const pubSub = new PubSub<string>()
2

3
// Can have one more more subscriber
4
const unsubscribe = pubSub.subscribe((data) => {
5
  console.log(data)
6
})
7

8
// Event Emitted by some other part of the code
9
pubSub.notify('message1')
10
pubSub.notify('message2')
11
pubSub.notify('message3')
12

13
// In future, on certain condition: all the subscribers will unsubscribe
14
unsubscribe()

Comparison DOM CustomEvent

We can achive similar functionality using CustomEvent dispatched over any DOM Node.

The primary bottleneck for this is the dom dependency which makes the code non-usable outside the main thread on the browser environment (not even on worker).

As compared to PubSub, which has extra 16 lines of code for creating the abstraction, makes your code work on all the runtime.

1
// Publisher -> Similar to pubSub.notify
2
const myEvent = new CustomEvent('myCustomEvent', { detail: { message: 'Some data' } })
3
document.dispatchEvent(myEvent)
4

5
// Consumer
6
document.addEventListener('myCustomEvent', (event) => {
7
  console.log(event.detail.message)
8
})

Pub Sub Pattern Loose Decoupling

Implementation

Usages

Comparison DOM CustomEvent

Tags