Using the Observable Class

[00:00:00]
>> [MUSIC]

[00:00:03]
>> Jafar Husain: I'm gonna show my HTML and I'm going to put in a button.
>> Jafar Husain: And give it an ID.
>> Jafar Husain: And we'll pull in this button up here.
>> Jafar Husain: And now I'm gonna create button clicks, right? Cuz the first thing we do, when we have an asynchronous API, is we adapt it to an observable.

[00:00:43]
So, I'm gonna create clicks and I'm gonna use the fromEvent method that we just wrote.
>> Jafar Husain: And I'm going to put in the button, and the name of the event which is click, and let's just see right off the bat if this works. We're gonna pass in forEach function.

[00:01:06]
I'm just gonna log it to the console. And if it doesn't, that'll be a good opportunity for us to debug it, and see what's going on. So run, uh-oh, unexpected token. Am I in 6to5? I may have just forgotten to set my browser to 6to5, there we go, 6to5.

[00:01:23]
That will do the transpolation, allow me to use ES6. It means, literally, ES6to5 so it's gonna convert it for us so we get to use the arrow function. Clear. I forgot to show the HTML window or the output window.
>> Off Camera 1: Looks like you might be able to just add it to the URL.

[00:01:48]
>> Jafar Husain: Add it, sorry?
>> Off Camera 1: Well, so you see HTML comma, yeah.
>> Jafar Husain: Where is it?
>> Off Camera 1: You just type comma output.
>> Jafar Husain: That was a good tip, thank you. So now let's see, is this font size? Are we doing okay, font size wise?
>> Off Camera 2: Yeah, it's 20 points.

[00:02:09]
>> Jafar Husain: Unfortunately it's kind of blocking my way here and so I'll click me and look at that. We're now forEaching over a click stream without much code. So we've got an observable, right? We've written it out to the console, but what we actually wrote out to the console is the event object we got from the click.

[00:02:27]
That's all that code there, that's all that stuff from the console you're seeing. It's all the properties on the event object we got from the click. So let's print out just one or two of those properties. I think we had some problems with offsetX didn't we, when we tried it on Firefox?

[00:02:45]
But pageX, we might have a pageX for this click button so we could see where we're actually clicking.
>> Jafar Husain: And this is the x and y position on the page where I'm clicking the button, right? So why don't we map it? Why don't we translate this number? I mean this is kind of a silly program, but it's just to demonstrate the code in action, right?

[00:03:18]
So I'm gonna map over this.
>> Off Camera 2: You can remove the HTML panel from the comma.
>> Jafar Husain: Yeah it'll require, good call, good call, that's much nicer. And then what we can do with a very small console.
>> Jafar Husain: So let's map over this now. And as soon as I have more than one operator notice what I do.

[00:03:43]
I move it to the next tab level so that we can line up. And let's take this event object and why not just pull off the pageX. And let's just add 50 to it. I know it's a silly program, but you kind of get the point, right? Now we can just display the data.

[00:04:01]
We don't have to pull up pageX. Now we actually just got a number. So we're just taking pageX and we added 50 to it. Or why don't we, just to make sure it worked, we just turn it into a string and put px afterwards. Gonna run it. So we can see that we're now mapping this observable.

[00:04:21]
That we're mapping the data comes out. We're translating it, right? And I actually only wanna see numbers that are say larger than 40.
>> Jafar Husain: There we got one.
>> Multiple: [LAUGH]
>> Off Camera 1: Succeeded at partially breaking it.
>> Jafar Husain: So, let's take a look at what actually goes on under the hood, shall we?

[00:05:01]
So how are we gonna figure out? Well, let's throw a breakpoint somewhere in this code. In fact, let's throw a breakpoint in, right here. Let's see what happens when we call forEach on an observable. Let's walk through the chain and let's see what happens. So you let me know, Mark, if I need to bump up this font size.

[00:05:28]
>> Jafar Husain: I'm gonna run it. Hit debugger. There's a bunch of stuff in here added by. Anybody know how to get rid of this-
>> Off Camera 1: There's a little arrow to the left of the thing. Yeah, there go you.
>> Jafar Husain: And on the right-hand side, anything I can do about it?

[00:05:45]
>> Off Camera 2: Does that one work, the grey one?
>> Jafar Husain: Grey one, where? I got you. No, it does not. That's not bad. I can break it out. I can break it out. There we go. So let's step through, I'm gonna step over. And now I'm gonna step in and see where we end up with.

[00:06:08]
Now we're in that wrapper function. You remember that wrapper function? It's whole job is to sanitize any input. If we pass in functions, we'll turn it into observers. If we pass in an observer, we'll just thread it on through. So what did I do? Well, I passed in a function.

[00:06:22]
So we're gonna wrap it inside of an observer. And now we're gonna delegate to the actual definition of forEach that we passed into the constructor. And here we are inside of the observable. So here we are inside of our forEach function. And we're gonna call, map's job, right, map is gonna call forEach on the source.

[00:06:41]
This is when she calls for each on me, right? So we're gonna step into that. And once again we find ourselves in that outer wrapper function. It's job is just to make sure that all the output's sanitized, etc, etc. So let's step into that. And now we're in the filtered observable, right?

[00:06:58]
Cuz we mapped the result of a filtered observable. And so if we step into that back in the public function, also I'll skip past that. And finally we find ourselves inside of the from event observable, the observable that represents the event itself. So now we create a handler, we step over and we add.

[00:07:18]
Now, notice I've been saying this all along, but now we can see why we only add an event listener when we call forEach. So if we hadn't called forEach, this code never would have run. We never would have hooked up this event handler. So I'm gonna step over it, and now we're gonna return this object, right, the subscription object, that we call dispose on.

[00:07:38]
Now we're never gonna call dispose in our code so this code is never actually gonna run, right. So, I'm going to run this code and now I'm gonna put a breakpoint inside of the event handler. So now we've seen what happens when we're calling forEach, when the message is going this way.

[00:08:01]
Now we're gonna see what happens when the message turns around. So he calls forEach on her, she calls forEach on me. And I call onNext on her, and she calls onNext on him. Now the data's traveling the other direction. So as soon as I click this button,
>> Jafar Husain: Now we're back in.

[00:08:25]
>> Jafar Husain: So I step into the onNext function. So here we are, I've stepped into the onNext function. Sorry I did that before that was visible, but we went all the way from,
>> Jafar Husain: Where is it, fromEvent? So we started here at 56 and I stepped into this code and we ended up inside of the filtered onNext function.

[00:08:46]
Right, so I've onNexted her and now she is gonna check to see if it passes the test, which it may or may not, actually it might not. It does, great. And so now she's gonna call onNext on him. And since there's actually three steps in there, we got one more person involved here, right, now we're in the map function, right?

[00:09:07]
We first filtered and then we mapped, and now she calls onNext on him. He's the mapped observable and this fellow, sorry, what's your name?
>> Off Camera 4: Kedian.
>> Jafar Husain: KTO?
>> Off Camera 4: Kedian.
>> Jafar Husain: Kedian?
>> Off Camera 4: Yes.
>> Jafar Husain: Okay, hopefully I'm close on that one, I'm sorry. He's now called forEach, so he's the filtered observable, right?

[00:09:27]
And when we call. Sorry you're the mapped observable cuz we're calling the projection function, right? We're gonna step into the projection function and look where we are. Now we're back in our code, right? Now we're the plan where we're taking that item, that I've onNexted through, and it's made it through the filter.

[00:09:41]
And now we're translating it. We're gonna make it into a string. We're gonna stick px on the end of it. Gonna step in through that. And we're gonna onNext it. And finally we forward it to the very end. And we end up in our forEach function, which has got a bunch of junk in it because of JS Bin.

[00:09:54]
But this is basically the forEach function that we wrote. So JS Bin does this so that it can intercept the console log and put into that pane we saw earlier. But if you look at our actual code here, it's just console log. And so we made it all the way out to where we called forEach and we printed out the results.

[00:10:11]
And so if I do this, we're gonna see,
>> Jafar Husain: Some junk that's JS Bin related, but that's actually our answer right there.
>> Jafar Husain: Okay, so the code drilled all the way up, and then we drilled all the way back down. So, hopefully now we have actually a pretty good idea what's going on under the hood when we use an observable.

[00:10:39]
There's not much to it. You're just forwarding along data, forEach goes up, data goes down.