RxJS Observables in brief

I found it useful to think of Observables as a newsletter. For many aspects, an Observable is like a newsletter.
This post is the simplified version of this article. Feel free to read the one you prefer.

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.

Think of a 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.

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.

3. Unsubscribe. Eventually, when you are no longer interested in the content, you unsubscribe (you unsubscribe, right?).

If you understand these steps, understanding Observables will be much easier.

From newsletters to Observables

I will now follow the same steps to explain 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 Observale that decide. For this reason we say that Observables push values. You can think of Observables like 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 leak. 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().