If you have been using Lodash, then you will probably have an understanding of what the following statement means:

Think of RxJS as Lodash for events.

When you think of RxJs, think of Asynchronous(async) way of writing code. Basically RxJs is a library for managing Async events in a funnel flow method. Let’s take an example of how to control how many times a button is clicked:

Vanilla javaScript Way

1
2
3
4
5
6
7
8
9

var count = 0; var rate = 1000;
var lastClick = Date.now() - rate;
var button = document.querySelector('button'); 
button.addEventListener('click', () => { 
  if (Date.now() - lastClick >= rate) { 
    console.log(`Clicked ${++count} times`); 
    lastClick = Date.now();
  }
});

RxJs Observable Way

1
2
3
4
5
6

const { fromEvent } = rxjs;
const { throttleTime, scan } = rxjs.operators;
const button = document.querySelector('button');
fromEvent(button, 'click').pipe( throttleTime(1000), 
          scan(count => count + 1, 0) )
          .subscribe(count => console.log(`Clicked ${count} times`)); 

RxJs provides one core type, the observable, satellite types (Observer, Schedulers, Subjects) and operators (map, filter, reduce, every, etc) to allow handling asynchronous events as collections. Let’s take a look at 2 concepts of RxJs:

RxJs Flow

In our first example, where we controlled the number of time a button can be click, that is known as a flow. RxJs uses Operators to control how events flow.

1
2
3
4

const { fromEvent } = rxjs;
const { throttleTime, scan } = rxjs.operators; const button = document.querySelector('button'); 
fromEvent(button, 'click').pipe( throttleTime(1000), scan(count => count + 1, 0) ) 
.subscribe(count => console.log(`Clicked ${count} times`)); 

RxJs has other very useful flow control operators to manage how events flow. Example of such operators are filter, delay, debounceTime, take, takeUntil, distinct, distinctUntilChanged

RxJs Values

How to return values from an Rxjs ?

RxJs has a number value producing operators such as subscribe operator.

Subscribe

The Subscribe operator is the glue that connects an observer to an Observable. In order for an observer to see the items being emitted by an Observable, or to receive error or completed notifications from the Observable, it must first subscribe to that Observable with this operator. Let’s take a look at an example comparison on returning values between Vanilla JavaScript and RxJs. Here's how you can add the current mouse x position for every click, in plain JavaScript:

Vanilla javaScript Way

1
2
3
4
5
6
7
8

let count = 0; const rate = 1000; 
let lastClick = Date.now() - rate; 
const button = document.querySelector('button'); 
button.addEventListener('click', (event) => { if (Date.now() - lastClick >= rate) 
   { 
     count += event.clientX; console.log(count) lastClick = Date.now(); 
    } 
}); 

RxJs Way

1
2
3
4
5
6

const { fromEvent } = rxjs; 
const { throttleTime, map, scan } = rxjs.operators;
const button = document.querySelector('button');
fromEvent(button, 'click').pipe( throttleTime(1000), map(event => event.clientX), 
scan((count, clientX) => count + clientX, 0) ) 
.subscribe(count => console.log(count)); 

Other value producing operators are pluck, pairwise, sample