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 data flow is a graph of dependencies. Dependencies between a raw data and its representations or between a set of values and a value created by a computation that depends on these values.
- An action flow is an operation or set of operations executed on the data flow and its consequences. For example the data in a node of the dependency graph is changed - all of its dependent nodes chould be re-computed in some way and the data flow should become valid again.
- A change or an event is something that triggers the action flow.
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.