Most front-end developers who are listening to Reactive word the first time confuse it with React library. It’s completely different.
Today I will explain 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 you to find more good topics related to this article.
Before understanding 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
It means that t is assigned the result of n+m
Later we can change the values of n or m with no effect on the 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 the previous example using the Reactive paradigm, the result will look like this.
This is not working example (easy to understand)
Here is a working simple example using RxJS library with Node
As you see, in Reactive Programming, the value of variable t is automatically updated whenever the values of n change, without the program having to re-execute.
Usually, the $ suffix qualifies variables that mean a stream.
Reactive Programming is programming with asynchronous data streams.
Streams are a sequence of values over time.
Watch this short tutorial for a better understanding of Streams.
ReactiveX
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 help to do Reactive things faster. It also has many operators that work with DOM elements.
redux-observable
https://redux-observable.js.org/
redux-observable helps to do asynchronous actions using Redux libraries like redux-saga or redux-thunk.
Summary
Learning RxJS and starting to use it is not very easy for beginners because to begin understanding how it works and how you can use it, you will need to spend more time on the investigation and learning more to start using it in your project.
You don’t need to use RxJS everywhere in your project. You need to understand where and in which situation you can use and resolve your issues more effectively.
Thank you, feel free to ask any questions or tweet me @nairihar
Also follow my “JavaScript Universe” newsletter on Telegram: @javascript
Additional resource:
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
