Angular RxJS

Observables Made Simple

“What the heck is an observable?”

If you’ve used Angular 2+ for any length of time, you’ve probably encountered observables.

I would also bet money that you’ve gone through a process similar to the one I went through:

  1. Ask “what’s an observable?”
  2. Google for a while
  3. Find a bunch of really confusing explanations
  4. Smash everything in the office with a baseball bat
  5. Give up on understanding observables for now and get back to work
  6. Apologize for my violent outburst

Well, I have good news for you: observables aren’t complicated. The problem isn’t that observables are complex. The problem is that people apparently suck at explaining things. In this post I’ll try to suck less.

Here’s the general concept

Before we dive into any code I’ll try to explain what an observable is conceptually, independent of JavaScript or any other programming language.

Check out this diagram I grabbed from the ReactiveX doc for Observable.

As the diagram says, time flows from left to right. The red star comes first, then some time later, the yellow triangle, then the green pentagon.

Emit

The observable is emitting each of these things. The observable emits a red star, then emits a yellow triangle, etc. “Emit” is an important observable-related term, so I want to make sure we’re clear on what that means.

Free Guide

Getting Started with Angular and Rails

Get an Angular/Rails app up and running in as little as 20 minutes

Complete

Then, when the observable is done emitting things, the observable completes. You can see the vertical line in the diagram after all the shapes. That’s what represents the observable’s completion. “Complete” is another important observable-related term.

Transformations

What’s the “flip” thing all about? You can see that each shape has a dotted line pointing down which passes through the “flip” box and then ends with a flipped version of the shape. This part of the diagram demonstrates that for each item emitted by an observable, you can apply some sort of transformation to each item.

Errors

Lastly, it’s possible that something will go wrong in the course of all this emitting. The “X” after the green pentagon in the bottom row represents an error event. We’ll talk more about this soon.

Take another look

At this point I’d like you to take another look at the diagram. I hope at this point you understand every part of the diagram.

Applying the observable concept to JavaScript

Notice how none of the preceding explanation mentioned JavaScript or any programming language. It was just an explanation of the concepts. Now let’s tie those concepts to JavaScript.

Check out this piece of code:

For now don’t worry about what Rx.Observable.create means. Just look at the inside part. Each time we call, observer.next, we’re emitting an item. In this case we’re just emitting some strings. You can of course see that I made the strings match the shapes in the diagram so the relationship between this code and the diagram is very clear.

Before we move on I want to make sure I distinguish observable from observer.

Observable vs. observer

You’ll see in the code above that we’re doing Rx.Observable.create (we’re creating an observable) and then inside the function we’re referring to an observer.

So far we’ve only been talking about observables. What’s an observer?

Basically, in order for an observable to function, it needs something that observes it. The difference between an observable and an observer is simple: An observable is the thing that gets watched. An observer is the thing that watches the observable.

Right now this observable we created is useless without an observer to observe it. Let’s create one.

Creating an observer to go with our observable

We can create an observer like this:

You can see that Rx.Observer.create (and we’ll get to what Rx is shortly) takes three callback functions as arguments: an onNext callback, an onError callback and an onCompleted callback. We could do anything we want to inside of each of these callbacks. In this case we’re just logging whatever’s passed in.

Connecting the observer and the observable

Here’s how we plug the observer into the observable:

The last line is particularly important. We make our observer subscribe to our observable.

And when we subscribe, that’s when stuff starts happening. That’s when our observable’s callback function (the one with all the next()s inside it) gets called.

Check out this JS Bin with the functioning code.

Okay, so what are Rx.Observable and Rx.Observer?

In my example I used a library called RxJS. The GitHub page for RxJS describes it as “The Reactive Extensions for JavaScript (RxJS)”. This may or may not have any meaning to you. The RxJS world seems to have a bad habit of defining every term in terms of some other term you’ve never heard of. Let me see if I can do a better job of explaining.

There’s a language-agnostic standard called ReactiveX. You know the part above where I showed you a diagram and explained how observables work independently of JavaScript? That’s ReactiveX. If you go to the ReactiveX page for observables, you’ll see an explanation of observables that, like mine, never mentions JavaScript.

There exist a number of language-specific implementations of ReactiveX. There’s a Ruby one, a Python one, a PHP one and a JavaScript one. RxJS is the JavaScript implementation of ReactiveX.

When I was using those Rx.Observable.create and Rx.Observer.create functions, I was using the RxJS library.

Just JavaScript

I also want to be clear that everything I’ve done in this post is just regular old JavaScript. It’s not TypeScript, it’s not Angular, it’s just JavaScript. To be even more specific, all this can be done with ES5. No ES6 or ES7 needed. The one and only dependency for what we’ve done is the RxJS library.

About the author

Jason Swett

8 Comments

Click here to post a comment