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

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.

Vocabulary

• 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 (

30°C

Design

Consider class 

Thermostat

• 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 

Subject

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

Notice, there are two 

Subject

Subject

ThresholdCrossed

above

below

Subscription API for Event

on

Subject

subscribe

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

Publishing Events

Consider 

monitor

next

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

    // publish event
    this.subscriptions["above"].next(currentTemperature);

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

    // publish event
    this.subscriptions["below"].next(currentTemperature);
  }

  this.lastRecordedTemperature = currentTemperature;
 }

Whenever 

next

on

Subscribing for event

When the temperature is 

below

above

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

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

Wiring all pieces together.

Fiddling

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.

Footnotes

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

More

• About Event-Driven
  https://www.youtube.com/watch?v=STKCRSUsyP0&vl=en

Previously published here.