Reactive Programming

Mostly Front-end developers who are listening Reactive word first time they confuse it with React library. Actually it’s completely different.

Today I am going to explain about Reactive Programming and how to do it in JavaScript.

This article doesn’t go deep, it will help you to imagine the basic concepts of Reactive Programming and will help to find more good topics related to this article.

Before going to understand Reactive Programming, I would like to tell you about Imperative Programming.

What is Imperative Programming?

Imperative Programming is a programming paradigm that uses statements that change a program’s state.

Example of Imperative Programming

<a href="https://medium.com/media/7376f8eacdd32b10f684c4b368bf65fd/href">https://medium.com/media/7376f8eacdd32b10f684c4b368bf65fd/href</a>

It means that t is assigned the result of n+m

<a href="https://medium.com/media/500c21c0601eb601fac07e6a3fe4dc1d/href">https://medium.com/media/500c21c0601eb601fac07e6a3fe4dc1d/href</a>

Later the values of n and/or m, can be changed with no effect on the value of variable t.

What is Reactive Programming?

Reactive Programming is a declarative programming paradigm concerned with data streams and the propagation of change.

If we try previous example using Reactive paradigm, the result will look like this

This is not working example (easy to understand)

<a href="https://medium.com/media/efb478c2490f3c09bd52803bfab82572/href">https://medium.com/media/efb478c2490f3c09bd52803bfab82572/href</a>

Here is a working simple example using RxJS library with Node

<a href="https://medium.com/media/83368afc1484c2c1f8c6649d2429da59/href">https://medium.com/media/83368afc1484c2c1f8c6649d2429da59/href</a>

As you see, in Reactive Programming, on the value of variable t is automatically updated whenever the values of n changes, without the program having to re-execute.

It’s common to use the $ suffix to qualify variables that mean as a streams.

Reactive Programming is programming with asynchronous data streams.

What is Stream?

Streams are a sequence of values over time.

It means a Stream is simply a collection that arrives over time.

More about Stream here
https://www.youtube.com/watch?v=UHI0AzD_WfY

ReactiveX

http://reactivex.io/

This is a rewrite of Reactive-Extensions.

An API for asynchronous programming with observable streams.

Rx has many libraries for different programming languages.

RxJS

https://github.com/ReactiveX/rxjs

Lodash for async.

It’s the most popular library for JavaScript which helps to do Reactive Programming.

RxJS has many operators which helps to do Reactive things more faster, also has many operators which works with DOM elements.

redux-observable

https://redux-observable.js.org/

RxJS 5-based middleware for Redux.

redux-observable helps to do asynchronous actions using Redux library like redux-saga or redux-thunk.

Summary

Learning RxJS and starting to use it is not very easy for beginners, because to start understanding how it works and how you can use it, you will need to spend more time on investigation and learning more to start using it in your project.
You don’t need use RxJS everywhere in your project, just you need to understand where and in which situation you can use it and resolve your issues more effective.

Thanks for reading my first article, If you have any questions or anything to say feel free.

Good sources
RxJS 5: https://www.youtube.com/watch?v=COviCoUtwx4
redux-observable: https://www.youtube.com/watch?v=AslncyG8whg
Crash Course: https://www.youtube.com/watch?v=ei7FsoXKPl0

The websites from where I have used sources for this article
reactivex.io, Wikipedia