Blog

RxJS and Observables in JavaScript Tutorial

In our past tutorial which you may have seen on the Vivify Ideas YouTube channel or read on our previous blog post, we've explored asynchronous programming in JavaScript. Today, Sava Katic will be talking about RxJS and observables, some of their core concepts and differences. Enjoy!

Transcript

Hello, everyone, my name is Sava Katic and I'm a software developer at Vivify Ideas. Today let's talk about RxJS, which is currently the most popular JavaScript library and for a good reason. Let's try to explore this interesting library by looking at some of the differences between its core concepts, and the promises that we explored last week. You can actually check the documentation to see various examples of how to create an observable like from an event or an array to name a few. The main concepts to understand when using it RxJS are "observable", which is a stream of data and "observer", which is listening and, I should say subscribing to value changes in this observable stream. Let's make an observable from scratch to see what's going on.

I can import an observable from RxJS because we are going to need it. Let's also make an observer object that is going to implement three possible functions that he can receive from the observable. And let's console.log the result in each to see what's going on, okay?

Now let's make a new observable, we are going to use observable.create and we can pass in an observer. And let's just call next here. Okay, and we have to subscribe to this observable that we have just made and we can pass in our object. I should also add RxJS here.

Okay, and let's see the output of the console, we can see that the value that we have passed to the next was printed. You should be careful when subscribing to observables to pick a time when to unsubscribe so you avoid memory leaks. That is something that you should always keep in mind. Okay, we can note two important differences compared to promises here: observables don't have to be asynchronous meaning that they can follow the same executing orders that we are used to from other languages. And this is actually an example of such observable where we could have wrapped this around in some asynchronous function or ajax call so it would return a value asynchronously. Also we can see that as long as "complete" or "error" is not used, we can return as many values here as we want to, whereas, with promises, they can resolve to only one value.

The other difference that gets most of the beginners is that promises are eager and observable sort of lazy. Let's see what that actually means. Let's say we made a "get product" promise that took in a resolve argument, and let's console log when this callback is executed. We can resolve to doing some random string. You can console.log here before the actual call. And let's attach a "then" to this to this promise and console.log after resolving. So we can see the order of executing. We can actually see that the callback is what is executed immediately, without the need to attach "then" to it, which is why we say promises are eager. But this is not the case with observables. So let's rewrite this.

Let's say we had a new observable that took in a observer as an argument and did the same console.log here. We can also fetch the same string, and let's complete our observable here.
We can do the same before actual call, console.log, and let's subscribe to this observable. We can also pass in an observer object with console.log as a next handler. As for "complete", we can make an anonymous function that is going to console.log "THE END!". Okay, and we can see from the console, that callback is executed after we subscribe to our observable and start listening to it, which is why we say observables are lazy.

Okay, so we mentioned observables are streams of data. With RxJS, you can apply operators to an observable to get a new tailored stream. Let's see this in action with a simple map operator that behaves just like the one for arrays.

We are going to import here a map from RxJS operators. And we can make a new observable that is going to in set interval, return a notified message. Let's do that every two seconds. We can make a new tailored stream which is going to take notifications that we received, and going to map each one of them to a new notification containing the same message, and let's append a new date here. So we know the exact time of this notification.

Okay, and we can subscribe to our newly created observable and pass in a console.log as a handler. We can see here that the notifications are logged based on the date and time of each notification.
I hope this helped you understand asynchronous JavaScript nature even further. Thank you for your time and I hope to see you in the next one!