Observable Interface Changes

[00:00:00]
>> Jafar Husain: Now, as I go, I'm actually gonna ask for help from the class, ideas about how we can implement these things. So what I'm gonna start with, and by the way, I'm assuming everyone is familiar with ES6 and tax cuz I'll be doing a lot of that. If you guys are not familiar with it, I advise you to check out any of the mini classes, I think, or at least one class on Frontend Masters, that'll level you up here.

[00:00:21]
So I'm gonna be using a lot of error functions and occasionally some classes today. So let's start by building the observable class. Can anybody remind me what's the method in observable that allows me to get data out of the observable?
>> Speaker 2: Subscribe.
>> Jafar Husain: Subscribe, thank you. So let's build subscribe.

[00:00:41]
And what does subscribe accept?
>> Speaker 2: A function.
>> Jafar Husain: A function? It's actually got an overload. So it can accept three functions, or it can accept a? I showed it on the previous slide.
>> Speaker 2: Subscriber.
>> Jafar Husain: Subscriber, observer, subscriber, basically the same thing. Yeah, some people call it subscriber.

[00:00:58]
So I'm gonna build that in right here.
>> Jafar Husain: Now, the key thing I'm gonna try and drive home to you guys today is what observable really fundamentally is, and that's actually it's a function. In fact, everything that you can do with an observable can be built on top of this one function, subscribe.

[00:01:19]
So to create an observable, all you really need to to do is you need to define subscribe. So when you create an observable, now, we can't define one subscribe function for all possible observables. So instead I'm gonna pass it into the constructor.
>> Jafar Husain: And we're just gonna store it away, like this.

[00:01:43]
>> Jafar Husain: And when an observer is passed into this observable, we're going to just call our internal subscribe definition. Which we're gonna create and parametrize whenever we create a new observable to the constructor. And we're just gonna plumb that observer right through. And there we go, we have an observable.

[00:02:02]
Now, of course, this is just a shell, right? All the real work is gonna happen in these implementations of subscribe that we're gonna pass on to the constructor.
>> Jafar Husain: But we already have enough here to do some useful and interesting functions. Before we go any further, one of the things we have to do in working with observable is we gotta deal with the fact that most of the APIs out there are callback APIs, right?

[00:02:26]
So can anybody give me an example of a callback API on the web?
>> Jafar Husain: Come on, there's tons.
>> Speaker 3: Instant timeout.
>> Jafar Husain: Instant timeout, I like that one. So what we often have to do when we work with Rx is we have to adapt the callback APIs that are in the browser into observables.

[00:02:47]
So what we're gonna do right now is, why don't we build a static timeout function, which accepts a certain amount of time. And it's gonna return an observable that is gonna on next and then on complete after that period of time. So now we're getting into the real heart things.

[00:03:06]
So we know that timeout returns an observable, right? So I'm gonna return a new observable, and now this is where things get interesting. Inside of the constructor here, I'm gonna pass in the definition of subscribe, i.e., the thing I want to happen when somebody calls subscribe on this observable.

[00:03:24]
So what is the shape of subscribe, what does it look like? We've got it up there. Let me get some line numbers going here, bear with me.
>> Speaker 3: Three callbacks.
>> Jafar Husain: Three callbacks, you're absolutely right. In fact, the version of Rx that you guys will be using supports either passing three callbacks or an observer.

[00:03:43]
But frankly, to simplify things, we're always just gonna accept an observer. And then later we'll use the real Rx, and you'll be able to optionally pass three callbacks. As a matter of fact, under the hood, Rx just takes those three callbacks, puts them into an observer.
>> Jafar Husain: So I'm gonna give it some line numbers here.

[00:04:03]
>> Jafar Husain: Great, and we didn't lose our code, excellent. So here we go, we have the definition of subscribe right here, or at least the shape of subscribe. Subscribe accepts an observer, and what does it return? Can somebody tell me?
>> Speaker 4: A function that removes the subscribe.
>> Jafar Husain: Yes, a function, well, in this case it's technically a subscription object, so let's take a quick look at this definition.

[00:04:28]
But subscription object is really just a wrapper around one function, right? And what's that function?
>> Speaker 4: Unsubscribe.
>> Jafar Husain: Unsubscribe, so when you subscribe to an observable, you're gonna return this object, a subscription, which, again, just a wrapper around one function. And that function is the way in which you're going to enable the consumer of the data who's calling subscribe to unsubscribe, and therefore not get any more data anymore.

[00:04:53]
So when we're building a subscribe function for an observable, we have to keep two things in our head. We have to say, okay, well when they call subscribe, I have to set up a subscription, but I also have to return this subscription object that allows them to unsubscribe.

[00:05:08]
So whenever we build these operators, we're gonna be doing both of those things. So here we go, I'm gonna pass in observer. In fact, I won't run this with an error function, I'll actually make it a little clearer.
>> Jafar Husain: So we're gonna pass in a function here, a named function, and I'm gonna call it subscribe so it's clear that that's really what we're defining here.

[00:05:28]
Everybody see that?
>> Jafar Husain: So now, what am I gonna do? I've got myself an observer, how and when, more importantly, am I gonna send it on next to that observer?
>> Speaker 5: So you do like a setTimeout and then observer.next.
>> Jafar Husain: setTimeout, absolutely.
>> Jafar Husain: And I'm gonna give it the time.

[00:05:56]
Notice I've got the time available to me cuz I've closed over it. And then inside of this function, I'm gonna call not on next but next. I'm gonna make that mistake several times today, so you guys gotta catch me. And I'm not gonna on next anything. I'm just gonna on next undefined, or next undefined.

[00:06:16]
And now what, am I done?
>> Speaker 5: Closing it or completing it?
>> Jafar Husain: Yeah, complete, right? I mean, that's all they want. They want set timeout and then they want a completed observable. So let's complete it.
>> Jafar Husain: Awesome, awesome. So are we done? What's left?
>> Speaker 6: I guess we could put on error?

[00:06:45]
>> Jafar Husain: On error, you're right. So one possibility is that we on error. Now, in this particular circumstance, that's a great point. In this particular circumstance, though, is there any possibility we're gonna on error? So not every observable can or will on error because maybe the underlying operation, the asynchronous operation, can't fail.

[00:07:04]
In this case, setTimeout is not reasonably ever gonna error. So in this case, we're probably never gonna call observer on error. But that's a good guess.
>> Speaker 6: The constructor, doesn't it need to return a subscription?
>> Jafar Husain: Yes, it does. We forgot something. And if we don't return a subscription, what's gonna happen?

[00:07:23]
Besides the fact that people accept a subscription, and then they'll get a null reference exception when they call unsubscribe. What'll happen?
>> Speaker 4: The observable will live forever?
>> Jafar Husain: Well, it'll live forever. It depends on what you mean by live forever. It's not that the subscription will stay there forever, cuz the good thing about the underlying setTimeout call is that when it calls you back, it frees up your callback.

[00:07:45]
So it's actually gonna be just fine, It's gonna call us, and then there won't be any memory leaks or anything like that. The problem is, if somebody decides they don't want to get alerted after that period of time, they have no way of not getting alerted. So how are we going to now prevent that from happening?

[00:08:02]
We have to return a subscription object. And a subscription object is just an object with an unsubscribe method.
>> Jafar Husain: Now, what are we gonna do when they unsubscribe, though?
>> Jafar Husain: How are we gonna make sure that they never get called?
>> Speaker 3: Cancel the timeout.
>> Jafar Husain: Yeah, clear timeout I think it is, right?

[00:08:30]
Cool thing about JavaScript, or the DOMs technically, setTimeout method, is it gives you a way of canceling. You can get a handle in the result, and then you can call clearTimeout, I think it's clearTimeout, right?
>> Jafar Husain: We'll find out.
>> Speaker 3: Yeah, it is.
>> Jafar Husain: And now, here we have a full observable implementation.

[00:08:55]
And when it, yeah?
>> Speaker 4: So is timeout, is that sort of just a factory function on the class then?
>> Jafar Husain: It is, because it's a factory function, it can return us an observable. And if I call timeout 50 times, I'm gonna get how many observables, based on this?

[00:09:10]
>> Speaker 4: 50.
>> Jafar Husain: 50, yeah.