Hackernoon logoCustom Event Publisher-Subscriber Model on Top of Reactive Programming for Non-DOM Elements by@dm8typrogrammer

Custom Event Publisher-Subscriber Model on Top of Reactive Programming for Non-DOM Elements

The Mighty Programmer Hacker Noon profile picture

@dm8typrogrammerThe Mighty Programmer

Writing about Software Design and Software Engineering

Event-Based Programming is natural to any GUI based interface. HTML DOM¹ offers an inbuilt Event Notification model, but it is only useful when dealing with DOM Elements. There is no support for non-DOM elements.

Web applications have grown in complexity with time; also, JavaScript started participating in backend applications, which in turn made the world see JavaScript as more than HTML DOM manipulation gig.

This article showcases building up a custom event publisher-subscriber model on top of Reactive Programming for non-DOM elements.

Setting Up Stage

Event-Driven Programming

Event-Driven programming paradigm² introduces an intuitive flow of control based upon events.

Button is clicked => show dialog.


  • One that emits events can be called Event Publisher or Event Emitter or Event Dispatcher.
  • One that listens to events is called Event Subscriber or Event Listener or Event Handler.

In general, Publisher-Subscriber or PubSub term is used collectively for event publishers and even subscribers.

Reactive Programming

Reactive Programming paradigm² introduces the processing of streams of data asynchronously. It is a trending paradigm² these days.

RxJS is a reactive programming extension for JavaScript. You are going to build an event notification model on top of it by modelling events as a stream of data.

In Action

Problem Statement

Consider modelling Thermostat, when room temperature crosses a certain threshold (

), AC would turn up, and windows would close.


Consider class 

 which encapsulates the logic of monitoring and publishes events:

  • above: when temperature crossed above 30°C (threshold) from lower value.
  • below: when temperature crossed below or equal to 30°C (threshold) from higher value.

Data Structure for holding event structure

RxJS offers 

 which can be used to emit events to multiple subscribers.

class Thermostat {
  constructor(sensor) {
    // data structure for holding subscriptions 
    this.subscriptions = {
      above: new Subject(),
      below: new Subject()

Notice, there are two 

 objects. You can also create a single
object named 
 with direction 
Separating the event or combining the event is Design Concern, which may depend upon many factors.

Subscription API for Event

 API for registering action based upon event. 
API which would be called whenever there is new data is available.

on(event, action) {
  // sanatize event .. left code
  this.subscriptions[event].subscribe(v => action(v));

Publishing Events


 method which detects the rise and falls in temperature and publishes event accordingly using 

monitor(currentTemperature) {
  // when temperature cross above THRESHOLD
  if (
    currentTemperature > THRESHOLD 
    && this.lastRecordedTemperature <= THRESHOLD
  ) {

    // publish event

  } else if (
    currentTemperature <= THRESHOLD 
    && this.lastRecordedTemperature >= THRESHOLD
  ) {

    // publish event

  this.lastRecordedTemperature = currentTemperature;


 is called the 
 API would be triggered; by design, the callback would be called.

Subscribing for event

When the temperature is 

 30°C then ac should go off, and the window should open; the opposite should happen for 
 event 30°C.

thermostat.on("below", t => {
  this.ac = false;
  this.window = true;

thermostat.on("above", t => {
  this.ac = true;
  this.window = false;

Wiring all pieces together.


Any variation you make with the above code itself a pattern:

  • Keeping event subscription data in the mediator class of Event-Emitter and Event-Listener is an in-memory Event Bus pattern.
  • If the event holds enough information that Event-Listener doesn’t look back to Event-Emitter; it is Event Carried State Transfer pattern
  • If you store all events in datastore, it is Event Sourcing pattern (possible for backend side).
  • If there is a network partition between Event Publisher and Event Subscriber, then collectively, it is a Reactive System. It is build using queuing technologies (possible for backend side).
  • An event may contain, reference or link back to its source; it is Source Aware Event pattern. In HTML DOM, each event has a field named target to point back to its source.


  • Document Object Model is the parsed tree object representation of HTML document.A paradigm is a conceptual view of programming elements.


Previously published here.


Join Hacker Noon

Create your free account to unlock your custom reading experience.