May 31, 2021 5 min to read

RxJS!

RxJS

How are you doing? In today’s post I want us to start to see and share full concepts about this library.

I think this post will be the first of many more … and yes! RxJS is worthy and deserving of a good space, as I think it is a topic that more than once has made us want to cry.

Well, and yes, the 2 memes were necessary, we suffered a lot! Anyway, I’ll put it in Creole, something like a version of “te lo resumo asi nomas” but to rub elbows? And… hopefully yes, I’ll keep insisting on super short posts that make you want to read. The official RxJS guide here. Well here we go!

What is it?

It’s a reactive programming library for JS, in Creole, everything we have always done to work with asynchrony (future data, that doesn’t exist yet) has been a huge hassle to handle in our apps (promises and among others), and this will come to save us. So no matter what framework you are developing in, there is no excuse! I’m not going to lie to you, there is a lot of stuff going around and it’s just because of this crazy thing. So let’s try to win the battle.

Introduction

Let’s imagine that we have a lot of information that we must process and show in our app, a collection (an array so to speak), we process it a little bit to show it in some HTML and that’s it. If we are talking about something synchronous, something like this in our front end code:

const array = [
    {name: 'sol', lastName: 'lopez'},
    {name: 'dario', lastName: 'barassi'}
]

we have no problem, because we have this collection static and always available in our app to have a h1 with the name of the best one

NOW the issue is when we talk about asynchrony, and it is when, for example, we make use of some external service that has to bring us info and we have to wait for that info to process and display it somewhere in our app.

That is exactly the job that our little friend RxJS comes to solve. In fact, if we want to give certain form to our sync or static array that we would do? we would use some operator (of the same Array.prototype) some map, filter, reduce blah blah blah…….

Well, exactly that also comes to solve this lib. We will be able to use many operators, including map, filter, reduce for these asynchronous arrays/future arrays that do not exist yet.

We call this flow of data and future collections streaming, as if it were Netflix, data will be arriving at different times and at different rates, in fact we will not even know the amount of them and our app should know how to manage and handle that data when it arrives to our app. And in fact, this way of representing those streamings is through marbles (marble). But don’t worry, we’ll see that later.

To install the lib is super easy, the steps here

Observable

Now, with this mini intro in mind, we have to start talking about observables and other related concepts, to understand how we are going to deal with this asynchronous future data.

The observable then represents the idea of a collection of future data/values/events whatever you want to call it, that can be invoked.

As any function, by itself it does nothing if you don’t invoke it, so if you don’t subscribe to the observable, nothing will happen!

You can also CREATE observables, that is, “future data” to process and manipulate. If we follow the previous example, having an array with first and last names, if we use the from operator or the of operator we create our observable and then we subscribe to see our data:

import { from } from 'rxjs';

import { from } from 'rxjs';

const observable = from([{name: 'sol', lastName: 'lopez'}, {name: 'dario', lastName: 'barassi'}]);

const subscribe = observable.subscribe(val => console.log(val));

const observable2 = of([{name: 'sol', lastName: 'lopez'}, {name: 'dario', lastName: 'barassi'}]);

const subscribe2 = observable.subscribe(val => console.log(val));

Already with that we would be using our first operators that this library gives us (of type Creation, because we are creating the observable). Of course there are several more operators, of this type and also of other categories that we will begin to see in the next posts.

Observer and Subscription

Subscription indicates the execution of an observable. As we said just now, the observables are lazy, yes tremendous bums!!!! so if we don’t subscribe to them, forget it, they don’t even emit a sandwich.

Observer is an object that reacts to the values delivered by the observable.

For the sake of clarity, it all boils down to:

interface Observable {
  subscribe(observer: Observer): Subscription
}

interface Observer {
  next(v: any): void;
  error(e: Error): void;
  complete(): void;
}

interface Subscription {
  unsubscribe(): void;
}

Operators

As we were talking about before the of operator, the from operator, and we’re going to have a few more that we’re going to see here, but what is it? Well as everything in JS, it is a function yes, that takes an observable as input and generates another observable as output.

Classification: creative, transform, filtering, conditional, combinational, multicast, error handling, and utility. (yep, in the next posts we are going to see these crazy little ones)