Disclaimer : I am not going to explain observables, Observer,Subscriptions,Subscriber,preventing memory leaks… Just simple reactive programming.

a=74
b=18
c= a +b

The value of c => 92

If our program is completed here , we don’t have to go into reactive programming.

Now consider

a=a + 1

Stop..

It appears lame to use variables like a,b,c usage and incrementing one of it.

We will consider practical situation

Scenario

Donald Trump born on 14 June 1946 & Cheguara on same day (14 June) of 1928 , the age difference between these two is 18 years
Now we can write these as

let ageOfTrump = 74
let ageOfCheGuara = ageOfTrump + 18

so ageOfCheGuara would be 92
And the long kept secret about Age is , it always kept incrementing on birthday 😊

So if there is a method happyBirthdayTrump which increase age of trump

function happyBirthDayToTrump(){
    ageOfTrump=ageOfTrump + 1   
}

What should be the value of ageOfCheGuara after this method has been called?

Still  92, 

The contract (ageOfCheGuara = ageOfTrump + 18) denotes
ageOfCheGuara should always be sum of ageOfTrump & 18 , But unfortunately it was not always.

How to fix it

So to fix it , Whenever Trump got a birthday and his age gets incremented

We should also be updating ageOfCheGuara ,something like this

function happyBirthDayToTrump(){
    ageOfTrump=ageOfTrump + 1
    ageOfCheGuara =  ageOfTrump + 18

}

Now things are fine, Because i keep on insisting that relationship again.

Is there a way , I could specify only once the relationship and use it across the application

if I could update ageOfTrump, ageOfCheGuara should automatically be updated.

This is a common problem, if you are from C or C++ background you could have used pointer to look into address than its value, which will help us to solve these kindda issues.

But This is Javascript, we don’t do that. How can we do ?

By making every relationship as sacred and final and no unwanted updates for sake of programming, you have already been making your system reactive.

Making Reactive with RxJS

There are many ways to achieve it , We use Rx Libraries to achieve it here

So the
ageOfTrump = 74
ageOfCheGuara = ageOfTrump + 18

instead of using as variables we will have something like

const ageOfTrump = new BehaviorSubject(74)

BehaviourSubject helps us to set a default value 74
We can retrieve its current value by using getValue method

Don’t worry about these syntax, There are more than 100’s of operators. Just focus on the concept.

const ageOfCheGuara = ageOfTrump.pipe(
                        map(val=>val + 18)
                        )

by using pipe operator with ageOfTrump , we are specifying ageOfCheGuara depends on it.map operator accepts a function , which will receive the value from trump and transform the value

The happyBirthDayToTrump method will be

function happyBirthDayToTrump(){
    const incrementedAge =ageOfTrump.getValue() + 1
    ageOfTrump.next(incrementedAge)
}

The currentValue to be retrieved with getValue method

The value should be set with next method

Now we have made these variables reactive.

The entire source code is available on Link

The same has been demonstrated in video and available on

Link