Event-Based Programming is natural to any GUI based interface. HTML DOM¹ offers an inbuilt model, but There is no support for non-DOM elements. Event Notification it is only useful when dealing with 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, or term is used collectively for event publishers and even subscribers. Publisher-Subscriber PubSub Reactive Programming paradigm² introduces the processing of streams of data asynchronously. It is a trending paradigm² these days. Reactive Programming is a eactive programming e tension for ava cript. RxJS r x J S 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. 30°C Design Consider class which encapsulates the logic of monitoring and publishes events: Thermostat : when temperature crossed above 30°C from lower value. above (threshold) : when temperature crossed below or equal to 30°C from higher value. below (threshold) Data Structure for holding event structure RxJS offers which can be used to emit events to multiple subscribers. Subject { (sensor) { .subscriptions = { : Subject(), : Subject()
    };
  }
  
} class Thermostat constructor // data structure for holding subscriptions this above new below new Notice, there are two objects. You can also create a single object named with direction or . Subject Subject ThresholdCrossed above below 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. offers API which would be called whenever there is new data is available. on Subject subscribe on(event, action) { .subscriptions[event].subscribe( action(v));
} // sanatize event .. left code this => v Publishing Events Consider method which detects the rise and falls in temperature and publishes event accordingly using API. monitor next monitor(currentTemperature) { (
    currentTemperature > THRESHOLD 
    && .lastRecordedTemperature <= THRESHOLD
  ) { .subscriptions[ ].next(currentTemperature);

  } (
    currentTemperature <= THRESHOLD 
    && .lastRecordedTemperature >= THRESHOLD
  ) { .subscriptions[ ].next(currentTemperature);
  } .lastRecordedTemperature = currentTemperature;
 } // when temperature cross above THRESHOLD if this // publish event this "above" else if this // publish event this "below" this Whenever is called the API would be triggered; by design, the callback would be called. next on 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. below above thermostat.on( , t => { .ac = ; .window = ;
});

thermostat.on( , t => { .ac = ; .window = ;
}); "below" this false this true "above" this true this false Wiring all pieces together. Fiddling Any variation you make with the above code itself a pattern: Keeping event subscription data in the of Event-Emitter and Event-Listener is an pattern. mediator class in-memory Event Bus If the event holds enough information that Event-Listener doesn’t look back to Event-Emitter; it is pattern Event Carried State Transfer If you store all events in datastore, it is pattern Event Sourcing (possible for backend side). If there is a network partition between Event Publisher and Event Subscriber, then collectively, it is a . It is build using queuing technologies Reactive System (possible for backend side). An event may contain, reference or link back to its source; it is pattern. In HTML DOM, each event has a field named target to point back to its source. Source Aware Event Footnotes ocument bject odel is the parsed tree object representation of HTML document.A paradigm is a of programming elements. D O M conceptual view More About Event-Driven https://www.youtube.com/watch?v=STKCRSUsyP0&vl=en Previously published here .

Flow

Target

YouTube

What Is EditorConfig And Why You Should Use It

Convert Formatted Text Into a Data Structure Using Parsing

Visit my site.

Read My Stories

Too Long; Didn't Read

Make resilience your competitive advantage

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

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

Convert Formatted Text Into a Data Structure Using Parsing

A Modern Stack to Build a Real-time Event-driven App

Apache Kafka: How Does It Work?

Auto-generation of Documentation for Event-driven Architecture

Building Efficient Crypto Trading Software With Python

Convert Formatted Text Into a Data Structure Using Parsing

A Modern Stack to Build a Real-time Event-driven App

Apache Kafka: How Does It Work?

Auto-generation of Documentation for Event-driven Architecture

Building Efficient Crypto Trading Software With Python

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps