RxJS 7 - Types of Observables

Here are my detailed notes from the fantastic course created by Jurek Wozniak, called RxJS 7 and Observables: Introduction.

In order to understand the concept please consider buying the course yourself, these notes are simply subsidiaries

Types of Observables

If an observable has a defined set of possible values, or if its value is related to the interval it is in and changes based on defined rules we call it cold observables.

If an observable’s value based on user’s actions for example a dom event or mouse position we call it hot observable

An http request is also counted as a cold observable.

The main rule that seperates cold observables from the hot ones is, if each observation occurs independent from each other or not

It doesn’t have to contain the same events for each subscription, in our example we will send an http request to a random api, and even though the response we receive changes, because of the whole process was independent per each subscription we call it a cold observable

Cold Observable

import { ajax } from "rxjs/ajax";

const ajax$ = ajax<any>('https://random-data-api.com/api/name/random_name');

ajax$.subscribe(
  data => console.log('Sub 1:', data.response.first_name)
);

ajax$.subscribe(
  data => console.log('Sub 2:', data.response.first_name)
);

ajax$.subscribe(
  data => console.log('Sub 3:', data.response.first_name)
);

Hot Observables

In the hot observables, observables are connected to the same resource, therefore effected by each other.

For example a dom event like resizing a window would effect all the observer listening that observable

import { Observable } from 'rxjs';

const helloButton = document.querySelector('button#hello');

const helloClick$ = new Observable<PointerEvent>((subscriber) => {
  helloButton.addEventListener('click', (event: PointerEvent) => {
    subscriber.next(event);
  });
});

helloClick$.subscribe((event) =>
  console.log('Sub 1', event.type, event.x, event.y)
);

helloClick$.subscribe((event) =>
  console.log('Sub 2', event.type, event.x, event.y)
);

We can also subscribe another observer after a while

import { Observable } from "rxjs";

const helloButton = document.querySelector('button#hello');

const helloClick$ = new Observable<MouseEvent>(subscriber => {
  helloButton.addEventListener('click', (event: MouseEvent) => {
    subscriber.next(event);
  });
});

helloClick$.subscribe(
  event => console.log('Sub 1:', event.type, event.x, event.y)
);

setTimeout(() => {
  console.log('Subscription 2 starts');
  helloClick$.subscribe(
    event => console.log('Sub 2:', event.type, event.x, event.y)
  );
}, 5000);

Hot vs Cold

Cold: Produces the data inside

New subscriber → new data

*****Hot:***** Multicasts the data from a common source

All subscribers → common data

Observers can change their behaviour with time a hot observer can be a cold one

Let's keep in touch

Hey, thanks a lot if you read it so far.
I want you to keep in touch for more sweet content.
Please subscibe in Dev.to and other channels (🦸‍♂️ especially twitter)

Twitter 🐦 https://twitter.com/barisbll_dev
Linkedin 📎 https://www.linkedin.com/in/barisbll-dev/
Github 👨🏻‍💻 https://github.com/barisbll
Medium 📰 https://medium.com/@barisbll