Check out a free preview of the full Building Awesomer Apps with Angular course:
The "Observable Sequence" Lesson is part of the full, Building Awesomer Apps with Angular course featured in this preview video. Here's what you'd learn in this lesson:

Lukas reviews the observable as the combination of two classic design patterns: iterator and observer, which were designed to create state and communication respectively. Working together, the iterator and observer patterns can be used to communicate state over time.

Get Unlimited Access Now

Transcript from the "Observable Sequence" Lesson

[00:00:00]
>> Lukas Ruebbelke: We're going to talk about the Basic Observable Sequence, Observable.map, Observable.filter and etcetera. So I'll explain what that means. So when people think of Observables, most people, generally the reaction is like, yeah I hear about those, those are hard. Or I try to do them they're hard. The problem is that most people fail to distinguish all of the operators that are provided via RxJS from the observable stream itself.

[00:00:36] And so we're going to first talk about the observable stream and from there, we're gonna start with some very simple operators that map filter and then we'll kinda get into the few other ones but let's just see how things pan out, the big thing is that we understand the sequence.

[00:00:56] And map which we've already seen, I think we have intuitively kind of a sense what that does and then we'll kind of go filter and we'll build on top of that. I think this will be kind of the last module for the day but this to me is a game changer.

[00:01:10] So, when I say observables, I'll use this kind of interchangeably. Is, talking about the observable pattern, but also at the same time talking about reactive extensions and more so, more specifically RxJS. And so you have the reactive extensions that pretty much are in like Java, C#, Python, all these different things.

[00:01:35] We are interested in the JavaScript version. So when I say observables, for all intents and purposes, I'm talking about the actual object, but also the operators that comes with it and those are at this URL if you want to check it out. There's just a ton of them, but I'm referring to RxJS.

[00:01:54] Now, observable is actually the combination of two classic design patterns. And the two patterns are the Iterator Pattern, and the Observer Pattern. And they were created to do two things. So the iterator pattern is designed to communicate state. So if you have something and its in iterator you would say give me the next value, give me the next value and so essentially you can pull state off of an iterator Object.

[00:02:34] Now you have the observer pattern, and what that is good for is communicating that something has happened in the distant future. And, what they realized, and Jeff [INAUDIBLE] talks about this quite eloquently, is that we can actually take these two patterns, combine them together and use them to communicate state over time, which is, in the context of an asynchronous environment, that is, JavaScript, this is really handy.

[00:03:07] For instance, with Firebase and in the web saga and in kinds of these streams, the ability to communicate like hey this thing has changed, this thing has changed, this thing has changed, as time progresses is really valuable. And so by communicating or combining these two patterns, we have what is called the observable stream.

[00:03:28] And so as time progresses, we have these events that we can then capture and communicate them to our consumers. And so communicating kinda values over time is not necessarily a new concept in terms of a promise. So if you've ever used a promise, you are familiar with this idea that at some point in the future, something is going to happen, I'm going to communicate that value to you.

[00:04:01] And so this is asynchronous. So synchronously, we have a function that basically call the function, immediately get the return. Or you can get multiple values using an enumerable. But in our case, asynchronously, which most things in JavaScript are, we're really used to the single value asynchronously over time.

[00:04:22] The difference is, that with an observable, we get multiple values over time. Also, and this is pretty interesting, that with a promise being resolved, that that promise actually pushes the value to the consumer. So in other words instead of doing a call back and saying I'm relinquishing control by sending in this function that you are then going to call when you're done, is that we're actually going to perform this operation and give you the result of the operation that you can then handle however you see fit.

[00:04:56] And so what that does is it's actually pushing the value to the consumer. Now, observables are the exact same way. Then instead of waiting for something to happen, we're pulling, like did it happen? Did it happen? When something happens, the observable stream will then push it too you.

[00:05:16] And so being able to be notified, no muss, no fuss that something has changed is really, really convenient, especially when you're trying to communicate for instance state change through an application. So one of the questions that kind of comes up when you start looking at kind of architecture is if I have state that is consumed in multiple places, and it changes in one place or it needs to change, how do I communicate that to the rest of the app?

[00:05:46] Well, if they're consuming that data via an observable stream, you don't have to. Like it'll tell you, the observable will say, hey, this thing updated, go ahead and take the new value and do something with it. So the idea of multiple values being pushed to you over time, this is quite frankly, kind of is a game changer.

[00:06:10] Because we're used to pulling values via callback and we're also used to getting a single value push to us but to get many values over time? That's kind of a big deal.