Event API

[00:00:00]
>> Now user takes action. Don't worry, we are gonna do this because we're gonna introduce a little bit more about how we can. We are no longer getting individual labels for access objects. So I can't assume that the zeroeth element or the first element, or the second will be our input elements.

[00:00:18]
I want to be flexible to that. So I'm now going to use the event object as part of the event API, this is the event object that when the user action happens, let's have user action that's plough on, let's have user action happen. When the user action happens, in this case, it's gonna be typing.

[00:00:40]
They're gonna type Li is nice, highlight perfect, Li. All right, Li, there we go. First suggestion and fantastic. So, Li is going to show up as the typed content is going to be the value immediately, because of our layout and render engine binding of this C++ list of elements and the view together.

[00:01:03]
And now the event triggers our handle function to be added to the callback queue and therefore, upon finding there's nothing on the call stack be added to our call stack there it is, handle. And we are gonna have a brand new everybody who has been waiting for this moment add a brand new what everybody?

[00:01:32]
>> Execution.
>> Execution context, beautiful. Now it's quite an interesting one. So, there it goes. Here is what we are going to do with it. So it's a brand new execution context, [INAUDIBLE] Quite wide. Brand new execution context. But we're gonna use another feature of the DOM and that is the event API.

[00:01:58]
The event API, we know, triggers functions that handle action by user to be passed to the callback queue and then executed by JavaScript on the call stack. But also it provides a full description. When you think about running a function, calling a function, there's two parts to it.

[00:02:17]
One part is the running of the code, the other part is the inserting of arguments. If we are allowing functions to be auto executed asynchronously at a later moment by JavaScript, if we're allowing them to be auto executed that's the running of the code, Could we imagine that we can also have them auto insert an argument, that we can then have a parameter ready and if we've written our code right, we can use whatever is in that auto inserted argument.

[00:02:53]
And the answer is absolutely yes. If we've gone to node hard parts, we've seen a lot of this. The response and request or request and response objects that are auto-inserted on a user or server request reaching a node server, we're gonna find that this handle function that is auto-executed by JavaScript also has auto-inserted into it by JavaScript.

[00:03:21]
an object full of useful properties that describe the event in more detail, the user action in more detail. Like, for example, literally, the XY coordinates of the input by the user, is the command button held down by the user as the input is the control button, true or false, held down by the user as the input and what element was the input happening on.

[00:03:52]
And that's our key piece. So not only does our action by the user trigger their handle function to be added to the callback queue but with it comes an object full of information about the user's action that then is auto inserted into our callback function, the function that got called back into JavaScript and added to the call stack.

[00:04:24]
And that auto-inserted argument, we would go and look on MDN to find out what it is. In this case, it is an object full of useful properties that allow us to get more information about the user's action. Things like the X and Y coordinates of what's going to of the user, but things like where the command was held down.

[00:04:53]
But for our purposes the most useful is a property of target that has an accessor object corresponding to the input element in C++ that was inputted into and there it is. That accessor object has all the useful properties for getting and setting the data on that C++ object, and it has the hidden link to that C++ element, which is input, [LAUGH] I'm starting to lose it, but there you go.

[00:05:43]
Which is the input DOM element. Meaning we, knowing that this argument is gonna be auto-inserted, need to prepare a placeholder name for it. Justice, what have we used as the parameter or the placeholder name with the knowledge that when handled does get auto called, it also has data argument also auto inserted knowing that what are we used as our parameter, our placeholder ready for that handle function to be executed?

[00:06:16]
>> Are we talking the function handle?
>> Exactly, what's our parameter?
>> The event.
>> The event but what are we given ourselves y is the parameter name here?
>> The letter E.
>> Just the letter E, exactly. What could we have called it? We could have called it justice.

[00:06:37]
We could have written function handle parameter justice and then inside as long as we'd written name equals what?
>> Justice.
>> Justice.target.value, we would have been accessing our event object, as they call it if you went to MDN, that describes the action by the user in a lot of detail.

[00:06:59]
All the details of it. Command press down while the user was inputting, was control pressed down, was it XY coordinates on the particular pixels of the page. And most important, what was the target of the input, the element that was being inputted into? In a sense it's like any function becoming more generic, more general.

[00:07:21]
We don't need to specify on this handle function exactly which element is being inputted into, is being handled, because we're gonna use the auto inserted argument that makes the function specific to this particular input entered by the user, where our target is this element here, meaning in this execution context, we hopefully wrote our code.

[00:07:51]
We hopefully wrote our code to be able to access this target use its value setter getter, use its value setter getter to set the no no, to get the value of input that was just type Li to update our data. Did we do that Phil? In the handle function, did we go and get our data?

[00:08:17]
You bet we did. There it is, there it is. Name is going to be assigned to what?
>> Li.
>> It's gonna be assigned to Li. Exactly [INAUDIBLE] Is our parameter that we've had there ready to access the object, get our target, which we knew was going to be filled out with whatever the input object was a link to it and use its value.

[00:08:47]
Well, you know what? Let's write it out, So the target property has assigned to it an object linked to the input element. We go to the linked input element when we use the value setter and we get, no, not setter, getter, to retrieve exactly as Phil says. The string Li and that then is set as the string that is assigned to our name.

[00:09:19]
Our data is updated. Woo hoo, way, yes side. [INAUDIBLE]
>> [APPLAUSE]
>> I need it as much as anybody. There it is. Well done, everybody. And so we have now, and we're gonna come to thumbs on that in a second. Don't worry, people, we now have our data updated.

[00:09:36]
Now things get really interesting. Let's talk through what's gonna run well at any moment of course, our wonderful binding the creator takes our new data, creates our visual virtual JavaScript DOM representation of what's gonna show up on the page with that new data. Then converts it into real elements to be appended or replace the existing ones and show up on the page.

[00:10:03]
Honestly, it is repetitive. Great UI engineering's really difficult to track event, consequences of change of data otherwise, being repetitive is good. And exhausting. [LAUGH] Being repetitive is good and quite right too. So, we now hit what function Y is going to be put into the not, sorry, put into the callback queue because it's running every 15 milliseconds.

[00:10:34]
>> The browser adds update DOM.
>> Update DOM-
>> Which eventually gets put onto the call stack, gets those pink parens added.
>> Perfect. And create a brand new what?
>> Do I get to say it?
>> You do.
>> Execution context.
>> Thank you, y there it is.

[00:10:51]
Update DOM and brand new execution context and there it is. Getting a bit tight cuz this took too much space, whoops. However, all we're gonna do in it, hey, we don't even need to think about it. You know what? The best thing is if we've made this code for ourselves are we even thinking at this moment about how to change the page?

[00:11:16]
No, we described it already. We described it already based on how the user was going to and then what, the underlying data would be funneled through again. So let's do that. But we're only gonna describe it verbally, pseudocode what happens. So update DOM is going to run, why what function.

[00:11:36]
>> First it's going to call create V DOM.
>> Yeah. So it's going to, I guess, create the V DOM with our new,
>> With the new values of name.
>> Perfect, yeah. So one, create V DOM with new data of name. Perfect, exactly, data of name, and that is now Li.

[00:12:01]
So this is going to be completely deleted and I am gonna, Do that just so that we can appreciate it being fully recreated and yeah, there you go. Fully recreated. And what are our elements in it? Walk me through them if you don't mind why.
>> Absolutely, we've got three arrays.

[00:12:25]
The first one contains the string input.
>> Beautiful.
>> The string, Li.
>> Beautiful.
>> And the function definition of the function handle.
>> Yeah, we can call it callback, I guess, but exactly, it's handle. And then the next one is?
>> The string div, the string hello Li,
>> [CROSSTALK]

[00:12:49]
>> Look at that, beautiful, done. [LAUGH]
>> Yes, look at that, exactly. Fully filled out. We knew that because look how visual our code is in JavaScript. I was able to go [SOUND] Because I knew exactly what it was gonna look like. Fabulous, excellent from Y. Now we run the update function.

[00:13:07]
Update, sorry, we run the, well, tell me again why you're doing better than me.
>> So since VDOM is just a JavaScript array, we're then going to map over it.
>> Yep.
>> Calling the function convert on each item in that array.
>> VDOM each element converted to a new tell me you're doing so well.

[00:13:30]
Well, honestly better than me, I'm getting tired. So you're doing a better job than me tell me what's happening.
>> Let me know if you want to go into greater detail. But basically, we're taking each item in that JavaScript array and returning a JavaScript accessor object provides a hidden link to a DOM node.

[00:13:46]
>> Yes, a DOM node better term than I'm using the arrow DOM element, but yeah, DOM node
>> And a JavaScript object with access to it. Beautiful, let's do this. Let's not redraw these all, but these are therefore all gonna be brand new accessor objects.
>> And we'll lose all of these links to the old ones and we're gonna have here.

[00:14:13]
Can we draw this hopefully relatively nicely. Wasn't a great start, was it? Dear. There we go. Draw these relatively nicely and new DOM nodes, which are input, they are a div, they are another div. The last div here has text of great job. I think the fun thing is people is that we're not doing any of this.

[00:14:50]
Our work was done the moment that we changed the data with the handle, that was our work done. Unfortunately, as engineers, our work done because updateDOM, it's just gonna run again and take our description in a way that createVDOM is a one-time and done description of under all possible states stated values in this case name and in case Li that gives a full description of what's gonna show up.

[00:15:18]
So our work's kind of done. It's beautiful for it but unfortunately for the purposes of visualizing it for everybody, we are walking through it. I say, unfortunately, but you know what I mean? Like, we wouldn't have to just make it really clear. That's the whole point is we wouldn't have to because it's all being described by our nice initial layout here.

[00:15:38]
That's really cool, maybe other people, but I think it's kind of cool. And then we have, hello And it would be hello Lee. Am I right on this or am I missing anything here? So far, all good. Yeah, and then we have our value being repopulated with Li.

[00:15:56]
And our input handler having a new reference to the same underlying handle input function. There it is, hand, sorry, handle function. There it is. And, I'm tracking stuff all across here. There we go. Okay, perfect. These brand new accessor objects each is linked to, respectively, input, div, and div.

[00:16:23]
Perfect, we then use our document board. Well, tell me what's happening here. Why, if you don't mind?
>> Absolutely. The final line of this function, we're going to spread the elems array into the call to the replace-
>> That turns each array element which is three different 1, 2, 3 or 0, 1, 2, accessor objects to our new input div and div in the DOM.

[00:16:50]
It spreads those into individual arguments to be,
>> Into positional arguments that are parsed to the replace children method on the body object of the document object and that in turn
>> Replace children call or whatever, yeah, I shouldn't have done this order in this order but yeah, exactly to replace children which will take the links to these three elements and replace this set of children on body does that doesn't matter how many that would be here.

[00:17:21]
These will just all be replaced and we instead get body linking and sorry for this here, but instead body linking to or sorry having children appending input div and div as these were removed, then our page here would lose those elements. But don't panic. We would have new ones re-added with what the user just wrote.

[00:17:51]
So they don't even see any difference as long as we refocus the cursor on that field. And then div elements with hello, Li. And great job yes give a big hand to [INAUDIBLE] It's an excellent technical communication.
>> [APPLAUSE]
>> Beautiful.