RxJS

What Are RxJS Observables?

Many people start using observables when coding with Angular. However, Observables are not something peculiar to Angular!

On angular.io, we can read that “They are used frequently in Angular and are a technique for event handling, asynchronous programming, and handling multiple values“.

A lot of things! But surely they are not intrinsically part of the Angular framework or React library.

Observables are “offered” by RxJS (Reactive Extensions for JavaScript), defined on angular.io as “a library for reactive programming using observables that makes it easier to compose asynchronous or callback-based code“.

Therefore, we can say that they are agnostic to frameworks and libraries, despite being popular with Angular.

If you don’t know RxJS, you should probably read What is RxJS? first.

Understanding RxJS Observables

I will propose a few definitions but I found all of them pretty confusing. Especially when someone is approaching this topic for the first time.

• RxJS: Lazy Push collections of multiple values.
• Angular: They provide support for passing messages between parts of your application.
• ReactiveX: A representation of any set of values over any amount of time.

These definitions are very accurate and they describe Observables from different points of view. However, they are not conveying the gist of the topic. Let’s have an example.

Think of a newsletter

I found it useful to think of Observables as a newsletter. For many aspects, an Observable is like a newsletter and we will see how.

Explaining Observables with an email subscription

The image above represents an Observable as a newsletter. A newsletter is a source of data (emails) but until you subscribe to it, you don’t receive any email.

After you subscribe to a newsletter you will start to receive a stream of emails (i.e. exactly six in the image above) over a period of time. You will keep receiving emails until you unsubscribe from the newsletter.

Let’s review the steps we take to receive emails.

1. Subscribe to a newsletter. A newsletter is a data source (of emails) that doesn’t send you any email until you subscribe to it. When you want to receive some emails/content/data, you simply subscribe to a newsletter.
2. Start receiving emails. Once you subscribe to the newsletter, you will start to receive some emails. You will keep receiving emails until you unsubscribe from the newsletter. However, you don’t know exactly how many emails or when you will receive them because it is the newsletter providers that decide. Therefore, you can think of it as a stream of emails/data over a period of time.
3. Unsubscribe. Eventually, when you are no longer interested in the content, you unsubscribe (you unsubscribe, right?) from the newsletter to avoid filling up our inbox with unnecessary emails.

If you understand these steps, understanding Observables in the next paragraph will be much easier.

From newsletters to Observables

I will now follow the same steps to explain Observables.

From email subscriptions to observables

Think of Observables as data sources, like newsletters are a source of emails. As Observables emit data, newsletters send emails.

1. Subscribe to the Observable. An Observable is a data source but it doesn’t emit any data until you subscribe. For this reason, we say that Observables are lazy. Subscribe to an Observable by using the aptly named subscribe() method: myObservable.subscribe()
2. Start receiving data. Once you subscribe to the Observable, you will start to receive some data. You will keep receiving “data packages” until you unsubscribe from the Observable. However, you don’t know exactly how many “data packages” or when you will receive them because it is the Observable that decides. For this reason, we say that Observables push values. You can think of Observables as a stream of data over a period of time.
3. Unsubscribe. Finally, when you don’t need any more data you unsubscribe using the unsubscribe() method: myObservable.unsubscribe(). This is important to prevent memory leaks. Note that when using an Observable created by Angular it is not necessary to unsubscribe because Angular handles unsubscription automatically. An example is the params observable in the context of routing.

From a theoretical point of view, this model is often referred to as the reactor pattern.

An Observer subscribes to an Observable. An Observable emits data to its Observers by calling the Observers’ methods.

Sometimes an Observer is called “subscriber,” “watcher,” or “reactor.”

Key Points

• RxJS and Observables are agnostic to frameworks and libraries, despite being popular with Angular.
• Think of Observables as data sources. To read and handle data from an Observable you must subscribe to it myObservable.subscribe().
• Once you subscribe to an Observable, it will emit data over some time. This can happen synchronously or asynchronously and the amount of data can be finite or infinite. Be aware that an Observable is similar to a Promise but also significantly different.
• When you don’t need any more data, unsubscribe from the Observable myObservable.unsubscribe().

Next: Create an RxJS Observable

More content at PlainEnglish.io. Sign up for our free weekly newsletter. Follow us on Twitter and LinkedIn. Join our community Discord.