Introduction to RxJS

RxJS is a JavaScript library that uses observables to work with reactive programming that deals with asynchronous data calls, callbacks and event-based programs. RxJS can be used with other JavaScript libraries and frameworks. It is supported by JavaScript and also with typescript.

The essential concepts in RxJS which solve async event management are:

• Observable: Creates an observer and attaches it to the source where values are expected, for example, clicks, mouse events from a dom element or an Http request, etc.

• Observer: It is an object with next(), error() and complete() methods, that will get called when there is interaction to the with the observable i.e. the source interacts for an example button click, Http request, etc.

• Subscription: When the observable is created, to execute the observable we need to subscribe to it. It can also be used to cancel the execution.

• Operators: A pure function that takes in observable as input and the output is also an observable with operations like map, filter, concat, reduce, etc.

• Subject: A special type of Observable that allows values to be multicasted to many Observers, and the only way of multicasting a value or event to multiple Observers i.e. talk to many observers.

• Schedulers: A scheduler controls the execution of when the subscription has to start and notified. e.g. setTimeout or requestAnimationFrame or others. A Scheduler lets you define in what execution context will an Observable deliver notifications to its Observer

When to use

If project consists of lots of async task handling than RxJS is a good choice. It is loaded by default with the Angular project.

Advantages

• RxJS can be used with other Javascript libraries and frameworks. It is supported by javascript and also with typescript. Few examples are Angular, ReactJS, Vuejs, nodejs etc.

• RxJS is an awesome library when it comes to the handling of async tasks. RxJS uses observables to work with reactive programming that deals with asynchronous data calls, callbacks and event-based programs.

• RxJS offers a huge collection of operators in mathematical, transformation, filtering, utility, conditional, error handling, join categories that makes life easy when used with reactive programming.

Disadvantages

• Debugging the code with observables is little difficult.

• As you start to use Observables, you can end up your full code wrapped under the observables.

Installation and Imports Example:

npm install ---save-dev rxjs

import { Observable, of, pipe, interval, fromEvent } from 'rxjs';

import { filter, map, reduce } from 'rxjs/operators';

Reading Material

 Why is it being used in Eshopbox?

• For manipulating data in angular.

Audience

All Front end and Mean Stack Engineers