Introduction to RxJs

RxJs is javascript’s implementation of ReactiveX. It is a library to compose asynchronous event-based programs. It provides this feature by its core object called Observable.

Some essential concepts of RxJs:

• Pull vs Push: Two different protocols of production and consumption of data.
• Observable: represents the idea of an invokable collection of future values or events.
• Observer: is a collection of callbacks that knows how to listen to values delivered by the Observable.
• Subscription: represents the execution of an Observable, is primarily useful for cancelling the execution.
• Operators: are pure functions that enable a functional programming style of dealing with collections with operations like map, filter, concat, reduce, etc.
• Subject: is the equivalent to an EventEmitter, and the only way of multicasting a value or event to multiple Observers.
• Schedulers: are centralized dispatchers to control concurrency, allowing us to coordinate when computation happens on e.g. setTimeout or requestAnimationFrame or others.

Pull vs Push

What is pull?

In pull systems consumers receives data on demand when it wants. Functions are a good example of this. Functions either hold/manipulate or fetch data and provides caller when it wants.

What is push?

In push systems, the data producers determines when the data should be handled. Promise is one such example of this.

Observable

Observables are lazy Push collections of multiple values.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

const { Observable } = require('rxjs');

const observable = new Observable((subscribe) => {
    subscribe.next(1);
    subscribe.next(2);
    subscribe.next(3);
    setTimeout(() => {
        subscribe.next('Done');
        subscribe.complete();
    });
});

observable.subscribe((value) => console.log(value), (err) => console.error(err), () => console.log('Observable Completed'));
console.log('Hello World');

Result:

1
2
3
4
5
6

1
2
3
Hello World
Done
Observable Completed

Observer

Observer is a consumer of values delivered by Observable. It has callbacks for all three types of notifications that are delivered by Observable. i.e. next, error and complete. A typical observer looks like the following:

1
2
3
4
5

const observer = {
  next: (obj) => {},
  error: (err) => {},
  complete: () => {},
};

Notice: Following subscribe method of Observable triggers callback with observer as param.

1

observable.subscribe((value) => console.log(value), (err) => console.error(err), () => console.log('Observable Completed'));

Subscription

Subscription is a disposable object that subscribes to an observable. The subscription to an observable can be ended by calling unsubscribe() method of subscription. It cleans up any resources that were created while listening to an observable.

Following is an example of subscription object and its subsequent unsubscription:

1
2
3
4
5
6

const observable = new Observable(() => {});
// subscription
const subscription = observable.subscribe(x => console.log(x));

// unsubscribing
subscription.unsubscribe();

Operators

Operators are functions. Operators helps perform complex operations on data in asynchronous and declarative manner. There are two types of operators:

• Pipable operators
• Creation operators

Pipable Operators

Pipable operators are operators that can be piped to observable in the following form:

1
2

const observable = new Observable(() => {});
observable.pipe(operator1(), operator2(), operator3()...);

Each operator is a pure function, meaning that it does not change the parent Observable but returns a new one with its own notifications. You can take a look at all the operators at https://rxjs-dev.firebaseapp.com/api under operators section.

Creation Operator

Creation operators are standalone function that create observable. e.g. of() operator creates observable that emits its parameter contents one after the other.

Subject

Subject is an Observable, but has an ability to multicast data to multiple observers. It holds the registory of callbacks to many observers.

Main differentiating point of Subject from Observable is that Subject.subscribe() does not invoke new execution of values of Observable but, it just registers for future values.

Every Subject is an Observable.

Also, Every Subject is an Observer. It has next(), error() and complete() methods.

Schedulers

Schedulers are timeline controllers of subscriptions and notifications. It controls at what moment it fires them. It has an illusion of timer.