Understanding Reactive programming

In Event-Driven programming, you would define an event handler and attach it to an event source. In more concrete terms, if you had a save button, which exposes an onClick event, you would implement a confirmSave function, which when triggered, would show a popup to ask the user Are you sure?. Look at the following figure for a visualization of this process.

Event-Driven Implementation

In short, you would have an event firing once per user action. If the user clicks on the save button many times, this pattern would gladly render as many popups as there are clicks, which doesn't make much sense.

The publish-subscribe (pub/sub) pattern is a different type of event-driven programming. In this case, we can write multiple handlers to act on the result of a given event all simultaneously. Let's say that your app just received some updated data. The publisher will go through its list of subscribers and pass on the updated data to each of them. Refer to the following diagram, how can updated data event trigger an updateCache function that can update your local cache with new data, a fetchDetails function that can retrieve further details about the data from the server, and also a showToastMessage function that can inform the user that the app just received new data. All these events can happen asynchronously; however, the fetchDetails and showToastMessage functions will be receiving more data than they really need, and it can get really convoluted to try to compose these events in different ways to modify application behavior.

Pub/Sub Pattern Implementation

In reactive programming, everything is treated as a stream. A stream will contain events that happen over time and these events can contain some data or no data. The following diagram visualizes a scenario where your app is listening for mouse clicks from the user. Uncontrolled streams of user clicks are meaningless. You exert some control over this stream by applying the throttle function to it, so you only get updates every 250 milliseconds (ms). If you subscribe to this new event, every 250 ms, you will receive a list of click events. You may try to extract some data from each click event, but in this case, you're only interested in the number of click events that happened. We can shape the raw event data into number of clicks using the map function.

Further down the stream, we may only be interested in listening for events with two or more clicks in it, so we can use the filter function to only act on what is essentially a double-click event. Every time our filter event fires, it means that the user intended to double-click, and you can act on that information by popping up an alert. The true power for streams comes from the fact that you can choose to act on the event at any time as it passes through various control, transformation, and filter functions. You can choose to display click data on an HTML list using *ngFor and Angular's async pipe, so the user can monitor the types of click data being captured every 250ms.

A Reactive Data Stream Implementation