Front-End Insights

lodash for asynchronous data – what is RxJS

Dev-StackProgramming

I really like such a situation: I’m trying to write a text, I get tired mercilessly, I’m not good at it… and then someone from blog readers write to me and tosses another topic. So it was in the case of this entry. One of the followers of blog fanpage on Facebook wrote to me question, if I could put something on the blog about RxJS in the context of React + Redux. Of course  I picked up quickly and promised that such a thing will appear on the blog soon! But before I try to describe this quite specific case of the use of this library, I think, that it is worth first to check what is RxJS. I’ll take care of it in today’s post!

What is RxJS?

RxJS abbreviation derived from “Reactive Extensions for JavaScript” (I advise you to have a look at the site of RxJS project). In other words, it means more or less that it is a set of extensions that enhance JavaScript language about reactive programming capabilities. In the world of programming it isn’t anything new. As the first, set of these types of extensions introduced Microsoft for its .NET platform. The main motivation for creating these extensions was to facilitate developers to work with asynchronous data streams. As a result, through the use of libraries such as RxJS, it is possible to work with asynchronous data as if they were an ordinary arrays. Therefore today’s post has a such title, because RxJS it is such a lodash (or underscore) for asynchronous data streams.

In today’s article I certainly doesn’t present all issues related to the RxJS library. It has quite a lot of possibilities and rather would be hard to fit in a post on reasonable volume. Therefore, today I will show you only the absolute basics, as much as you need to understand what RxJS is.

Installing

Of course, to make use of discussed library, we have to firstly link it into our projectt. The easiest way is to simply place the appropriate references in the index.html file:

This is obviously the most trivial way. Probably you use WebPack or other “module bundler” in your project. Of course then, put to use import libraries appropriate for your configuration – for example through the directive imports from ES6.

Observable object

Generally, the most important type of data in RxJS is an Observable object. It represents a collection of values in a time function, and you can create it, among others by the create method. I wrote, “among others” not without reason – it is quite a lot of other methods to create this object. We also have specific objects that inherit from Observable. Anyway you’ll read more in the documentation. Please take a look at the example of creating an Observable object using the create methods :

As you can see, the create method is a static “member” of Observable object. When you call it, it pass to it a callback function with one parameter – I called it observer. In the class body it showing a loop that is execute six times. What matters here is the recall observer.next (). In this way, I am addressing the successive values as a data stream. The issuance of this stream I conclude by recalling observer.complete ().

Subscription of Observable object

I mentioned earlier that Observable object represents a values collection in time. The point is that the spacing between furter observer.next () recalls can be large. For example, when the results are returned some time-consuming operation. RxJS allows us to work on such collections as if they  were a static arrays. Anyway, I’ll show it shortly. But first, let’s look at the following code:

In the above manner, I subscribe function to the observable object (the callback function in the style of “sagittal” passed as a recall parameter to the function subscribe). This function will be invoked for each recall observer.next () in the observable object. As you can see, it task is simply to display data in the console.

RxJS gives us a lot of functions which support work. Thanks to it, we can work on the data stream as a regular array. Look at modifying of the above example:

In the above example, before I invoked the subscribe function, I doing some modifications to the stream. First I filter it using a filter method, and then the result of filtering I maps to strings array using the map function. The subscribe method is already working on the modified data stream. So it will display value in the console in the following lines  item = 1 item = 2, item = 3, item = 4.

You can test presented code in the following codepen:

See the Pen lodash dla danych asynchronicznych czyli wprowadzenie do RxJS by burczu (@burczu) on CodePen.11729

Summary – for what it is needed?

Ok, now we know what RxJS is. But for what it might be useful? I think that in each application will be the situations in which we need to work on asynchronous data. After all such a data, for example, those loaded with the AJAX recalls – even Angular 2 uses observable objects in the http module (and also in forms). So we have “out of the box” support for RxJS extensions on the results of recalling such a methods as http.get () or http.post ().

Of course, in the same way the reactive extension can be used in React applications. I think that this is a good topic for another post – I will try to prepare it in the near future. Anyway, I was asked about it, so I cann’t disappoint my readers!