RxJS terms: Observables, operators, observer, subscription, subject, and scheduler.

In reactive programming, there are 6 popular terms are:

• observable
• operators
• observer
• subscription
• subject
• scheduler

In this story, I will introduce these terms as fundamental knowledge to start learning reactive programming for a newbie.

Observable

Observable is a stream or source of data that can arrive over time.

In an Angular application, you can create a data source from 2 main cases:

HTTP request:

import { ajax } from "rxjs/ajax";const URL = "https://jsonplaceholder.typicode.com/posts";
const posts$ = ajax.getJSON(URL);

UI events:

import { fromEvent } from 'rxjs';const searchBtn = document.getElementById('search-user');
const searchUser$ = fromEvent(searchBtn, 'click');

An RxJS Subject is a special type of Observable that allows values to be multicasted to many Observers.

Note: observables are unicast. It means that each subscribed Observer owns an independent execution of the Observable.

---

Subscription

A Subscription is an object that represents a disposable resource, usually the execution of an Observable.

It will be created whenever you subscribe an observable. The function that you supply is an Observer where we make the decision how to react to each event that happens.

An Observer has 3 main functions: next(), error(), and complete().

import { fromEvent } from 'rxjs';const searchBtn = document.getElementById('search-user');
const searchUser$ = fromEvent(searchBtn, 'click');const subscription = searchUser$.subscribe(event => console.log(event));

Important Note: Once calling subscribe, it will create a subscription and at the end of the component lifecycle, you need to remove it to avoid a memory leak.

Observer uses default scheduler in reactive programming which is executed before observable start emitting any notification.

You can customize your own scheduler and apply it to your observable. You can think that schedulers are centralized dispatchers to control concurrency, allowing us to coordinate when computation happens on e.g. setTimeout or requestAnimationFrame or others. This will make your web application have better performance.

To be more simple, scheduler is a mechanism to “schedule” an action to happen in the future.

---

Operators

Operators offer a way to manipulate values from a source, returning an observable of the transformed values.

To be simple, you can think operators are function.

There is 2 kind of operators:

• Pipeable Operators
  A Pipeable Operator is a function that takes an Observable as its input and returns another Observable. It is a pure operation: the previous Observable stays unmodified.You can think that this kind of operators are a place that we can apply functional programming, just like pipe function or compose function.
• Creation Operators
  Creation Operator is an operator that can be called as standalone functions to create a new Observable.You can think that this kind of operator will help you in creating a new observable.

import { of } from 'rxjs';
import { map } from 'rxjs/operators';const dataSource = of(1, 2, 3, 4, 5); // of(...) is creation operators which create new observableconst subscription = dataSource
.pipe(map(value => value + 1))
.subscribe(value => console.log(value)); // map(...) is Pipeable operator