View on GitHub


Reactive Programming

What is Reactive Programming

When we write a program, we are working with data. This data may come from remote server or from local storage, may be temporary in the memory, or persistent. We are displaying it to the user in some form. It is changing on user interactions, or at time intervals.

A reactive environment consists of these three things.

A very simple example is a click counter - an html page with a DIV tag containing a number and a BUTTON. When the user clicks on the BUTTON the number in the DIV tag is incremented by one.

Here the data flow can consist of an integer variable containing the number and the text representation in the DIV tag. The action flow is inflicted by changing the value of the integer variable - the text in the DIV should be updated. And the events causing the action flow executions are provided by the user clicks.

If we use a functional reactive programming implementation we will have a stream attached to the BUTTON click action. From this stream a new stream will be created that on every event coming from the first one it triggers the integer value - 1. And there will be an accumulating stream that sums all the values comming from the stream emmiting integers. On every event/change comming from the accumulating stream the DIV text will be updated.

If we use an object-oriented reactive programming implementation, we will have an object containing a field with the integer counter, that is bound to the DIV's text in some way. On every click event the integer field is set to its old value plus one.

Proact.js incorporates both the approaches - You have the three dependent streams - event/integer/accumulating and the object with the integer field bound to the DIV's text. Now, the accumulating stream is plugged into the integer field. This means that the field is updated by every value comming from the accumulating stream.

Here is the click counter, implemented using ProAct.js.