RxJS is a JavaScript library which implements Reactive Programming concepts. RxJS is used in Backend (NodeJS, Game engines, js powered DB engines) as well as in frontend web applications. It is well supported in major frontend frameworks like Angular, React and Vue.js. Before learning RxJS in details, it is important to get a good understanding of the reactive programming core concepts. In this RxJS introduction article, you will learn the basics of Reactive programming and get familiar with the core components of RxJS.

NOTE: Please pay absolute attention to below theory part of reactive programming and RxJS. This is the foundation of rxjs knowledge.

What is Reactive Programming?

Reactive programming is a different way of handling data and events. Here the code reacts to every event/change that happens. Code becomes cleaner and more maintainable when you use reactive programming.

In reactive programming, you consider everything as asynchronous data streams (or async event streams). These streams could be UI-events, tweets, video stream, data coming from sockets and so on. Imagine, you have Observers assigned to these streams which can react to every event. Then there are magic functions to Filter, Combine or even to report an error when it happens.

As you know, data can be of any forms, a stream of data, a stream of events, data from REST API, data from WebSockets, the user events such as mouse clicks, key inputs and so on. In Reactive Programming, this is what is known as Observable sequences. A function can subscribe to these Observables to receive asynchronous data whenever one arrives and they are Subscribers. Reactive programming is the Observer Design Pattern used in a slightly different way.

Many says, Reactive concepts for programming is what Henry Ford’s assembly line was to cars.

Annonymous blogger

What is a Stream?

A stream is considered as a sequence of data or events ordered in time, example – tweets, mouse events, socket data. These streams can emit 3 things, a value, an error (whenever anything goes wrong), or a completed signal. The completed signal indicates that the stream is closed.

In reactive concept, we will call a stream as Observable.

What is RxJS?

RxJS is the most popular Reactive library for JavaScript. RxJS – Stands for Reactive Extensions For JavaScript. It is written in TypeScript and has no dependency on any third party JavaScripts. The core concepts of RxJS are as below.

  1. Observable: Represents the invokable collection (stream) of future values or events.
  2. Observer: Is a callback or collection of callbacks that listens to values delivered by the Observables.
  3. Subscription: Represents the execution of an Observable.
  4. Operators: Magic functions to perform manipulations with the stream values like map, filter, concat, etc.
  5. Subject: Helps in multicasting a value or an event to multiple Observers.
  6. Schedulers: Centralized dispatchers to control concurrency. e.g. setTimeout etc.

The above terminologies could be frustrating if you are a complete beginner. Trust me, things will be simpler as you proceed further. As part of the rxjs introduction, I have only discussed a simple example. They are discussed in details in the next part of the tutorial.

Install RxJS in your js projects using the command below.

npm i rxjs

Who uses RxJS?

I don’t know any technology company who is not aware of RxJS. Almost every software company using Reactive Programming today to enhance the performance of the applications. According to the ReactiveX official site, Microsft, GitHub, Couchbase, Airbnb, Trello are the few big names using Reactive Programming.

When to use RxJS?

Imagine a use case like Ecommerce UI application where the asynchronous computation of Product price and offers gets complicated. Such hard to maintain state-machine best suits for RxJS.

If your application has a few use cases that suits reactive programming, then writing your own code would make more sense. Note, RxJS is great, but only if you master it well.

A simple example

As an example, see how a simple dom click event is handled using an event listener. Also, see how the same is achieved using RxJS (reactive extension).

//Using plain old style
document.addEventListener('click', () => console.log('Clicked from event Listener!'));
import { fromEvent } from 'rxjs';

const domObservable$ = fromEvent(document, 'click');
domObservable$.subscribe(() => console.log("Clicked from RxJS example!")));

As shown above, usually you would only assign an event listener to the dom element. But, in the case of RxJS, you need to create an Observable first, and then subscribe the observable. The same code can be broken down as below.

import { fromEvent } from 'rxjs';

fromEvent(document, 'click').subscribe(() => console.log('Clicked using Rxjs example!'));

This is all as part of the Rxjs introduction and reactive programming concept. I will discuss the Observable and observers in details in the next page of this tutorial. If you found anything difficult to understand, please leave a comment for me below.

By |Last Updated: April 1st, 2024|Categories: RxJS|

Table of Contents