DOM Diffing User Interaction

[00:00:00]
>> Beautiful, and now user takes action. We're almost there, user actions. You've done incredibly, people, user actions. User comes in and types. We have a handler ready to handle it. They're gonna type. We're not gonna dwell on this one like last time. They're gonna type, I would say hooray, but hello hooray is, what do we say?

[00:00:25]
Frontend Masters maybe? Sorry.
>> [LAUGH]
>> Yeah, all right. They're gonna type FM, Frontend Masters, yay. We should probably do UIHP. No, no, no, that's even. Okay, we'd do Frontend Masters, that's lovely. Frontend Masters, they're gonna write FM into the input field. That is going to trigger our handle function to run, set our FM as a value on that input node, that input object in C++.

[00:00:55]
The event is also going to be fully described in an object auto inserted into that handle function that is auto executed by JavaScript. I note here I have not taken my updateDOM function off the call stack. So let's get that cleared off from earlier. And, I almost feel, I can't believe we are almost there.

[00:01:20]
Honestly, I'm feeling I'm missing something here.
>> [LAUGH]
>> I guess we've still gotta do diffing and whatever. So, Ian, do you mind helping me out with what's happening to our callback queue, our call stack, as this handle function gets added to the queue?
>> Okay, so the user put in the input FM,

[00:01:40]
>> Which added it to the callback queue.
>> Beautiful.
>> And then we check to see if the call stack is empty, so we can add that callback over there.
>> Beautiful.
>> And it is, so it's going to be added to the call stack and then begin execution of the handler.

[00:01:57]
>> Beautiful, brand new execution context. Don't worry, we'll get to it. There it is, handle. And, yeah, this is a very small one, right? So tell me what's gonna happen in it.
>> Yeah, since it was executed by an event handler.
>> It's not a very, very small one, is it?

[00:02:17]
Because we also, right, right, right, we don't know which element is going to land on per se in terms of our accessor labels in JavaScript. So we don't wanna be restricted. So we allow it to be generic and we use the event object that's also auto inserted into it to identify where this input was happening.

[00:02:40]
Get a link to that DOM element, such that we can then go and grab its value. I mean, we could work out an index process to get exactly which of the elems it's in. And then inside of here do, name is gonna be elem's position, some sort of index to figure out which elem it was.

[00:03:00]
And then get the value to use our getter or the value. But this in the end is probably a better way or a nice way to do it here. And with that in mind, yes, what's our, again, event object also auto inserted. There it is. And keep me going in terms of my.

[00:03:20]
Yeah, sorry just-
>> So we're reassigning the global variable name to the-
>> Beautiful.
>> We're accessing the event object.
>> Well, so let's just put that though into our local memory. We have a parameter that is going to be auto assigned. Our auto inserted object, the event object as you rightly say.

[00:03:49]
We're going to be most interested in its target property, which is, go ahead.
>> The target property is an accessor object-
>> Beautiful.
>> For the element that the user interacted with.
>> Yeah, beautiful
>> And we are going to be accessing the value of that-
>> Yeah, brilliant.

[00:04:11]
>> Through the getter method value.
>> Fantastic, and that is a link, as you say, to the input element. And we are going to, exactly as you say, access via our placeholder parameter e the target of the user's action, which the user action event object captures in its target property, which is a linked accessor object to the input DOM element.

[00:04:40]
And we're going to use the getter, exactly as you said, of value to get its entered value via user's submission so to speak, which is FM for Frontend Masters, although I'm also realized it reminds me of Football Manager. One of my favorite games as I was growing up.

[00:04:57]
And that is gonna be assigned into as a JavaScript string into the global variable, as you said, Ian, of what?
>> Name.
>> Name, beautiful. There it is, that's our new data. That's our new data from which we're going to run our one simple function that produces our JavaScript representation.

[00:05:24]
It's almost an interstitial as an intermediate step before that all gets converted into actual C++ DOM elements. And so we get handle off the call stack. Doesn't that pink and green look great? [LAUGH] I don't even know what it's saying, but I know it looks nice. Okay, and so handle was, of course, out of the callback queue.

[00:05:47]
As always, I forget to remove from the callback queue, when we added it to the call stack. Okay, data's changed. We're running updateDOM every 15 milliseconds. In a more mature design, we would have upon in handle the name wanting to be changed. We'd have used an update name hook or a data state hook that would have ensured when we update our data, we also then triggered updateDOM to run.

[00:06:14]
But for our simplicity here, it's just gonna run again. And so, updateDOM, Alexa talk me through what's gonna happen here.
>> updateDOM comes back into the callback queue.
>> Into the callback queue.
>> The event loop checks if our global code is done running, which it is. And if the call stack is empty, which it is.

[00:06:34]
>> Absolutely, and add update.
>> Yes, updateDOM gets added to the call stack. JavaScript will invoke it for us.
>> And we are going to create a brand new, together-
>> Execution context.
>> You're so lovely, people. It just really keeps me going. And the thread of execution weaves into it.

[00:06:58]
And we're at, I don't know, 15 milliseconds or whatever. And now, have I missed anything here? No, right? And now we hit our conditional. Elems, is it undefined anymore, Alexa?
>> No.
>> It is absolutely not undefined. So we hit our else. And our else is going to, the reason it's not undefined anymore is we've got a bunch of access to objects to our now readily created DOM elements.

[00:07:29]
Meaning we ain't gonna be throwing them out from scratch anymore. Even though for our vDOM, for our purposes of reasoning, it's really lovely that we're gonna be able to produce a brand new description in full from a one-to-one relationship in our createVDOM function of what the page should show without us having to work out and reason.

[00:07:47]
Now, if you're doing this in a React type environment, we would use a function call to create all of those DOM elements one by one. But we'd still be from scratch reasoning from data to what is to be displayed in a one-to-one relationship. Same thing here, but under the hood we're gonna need to do a better job of not throwing out our DOM elements from scratch, but instead making incisive changes.

[00:08:12]
And so into our else we go where we're gonna do some trickery with our arrays here. Okay, Alexa, can you try verbalizing this for me?
>> Yes, so we're gonna reassign our prev DOM or previous DOM.
>> Previous vDOM?
>> Yeah-
>> I think it's a bit tricky.

[00:08:32]
Previous virtual DOM, virtual DOM.
>> To be a new array into which we spread out all of the sub arrays that are currently in our current vDOM.
>> Let's give a hand to Alexa for that one, that's really nice.
>> [APPLAUSE]
>> It's just these are not when a lot of time when I verbalize few many times myself.

[00:08:47]
So, [SOUND] what Alexa say, okay.
>> [LAUGH]
>> So we're gonna create previous vDOM a new array and we are going to spread out the sub elements. I'm just literally copying what Alexa said, of vDOM into that new array. Now, so that I don't need to recopy all that out and I guess so that I could show vDOM the new one down here and the previous one up here.

[00:09:13]
I'm going to just, but I'm also, I think I'm gonna show us the the outer array being redone.
>> That's quite nice, isn't it, right? So I'm going to have previous vDOM be a new array into which I've spread zero, one, two, or not, yeah, the previous elements in vDOM.

[00:09:34]
And now vDOM, I'm going to, now technically, vDOM is still pointing to the previous array with holding those three sub-arrays. But we know that we're about to reassign it to the output of running createVDOM with our new data. So let's hold on redrawing that and instead just do our next line.

[00:10:04]
Alexa, vDOM is gonna be reassigned, well, take it away.
>> Yes, so we're gonna reassign vDOM to the evaluated result of invoking createVDOM.
>> Create vDOM, that will go in the call stack. And we can just see its output here with all of the data run through it, a big old new array and now we're gonna fill out its data.

[00:10:30]
We know we're inside createVDOM here. But just cuz it's gonna be returned straight out into vDOM, we might as well just put it straight here in global. And so what is our new vDOM? I'm actually honestly feeling anticipation as we get to this final, I'm like. Okay, what are we gonna fill this array in with?

[00:10:48]
>> So the first subarray will have the string input.
>> Perfect.
>> The string FM for Frontend Masters-
>> Exactly.
>> And then the function definition we've stored under the label handle.
>> Perfect, under handle, so new reference to it. And then our next one?
>> Will be the string div, and then the string Hello, FM!

[00:11:12]
>> Beautiful, and the last one?
>> Will again be the string div and then the string Great job.
>> Beautiful, and there they are. Okay, done, and I can already see I'm gonna need to do some comparisons here. But I'm not gonna need to throw out my entire real C++ DOM elements.