RxJS Basics: Observables

Welcome to RxJS Basics, a series that explains basic RxJS topics and terminology. It’s pretty common for developers to use RxJS and not understand what it does. Thus, I’m assuming you already know how to use RxJS, TypeScript, and JavaScript.

In this article, we are going to look at Observables.

What is an Observable?

According to the documentation

Observables are lazy push collections of multiple values.

Let’s break that down.

Lazy

At runtime, resources are precious, especially when you won’t know if your app is running on a tiny watch or an epic gaming rig. Therefore, optimizing code execution is crucial to a higher performance yield.

One optimization technique is to make a block of code lazy. In programming, something is lazy when you delay its execution until it is needed. In the same way, an Observable is lazy because, in most cases, it doesn’t execute anything until it has an Observer. Think of it being the owner of a pizza shop. You have all the ingredients and resources to bake a pizza, but you don’t make one until someone orders.

Let’s take a look at an example:

Note: The sole purpose is to demonstrate lazy execution. Nothing more.

In the example, we make an Observable using the value pizza. Then we add pepperoni to it.

When you run this code, nothing happens at first. You won’t see “Add pepperoni” in your console output, and the code inside the map operator will not run. Finally, after five seconds, you’ll see everything run once you call the subscribe function.

Push

Most of us are in the habit of writing functions that return values immediately. Essentially, you are pulling the values out of a function or variable assignment much like the example below:

In this example, we want to write the numbers 1–5 to the console. So, we store the number in a variable, increment it every time we access it, and write it to the console every second. We are responsible for getting the value, handling it once we get it, and stopping the loop once we have reached five.

Now let’s look at the same scenario using RxJS:

In this example, we create an Observable that will emit every second, skip the first value, and take five consecutive values before completing the Observable. Thus, not only is there less code, but hopefully, it’s easier to see that RxJS is pushing these values to its Observer, and the Observer is writing them to the console.

The Observer doesn’t have to worry about setting up a timer, limiting the number of values, or unsubscribing itself. All the details related to obtaining the value and terminating the sequence inside the Observable.

Collections of Multiple Values

Pretend for a moment you are in a theater. As a spectator, can you sit down and watch the beginning, middle, and end all at the same time? Probably not. Instead, you observe the performance in parts, scenes, sections, etc.

Observables allow us to do the same thing in programming. Our application is composed of several different states, but it only has one specific state at any given time.

For example:

In this example, we first define that our performance has a beginning, middle, and end. Then we specify that these sections will happen five seconds after each other. Finally, when we are ready for the show, we call the subscribe function, which begins the performance.

Observables are a powerful tool for solving many challenges in web development. I highly recommend adding RxJS to your toolbelt if you haven’t already and hope that this article helps anyone struggling to grasp the basics of understanding an Observable.