One of the main challenges in the world of web development is to achieve a seamless user experience. Many factors come into play when trying to achieve the goal of a smooth UX. The user interface, the load-time of webpages, and updating any data/input sent, are some prominent examples.

All web development frameworks offer tools that enable the developer to make the UX as smooth as possible. After all, it’s an important aspect of a website. In the case of the popular front-end framework Angular, such a tool is the RxJS library.

Through RxJS, Angular applications can employ the reactive programming and functional programming paradigms to ensure a smoothly working inside-out. This article acts as a quick guide to RxJS and how it is used in Angular applications. It will discuss some of its robust features and give you their flavor through code examples. Using RxJS to speed up and improve an Angular application’s UX is common practice and this article will show you why.

What does RxJS do exactly?

In the everyday workings of a website, it handles different requests and events. Requests like inputting/outputting certain data or transforming some data, and events like responding to a mouse click or keyboard key press. If all of the requests and events are coming in one after another (synchronously), they are responded to in that order. However, few frameworks can respond quickly and reactively in the case of asynchronous requests and events.

RxJS is a JavaScript library of functions that allow to smoothly handle asynchronous events and requests. The name comes from the fact that it enables reactive programming in JavaScript. It allows for playing with and tracking time in your Angular application. The amount of time between responses or events can be fine-tuned as required through RxJS, letting the developer control the responsiveness of the application.

RxJS also packs a variety of operators and also features error-handling functionality. Errors are caught and addressed so that they don’t affect the flow of the data stream, from the producer to the consumer.

How does RxJS work?

Push & Pull Based Data Sources

The first step to creating a pipeline in RxJS is wrapping the data source based on its nature and use. Primarily, there exists the producer of data and the consumer of data. In a Pull system, the consumer gets data from the producer whenever needed and the producer is unaware. In a

Push system, the producer pushes data onto any listening consumers, which then react to the received data.

Websites mostly face the scenario of push systems with multiple values coming in from the producer and the consumer (code at the back-end) processing it. RxJS accommodates this popular use case by making a data type called observable as its building block.

Observables

RxJS can achieve all of its wonderful features partly due to its relatively straightforward operating principles. It packages all the different kinds of events into a single type called the observable. Mouse clicks, keypresses, or HTTP requests are all same under the eyes of the observable. The concepts of production, consumption, and processing of data can be handled separately, thanks to observables.

Below is an example of creating an observable from a mouse event. The subscription is n observable that has subscribed to mouse movements. It will be listening for any mouse movement and after there is movement, it will print the coordinates of the cursor. If the cursor moves out of the window, the observable stops listening.

import { fromEvent } from 'rxjs';

const elem = document.getElementById('my-element')!;

const mouseMovements = fromEvent<MouseEvent>(elem, 'mousemove'); 

const subscription = mouseMovements.subscribe(ent => {

  console.log(`Coords: ${ent.clientX} X ${ent.clientY}`);

	if (ent.clientX < 40 && ent.clientY < 40) { 
    subscription.unsubscribe();
	}
});

Operators

Except for implementation, RxJS also provides utility functions to interact and modify observables. The functions are called operators and they are configured to produce functions that take an observable emitted value, transform them, and produce a new observable. An example is the map() operator, given in the following code example.

import { of } from 'rxjs';
import { map } from 'rxjs/operators'; 

const numbers = of(1, 2, 3);

const squares = map((val: number) => val * val); 
const squaredNumbers = squares(nums);

squaredNumbers .subscribe(x => console.log(x));

The great thing is that multiple operators can be piped together using the pipe() operator. Data can be formatted in a myriad of ways through the piping together of operators and then associated with an observable. These operators form the pipeline through which data passes when flowing from producer to consumer.

Why should I use RxJS?

A developer may ponder over the question of going ahead and including RxJS in their Angular application or not. After all, there are other programming paradigms available that can be used to handle asynchronous requests and events. However, the fact that RxJS focuses specifically on asynchronous programming makes it a strong contender against the rest.

Elements like observables, operators, and subscriptions enable each request and event to be handled separately and simultaneously. RxJS offers explicit time control through JavaScript’s timers so that delays can be introduced wherever necessary. It is also possible to merge outputs of several observables into a single data stream and further merge strategies for combining streams.

RxJS also has a comprehensive error-handling system in place. There are many powerful operators available that can catch failed operations without breaking the data stream. Operators like retry(), catch(), and finally() can be used to build robust error-handling strategies.

Ending remarks

As the internet grows, novel use cases and designs are required by websites along with scalability and smooth performance. The website of tomorrow will need to be ready to handle all different kinds of non-ideal scenarios. Especially catering to a large number of simultaneous requests and events.

To achieve the above, your Angular application will need RxJS if it expects a large number of visits and heavy simultaneous usage. Instead of keeping everyone waiting in line, RxJS can help to address all of them at once. With its straightforward syntax and robust pipeline, RxJS could be what your Angular application needs to be widely successful.

Understanding & using RxJS in Angular