What Is Reactive Programming and How Does It Work?

Reactive programming is a relatively new programming style for dealing with "events", supported by libraries for various programming languages, including RxJS and Bacon.js for JavaScript, Rx.NET for C# and RxJava for Java. For understanding the potential of reactive programming, one has to understand the semantics of events and how events differ from objects.

Objects and Events

In the real world, we have to deal with objects (such as balls or cars) as well as with events (such as a goal in a soccer game or a car accident). The same holds for the digital world, where we deal with programming objects and programming events, which may represent real-world objects and real-world events. Digital events, such as a Twitter tweet, an incoming HTTP response message or a user interface event (like a mouse click), are special kind of real-world events.

While objects exist in time, events happen in time, possibly changing the state of affected objects. Therefore, in an object-oriented programming language like JavaScript, real-world objects are represented by persistent programming objects, which are stored in databases, while real-world events always have an occurrence time and are represented by transient programming objects that are typically destroyed after being processed. Therefore, events are also said to be "consumed".

There is a special connection between objects and events: objects participate in events by playing a specific role. This includes the case where an object is affected by an event in the sense that its state is changed through the event. For example, one or more cars participate in a car accident, and their state may be changed through the accident. Also, a Twitter user may participate in a tweet as its user/author, as shown in the UML class diagram in Fig. 1, or an HTML element may participate in a mouse event as the target, as shown in Fig. 2. The class diagram of Fig. 2 also describes the class/interface hierarchy of clicks being mouse events and mouse events being DOM events such that click events inherit the screenX and screenY properties from MouseEvent and the target property and  preventDefault() method from DOMEvent.

An event is represented by a special programming object instantiating an event class (or interface) representing its type. Like any other programming object, a programming event may have property value slots, like the Tweet event {id: 4711, user: {id: 6253282, name:"realDonaldTrump"}, text:"..."}, according to the properties defined by its type, possibly including the event's occurrence time and references to the objects participating in it.

Events normally occur "asynchronously", that is, we don't know their occurrence time in advance (even when we expect them to occur soon, as in the case of promises), and we don't want to wait for them, but rather do some useful things meanwhile.

A program execution environment, like a web browser or NodeJS, defines a set of typed event sources. In the case of a web browser, they include various types of user interface events, which are not available, however, in a back-end environment like NodeJS.

Any event source can be associated with an event stream, which is simply the sequence of occurrences of events of the type defined by the event source. For instance, the Twitter tweets of Donald Trump define an event stream. Also the successive click events during a HTML page view session define an event stream. Since any event occurrence is reported with some event data, event streams are sometimes also called "asynchronous data streams". However, since the distinction between objects and events is helpful for understanding the semantics of reactive programming, we prefer the name "event stream" over "asynchronous data stream".

Reacting to Simple Events with Event Handlers

Processing an event means to react to it. The most widely used standard API for reacting to events is the "DOM Events" API, which defines how to register event handlers (or 'callbacks') in the form of event listeners and how to access event properties. An event handler is a procedure that defines a reaction to events of a certain type. For instance, we could define an event handler that shows the hidden content of a special web page section, containing an optional explanation, and that is triggered whenever the user clicks on the section heading. Here, the triggering event type would be "click" events on "section > h1" elements.

Reacting to Possibly Complex Events with Event Streams

The goal of reactive programming libraries like Rx is to provide data structures, like event streams, and procedures, like stream transformations and compositions, that allow representing and processing possibly complex events in a general way.

A simple event stream is bound to an event source, such as to a DOM event listener or to a promise. Thus, event streams subsume the event handler approach.

Derived event streams can be defined on the basis of simple streams representing event sources or other derived streams, with the help of transformations such as event filters and mappings, or with the help of composition operations such as merging two streams.

For instance, we could define a derived tweet stream by filtering Donald Trump's tweets using the keywords "Hillary" and merging the resulting stream with a tweet stream by Hillary Clinton filtered with the key word "Donald". Notice that event stream merging corresponds to a disjunction of event types.

Summary

Reactive programming libraries like Rx support processing simple and complex events with the help of event streams. While they increase developer productivity when dealing with complex events, they are still useful, although not required, for dealing with simple events, due to their elegant syntax.