Design patterns in Javascript: Publish-Subscribe or PubSub

What's a design pattern in software engineering? It's a general repeatable solution to a commonly occurring problem in software design. In this article, we'll be looking at one of such common design patterns and see how it can be put to use in real world applications.

This pattern is referred to as Publish-Subscribe or PubSub. Let's start with the overall notion behind this pattern before writing some code.

Overview

The image above describes the general idea behind this pattern:

• We have a PubSub 'container' that maintains a list of subscribers (a subscriber is just a function)
• A new subscription can be created by using the subscribe(subscriber) method, which essentially adds the subscriber into our PubSub container
• We can use publish(payload) to call all the existing subscribers in the PubSub container with payload
• Any specific subscriber can be removed from the container, at any point in time, using the unsubscribe(subscriber) method.

Implementation

Looking at the points above it's pretty straightforward to come up with a simple implementation:

// pubsub.jsexport default class PubSub {  constructor(){    // this is where we maintain list of subscribers for our PubSub    this.subscribers = []  }  subscribe(subscriber){    // add the subscriber to existing list    this.subscribers = [...this.subscribers, subscriber]  }  unsubscribe(subscriber){   // remove the subscriber from existing list    this.subscribers = this.subscribers.filter(sub => sub!== subscriber)  }  publish(payload){   // publish payload to existing subscribers by invoking them    this.subscribers.forEach(subscriber => subscriber(payload))  }}

Let's add a bit of error handling to this implementation:

// pubsub.jsexport default class PubSub {  constructor(){    this.subscribers = []  }  subscribe(subscriber){    if(typeof subscriber !== 'function'){      throw new Error(`${typeof subscriber} is not a valid argument for subscribe method, expected a function instead`)    }    this.subscribers = [...this.subscribers, subscriber]  }  unsubscribe(subscriber){    if(typeof subscriber !== 'function'){      throw new Error(`${typeof subscriber} is not a valid argument for unsubscribe method, expected a function instead`)    }    this.subscribers = this.subscribers.filter(sub => sub!== subscriber)  }  publish(payload){    this.subscribers.forEach(subscriber => subscriber(payload))  }}

Usage

We can use this implementation as follows:

// main.jsimport PubSub from './PubSub';const pubSubInstance = new PubSub();export default pubSubInstance

Now, elsewhere in the application, we can publish and subscribe using this instance:

//app.jsimport pubSubInstance from './main.js';pubSubInstance.subscribe(payload => {  // do something here  showMessage(payload.message)})

// home.jsimport pubSubInstance from './main.js';pubSubInstance.publish({ message: 'Hola!' });

Is it useful in real applications?

Yes. In fact, there are many libraries that use it under the hood and you may not have realized it so far. Let's take the example of the popular state management library for ReactJS - Redux. Of course, its implementation is not as simple as ours, since it's been implemented to handle many other nuances and use-cases. Nevertheless, the underlying concept remains the same.

Looking at the methods offered by Redux, You would see dispatch() and subscribe() methods which are equivalent to publish() and subscribe() methods we implemented above. You usually won't see subscribe() method getting used directly, this part is abstracted away behind connect() method offered by react-redux library. You can follow the implementation details here if that interests you.

In summary, all react components using connect() method act as subscribers. Any component using dispatch() acts as the publisher. And that explains why dispatching an action from any component causes all connected components to rerender.

What's next

• We'll see how the idea behind PubSub can be extended further to build a state management library like redux from scratch.
• We'll also see how an Event Emitter can be built from scratch, using similar notion as PubSub

This article has been originally published at StackFull.dev. If you enjoyed reading this, you may want to opt for my newsletter. It would let me reach out to you whenever I publish a new thought!