A look at Reactive JavaScript through the lens of MVI
Disclaimer: Reactive Javascript and React are two separate entities. They may share some common paradigms but they are in no way related to each other!
Reactive programming is a paradigm where data is seen as streams, where any DOM event can generate some streams of data. For those coming from an object oriented programming background, this may be a bit difficult to digest but clicking on a button or entering data via key inputs actually generates an asynchronous data stream.
These data streams can be easily manipulated such that two or more data streams can be combined to create a single source of input and one data stream can be intercepted to create multiple data streams. These streams utilize the functional aspect of Javascript such that they can be mapped from one stream to another, filtered to extract some relevant information and reduced so that several streams can be combined to one.
A MVI (Model View Intent) framework utilizes these data streams in the form of source and sink. A source is the input to your main function and the output is the sink. Now what MVI aims at is decluttering your main function into smaller functions in order to maintain separation of concern i.e that your main function can be divided into two functions one which is the logic which takes an input stream and process it and passes this data stream to an effector which changes the DOM by subscribing to the input stream. This is an abstract explanation of MVI. Let’s dive in a little deeper.

The model in the MVI is the manipulator and processor of streams, the view is what shows the effect of changes done by the model to the stream and the intent is the user action which causes the change in the stream.
We will understand this concept with a small code example. To get started grab xstream off a CDN, put it in the file which intializes your application and you are good to go. You can also install it as an npm dependency by running `npm install xstream`.
To learn more about xstream, checkout https://github.com/staltz/xstream.
Below is a simple function which takes a stream of natural numbers prints the square of all even natural number.
Here is the code.
Now we improve the implementation by separating logic from effect.
The above code can be compared to the analogy of MVI, where the view logic goes into the effector which most of you must have already guessed. Models are responsible for managing states of the application. In our case we have a reactive model represented by `state$`. It is the manipulated stream that is returned by the processing logic and passed onto effector. The intent is the user action of clicking on the button to view the squares of whole even numbers.
The above code can be written using Rx.js Observables. You can read more about Observables here. There are various sources available out there, but this one really helped me understand the nitty-gritty of Observables.
Finally, thanks to https://egghead.io for an amazing course on Cycle.js which is a reactive Javascript framework, taught by its creator André Staltz.
This article covers the idea that leads to Cycle.js. If you want to learn more about the framework try going through the documentation at the link below.
For the Cycle.js course go to
Thanks for reading, all feedback is appreciated!
