Rx.JS — Things that you should understand before start.

If you have ever worked with Angular, You probably might have seen something like Observables, Subscribe(), Subject and a few more. Sometimes we may be using it without knowing what it is. If you haven’t familiar with those terms. Don’t worry, This is not something about Angular. This is all about an awesome and powerful Javascript library that you should learn.

Let's jump into the topic 🚀

Observer Pattern 🧐

Observer Pattern is one of the Software Design Patterns. If you don’t have any idea about this Observer Pattern, I highly recommend you to have a look and come back for a better understanding. Because I am not going to drag this story by explaining it. Anyway, Let me give a quick introduction.

Observer Pattern is a Design Pattern that enforces Event-Driven Application Development. This pattern mainly has two objects, One is “Subject” and another one is “Observer”. Basically Subject maintains a list of Observers. It will notify them when the state changes.

High-Level Example

The YouTube (Application), Has more channels (Subjects).
We (Observers) subscribe to one of our favourite channels (Subject).
So, Whenever the channel (Subject) publishes new content (Data/State), It will notify us (Observer).

As simple as that. 😉

Reactive X ⚡️

ReactiveX is a library for composing asynchronous and event-based programs by using observable sequences.

ReactiveX is a library that allows us to extend above Observable Pattern and build Reactive, Asynchronous and Even-Based Applications. ReactiveX provides wide languages support. RxJS is the javascript version of it. You can find all other language support here.👇

ReactiveX - Languages

Rx.JS 🔥

As I mentioned, RxJS is the Javascript library that extends ReactiveX. Before we getting started to code with RxJS, We should clearly understand its key objects. Otherwise, we cannot use it efficiently. RxJs is all about these 3Os and 3Ss,

1. Observable 🔊
2. Observer 🕵🏻‍♂️
3. Operators 🛠
4. Subscription 🔔
5. Subject 🗃
6. Scheduler ⏰

1. Observable

Observables are the object that push/stream the data to their Observer.

We can eat only eatable objects. Also, we can move only movable objects. Like that, We can only Observe, The Observable objects.

So in Rx.JS, If we want to Observe an object’s changes, The object should be Observable. In order to execute the Observable, It needs at least one Subscriber.

Observables are unicast. That means it can only send data to One Observer. If you subscribe Multiple Observers to Observable, It will be invoked multiple times for each Observer.

Observables are uni-directional. That means It can only pass data from Observable to Observer. We cannot feed data into Observer from the outside.

2. Observer

An Observer is an object that subscribes to Observables so it can be called by Observables to emit the data.

We subscribe to Newsletters, So we can get updates. In this case, We are Observers and Newsletter is Observable.

An Observer object will have 3 methods next(), error() and complete(). These methods will be called by the Observable that it subscribes.

next(param)

This method will be called by the Observable to send new data. It accepts one parameter as the data sent by the Observable. The data can be anything such as Number, String, Array, Object & etc.

error(param)

Same as next(), But here Observable calls this method in order to notify any error. This method also accepts one parameter that is an error message from the Observable.

complete()

When the Observable is done with notifying and if there are no events left, It will call this method to notify that there is nothing to emit. This method doesn’t accept any parameters.

3. Operators

Let’s talk about this at the end of this story. 😋

4. Subscription

An Observer or Observable cannot do anything by itself. In order to work with the Observable, An Observer should subscribe to it. A subscription is an object that holds the execution of an Observable. This subscriber has one method called unsubscribe(). This method just cancels the existing subscription. So the Observable will not execute the Observer anymore.

Also, A subscription may have another child subscription. In that case, If you unsubscribe the parent one, Then the child will be unsubscribed too.

5. Subject

Subjects are a special type of Observable. It can act as both Observable and Observer. That means you can use a Subject as Observable as well as Observer.

Subject as an Observable

Unlike the normal Observable, Subjects are Multicast. It can stream the data to multiple Observers without maintaining separate executions.

Subjects as an Observer

Subjects are bi-directional. You can pass data from Subject to Observer as well as Observer to Subject. You can simply feed data into the Subject by calling the next() method.

Subject vs Observable

Operators

Let’s discuss the skipped part Operators.

Operators are very important and helpful. These are just helper functions that make the complex async to be easily composed.

There are 2 types of Operators.

1. Pipeable Operators
2. Creation Operators

Pipeable Operators can be attached to an Observable using pipe() method. It will not change the existing Observable Object. Instead, It takes the existing Observable and outputs a new Observable.

Creation Operators are standalone functions that can create Observables from standard predefined behaviours or by combining other Observables. These operators cannot be piped with Observables.

Apart from Of() and First(), there are a lot of Operators that I can’t explain in this story. But I am pretty sure that If you understand this basics, Then you can easily understand others as well. Find more useful Operators below.

RxJS Operators: https://rxjs.dev/guide/operators

5. Scheduler

The scheduler is a control mechanism that takes care of, when a subscription starts and when the subscriber gets notified.

A Scheduler consists of the following components:

1. Data Structure: The scheduler knows how to store, arrange and queue the tasks based on their priority or any other ruleset.
2. Execution Context: The scheduler can control whether the task should be executed immediately or should be passed into another mechanism as a callback.
3. Virtual Clock: The tasks beings scheduled on a scheduler will follow the time that is denoted by the clock.

If you don’t understand the Scheduler concept. Don’t worry, It is not that necessary to start Rx.JS. I am stopping here because I want to make this story as basic and clear as possible. Just have look at this code so you will have a basic idea of how the scheduler works.

RxJS Scheduler: https://rxjs.dev/guide/scheduler

Conclusion

Rx.JS is the best library to build Asynchronous and Event-Driven Applications on Javascript. It is a standalone library so you can directly use it with any javascript framework or library. Rx.JS comes with Angular by default. In Angular, Rx.JS is very helpful to stream notifications and states across components.

I tried my best to keep this story beginner-friendly. I ignored the most confusing and advanced concepts. It is totally fine, If you understand what we discuss so far then you can start working on Rx.JS also you are capable of understanding advanced topics. Hope you find this useful.

Give few claps 👏, If you really like this.

Happy Coding… ❤️