RxJS Mastery – #1 Intro into Reactive Programming in JavaScript

RxJS is known as the reactive programming extension for JavaScript! This is the start of a RxJS series where we deep dive into the most important parts of this library. The reactive way is a good fit for a program that works event-based and asynchronous. Often programs for the web are written like that and this is why RxJS is so popular.

A reactive JavaScript example

First, let’s start with a quick example to get a first understanding:

fromEvent<MouseEvent>(document, 'click')
  .pipe(
    throttleTime(1000),
    map(event => event.clientX),
  )
  .subscribe(clientX => console.log(`click happened on x coordinate ${clientX}`));

In the above code the fromEvent function returns an Observable that emits events of a certain type. Here we’re dealing with ‘click’ events on the document. The fromEvent is a so-called creation operator. There are a lot of creation operators available in RxJS.
If there is something observable we need a way to introduce an Observer that can consume values. This is were the subscribe() method comes into play:

observable.subscribe(observer);

Here the observer is an object that allows to listen on delivered value by the observable. For that the observer implements callbacks.

Finally between observable and observer we have the chance to react on the emitted values. This is the most beautiful part of RxJS. In the pipe function (see first example above) we are passing pipeable operators. These operators are pure functions. They take an Observable as input and return another Observable. The previous Observable remains unmodified.

In our case the operators are the following:

  • throttleTime with a parameter of 1000 will emit a first value and then ignore values for 1s
  • map takes the click event as input and outputs the x coordinate of the click event

RxJs concepts and outlook

In the upcoming articles we are going to have a closer look at the relevant parts of RxJS. As there is already a lot of good NgRx material out there (rxjs.dev, learnrxjs.io, etc.), we’re trying to take a different angle to still provide value for the reader.

The essential concepts in RxJS are:

  • Observable: is basically a collection of future values or events that can be invoked. A special type of an Observable is the Subject that allows multicasting.
  • Observer: listens to values delivered by the Observable via notifications.
  • Operators: pure functions for a functional programming style dealing with collections with operations like map, filter, concat, reduce, etc.

We investigate all those building blocks in the next articles of this RxJS series. Therein the different concepts are explained and you will see:

  • 🎓 Compact explanations of the building block
  • 🚧 Which problems you can solve by using the specific RxJs parts
  • 🚦 How to test the different building blocks
  • 💪 Exercises to strengthen your understanding

Next up: #2 Observables.