Exercise 34

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

[00:00:03]
>> Jafar Husain: We've tackled events. Let's see if we can tackle HTTP requests. Let me see if it's shown up here,
>> Jafar Husain: So I believe in this particular example we're showing off the jQuery API for getting a Jason object. What we're gonna do now is we're actually gonna break out of this little, we're looking at this much code, and we're actually gonna try and widen our scope and see what it's like to actually use Rx for real in an app that you have, right?

[00:00:34]
And so we're gonna try and start from the the beginning and go to the end of a problem, okay? So I'm going to be using, for this exercise I'm going to be using JS Bin. Who here is familiar with JS Bin? So it's a really cool online coding tool that you can try out.

[00:00:46]
So if you go to jsbin.com, what is really nice about JS Bin is that you can easily import the Rx library and play around with it. So first of all just go to jsbin.com in your favorite browser. And I'm gonna go to Add Library. So what JS Bin does is it actually has tabs, so it's really easy to print out of the web application because you can have tabs displaying the console, the JavaScript window, CSS, which I won't activate, and HTML.

[00:01:16]
So for this example we're gonna try and create a drop down list like, exactly sort of like Wikipedia, right? And we're going to start by including Rx. So if you see where I am right here, I go to the Add Library tab on the top left of JS Bin, and if you scroll all the way to the bottom you'll see rx.all.

[00:01:34]
And that's a library that has all of Rx's operators in it, so if you just select rx.all, it will add it to the JavaScript page. The other thing we're gonna load in, although we're not going to use it for very much I promise, is jQuery. We're only going to use jQuery for it's JSONP ability and then we're gonna wrap that as an observable to demonstrate how we can take existing APIs, async APIs, and wrap them as observables.

[00:01:55]
Which is a really key thing to starting to use observable in your existing system. Being able to take those callback APIs and wrap them as observables. So, I'm going to import jQuery, which we're going to use to make network requests. But we're gonna wrap the jQuery API so that it bits an observable instead of uses a callback.

[00:02:10]
So one thing we're also gonna do is we are gonna add a text box to the body. I'm gonna add it, I'm gonna give it an ID so we can pull it out later. And now to demonstrate how JS Bin works, here in my JavaScript window, one thing that we notice we can do is we can actually select from a drop down list of many different possible languages.

[00:02:31]
In this case if you choose 6 to 5, that's actually the old name of the Babel transpiler, which I may have mentioned to you yesterday. So if you just choose 6 to 5, no matter what browser you're in, even if it's Chrome, you can start using the arrow function.

[00:02:45]
So I can do something like this.
>> Jafar Husain: So 6 to 5, that should be updated. It's technically the new name of Babel is, the new name is Babel
>> Jafar Husain: Is that clear to everybody? So now we're up and running. We got a running example. And we're using 6 to 5s.

[00:03:09]
So we can use arrow functions.
>> Jafar Husain: So we're gonna try and put together at least a simple dropdown list based on Wikipedia. And you know how in Wikipedia, you start typing and you see a variety of different results. So the very first thing we're gonna do is we are going to start listening for the keypress event on the tex tbox, cuz that's where we have to start, right?

[00:03:31]
We've got two different async APIs we're gonna be working with. One is the event on the text box, and the other is the asynchronous request that we get from jQuery. And we're gonna start by adapting them both to observables. So let's just use the old way of adding an EventListener to a text box.

[00:03:58]
>> Jafar Husain: I want to make sure my HTML tab is open here. It is, although I'm not seeing it. Output tab, there we go. So if I select my HTML, 6 to 5 console and output tabs. Are we gonna have some problems of the font size on this?
>> Off Camera 1: Yeah, I mean in JS Bin you can select the font size.

[00:04:13]
[INAUDIBLE] in the Settings button.
>> Jafar Husain: Hm.
>> Off Camera 1: You can bump it, but then you'd have to-
>> Jafar Husain: Tell you what, what I'll do is I'll, now that we've added the HTML, I'll hide the HTML pane, because we don't need to see that anymore. We've added our text box, we've added jQuery.

[00:04:30]
Is this any better, do we need to go higher?
>> Off Camera 1: I mean ideally, but that's-
>> Jafar Husain: I can make it work, I can make it work.
>> Off Camera 1: That's better.
>> Jafar Husain: Okay, not gonna leave us a lot of room but we'll make it work. So.
>> Jafar Husain: Now hopefully what should happen, is if I get a key press, it's gonna start logging stuff.

[00:04:52]
It doesn't like that size. What's going on? So it's actually showing us our console log which is when I type a key, it's logging in out here to the console. So we take a look at that, you'll see this actually showing us that big event object. So if I clear this console and I click, we see that big event object.

[00:05:12]
So let's not print out that whole big event object, it's a lot of information. I think the keypress object has a keyCode.
>> Jafar Husain: I think it's keyCode. So now we see the keyCodes of the event object it prints. So instead of building on top of addEventListner or removeEventlistner, which is all DOM event based, we're gonna build on top of observables.

[00:05:37]
So we need to adapt the event to the observable interface. So remember how we do that, so I'm just gonna pull in observable and I'm going to, the observable tape is actually hanging off the Rx namespace which is brought in when you bring in the Rx library right over here.

[00:05:55]
So using rx.all, and so we're binding a variable to observable, so we don't have to type rx.observable every single time, and I'm gonna buy us some room here. So the first thing to do is, what collections do we have? Well the very first thing we want to start with is keypresses, and we want that to emit an observable instead of being a dominant.

[00:06:17]
So let's grab a handle to our text box, first thing's first. We're gonna use document.getElementByID.
>> Jafar Husain: Okay. Do we already got that? Okay. And now we're going to create the keypresses observables. So it's the collection of all the keypresses that will ever be by using fromEvent passing in the text box and the keypress is the name of the event.

[00:06:52]
>> Jafar Husain: So let's try this out to see if this worked.
>> Jafar Husain: I'm gonna turn off auto-run so it doesn't keep filling up our console here. So how do I subscribe to an observable to get the data out? Well, I just forEach over it
>> Jafar Husain: Okay, so if everything worked, we should run this.

[00:07:15]
And if I type into the text box that you see on the right over here, we should start to see results in the console. But first I have to just run. So run, and now if I type.
>> Jafar Husain: Didn't quite work.
>> Jafar Husain: I get that right.
>> Jafar Husain: Was prepared for this eventuality.

[00:08:03]
>> Jafar Husain: Hmm.
>> Jafar Husain: My forEach in here?
>> Jafar Husain: Let's hope that's not a big problem.
>> Jafar Husain: So so far so good. We're actually getting into the handler there when I get a keypress. But we're not getting the X object. And that might be because I'm preventing the default action here.

[00:09:01]
>> Off Camera 1: Someone says you need to add an ID to the HTML.
>> Jafar Husain: Thank you very much guys out there. No, I've got an ID on the HTML.
>> Off Camera 2: Go over your input [INAUDIBLE]. Sorry, do you need me to close that?
>> Jafar Husain: No shouldn't need to close it on HTML.

[00:09:21]
So we'll alert the test. And it's probably a small problem. I know what it is. I need to return. So I want to clarify. I'll actually, I need to get to this just yet. I'll delete this. Hm, test, okay. And now let's write out X. This should be the event object, great.

[00:09:50]
And now lets console log it instead of alert it, which will be slightly less intrusive.
>> Jafar Husain: Great, so we're back where we were before when we were using addEventListener. Now we can just 4H over it, and we're printing an H event object to the console.