🧩 Building a Pluggable Notification System in JavaScript Using the Factory Pattern

Lakshay Kalra — Fri, 18 Apr 2025 11:30:06 +0000

Sending notifications — via email, SMS, push, or Slack — is a common requirement in most applications. But how do you design such a system so that it's easy to extend without modifying existing logic every time a new channel is added?

Enter the Factory Pattern and Open/Closed Principle.

In this article, I’ll walk you through how to build a flexible notification system using modern JavaScript, following clean architecture principles.

🧱 The Problem

Most developers start with something like this:

if (type === 'EMAIL') {
  sendEmail(message);
} else if (type === 'SMS') {
  sendSms(message);
} else if (type === 'PUSH') {
  sendPush(message);
}

This works — until your PM says, "We also need to support Slack. Oh, and WhatsApp next week."

Suddenly you're modifying the same block of logic again and again. That's not scalable.

✅ The Goal

We want a system where:

Each notification type is its own class.

We can register new types without changing core logic.

The notification center can dynamically send messages based on type.

🏗️ Step-by-Step Implementation

Define Notification Classes

class EmailNotification {
  send(message) {
    console.log(`sending email notification with message ${message}`);
  }
}

class SmsNotification {
  send(message) {
    console.log(`sending sms notification with message ${message}`);
  }
}

class PushNotification {
  send(message) {
    console.log(`sending push notification with message ${message}`);
  }
}

class SlackNotification {
  send(message) {
    console.log(`sending slack notification with message ${message}`);
  }
}

Each class follows the same interface: a send() method that takes a message.

Create a Factory Base Class

class NotificationCreator {
  constructor() {
    this.registry = {
      'EMAIL': EmailNotification,
      'SMS': SmsNotification,
      'PUSH': PushNotification,
    };
  }

  register(type, notificationClass) {
    if (!this.registry[type]) {
      this.registry[type] = notificationClass;
    }
  }

  createNotification(type) {
    const NotificationClass = this.registry[type];
    if (!NotificationClass) {
      throw new Error(`${type} class is not implemented`);
    }
    return new NotificationClass();
  }
}

This class:

Holds a registry of notification types

Provides a register() method to add new types dynamically

Has a createNotification() method that acts as a factory

Notification Center That Sends Messages

class NotificationCenter extends NotificationCreator {
  send(message, type) {
    const notification = this.createNotification(type);
    notification.send(message);
  }
}

Putting It All Together

const notification = new NotificationCenter();

notification.send("Hey Email", "EMAIL");
notification.send("hey SMS", "SMS");
notification.send("hey PUSH-Notification", "PUSH");

// Register Slack dynamically
notification.register("SLACK", SlackNotification);
notification.send("Hey Slack", "SLACK");

🎯 Benefits of This Approach

✅ Open/Closed Principle: You can add new notification types without modifying existing logic.
✅ Scalable: Future types like WhatsApp, Telegram, Discord can be plugged in with one register() call.
✅ Testable: Each class can be tested independently.
✅ Clean Code: No repetitive if/else or switch blocks.

🧠 Bonus Tip: Make It Even Cleaner

Move the default registry into a method like registerDefaults() if your base class grows. Also, consider adding validation or interfaces if you're using TypeScript.

🚀 Final Thoughts

This pattern works great for:

Notification systems

Payment gateways (Stripe, Razorpay, PayPal)

Message formatters (Markdown, HTML, plain text)

By following this strategy, you're not only making your code cleaner — you're also writing software that's built to scale.

💬 Got questions or improvements? Drop them in the comments — let’s chat clean code!

Optional Chaining in javascript.

Lakshay Kalra — Sun, 15 Nov 2020 09:56:57 +0000

Imagine we have a deeply nested object of level "N" and we want to check the "Mth" level if it exists or not. Let me put an example in front of you.

Let customer={
name:'Foo',
cars:{
carOne:'Audi',
carTwo:'BMW'
 }
}

If I have to say lets check "carOne" property is present or not in customer object, I can do this,

if(customer && customer.cars && customer.cars.carOne) {
// do your stuff
}

It's easy, right?

But if we observe the code above carefully, What we have found?

Duplicate Code - To check a property exists or not, we are re-writing some conditions of the code again and again. Means some part of the code is executing many times. Thereby increasing code execution time.
Longer version - If we are writing multiple conditions to check for a property, The code becomes lengthy and if we skip some validation in between, we can get an error.


let customer={
  name:'Foo',
  }

  if(customer  && customer.cars.carOne) { // will result in TypeError:Cannot read property 'carOne' of undefined
    // do your stuff
    }

How about we fix this guy into a one-liner statement. And here's the code for your rescue.

if( customer?.cars?.carOne ) {
// do your stuff
}

Boom!! All your problems just got vanished.

Here's How.

The expression "?." is called Optional Chaining and it's evaluating whether an expression before the "?" statement is Nullable and/or Undefined. If it is, The whole expression will stop executing, or in a technical term, it's called "Short-Circuiting" and the code execution will just be carried on afterward.

Benefits?

No Duplicate code - The optional chaining expression is not checking the same condition again and again if it's already been examined. Here's, Kind of continuous chaining is happening. So no object property will be traversed multiple times. Thereby, Saving code execution time.
Shorter and simplified version - This is of course shorter and easy to read, unlike the vanilla code. As optional chaining is also checking Nullable and/or Undefined throughout the way, it will not result in "TypeError". In this case, execution still continues.

I hope you find this blog interesting. Until next time, Adios amigos.

DEV Community: Lakshay Kalra

🧩 Building a Pluggable Notification System in JavaScript Using the Factory Pattern

Optional Chaining in javascript.