DOM Diffing Setup

[00:00:00]
>> Let's go. We are at our final code. I'm so proud of everybody. We're gonna draw our view here, our web page. The output pixels, technically their pixels being displayed to the graphics card. They're automatically produced by our layout and render engine from our C++ implementation of those elements as a list, technically as an object in C++, there it is.

[00:00:43]
And there it is. And that's a full description in list form or technically object form of the elements that show up on the page that will automatically display. If we could write C++ code today's and yesterday's session, wouldn't have mattered, but we can't. And so we are going to have to lean on JavaScript to do so.

[00:01:05]
Here it is. There's a JavaScript on this side, C++ on this side. We initially loading our app.html. Do we need to draw that again? You know what? I've enjoyed this so much. Now we're so close to the end, I just wanna drag out the last few minutes for us because, yeah, there it is.

[00:01:23]
Our app.html is loaded into our web browser's HTML parser. I actually often get that feeling as we get towards the end of hard parts in front of I'm like, we've done so much, I don't even want it to end. And so then we have HTML parser takes those elements, then we list out and put some in this C++ something that we list out in HTML and put them in the C++.

[00:01:51]
Honestly, we don't list out any elements anymore, right? Because we do not want to really have anything displayed to the user that is not tracked, mirroring underlying state in a single source of truth, not HTML that then you can't switch on and off from there anyway. And so you've now got an auto on source of truth for all those elements that you might later then switch off and the user change what they see as a result, but you've got one source of the data that represents them in HTML.

[00:02:21]
And now you're gonna have it in, no, just put it all in JavaScript. That's gonna be your source of truth. That's gonna be your data on which everything the user sees depends. And when they take action to change what they see, you're changing that data in JavaScript, including whether to show a div or not, okay?

[00:02:37]
And then we have our JavaScript engine with that in mind, switch on. It has a memory and it has the ability to affect this C++ list that produces our final rendered image of the page by the layout and render engine. And then we also have a bunch of other features in the web browser like timer, that we can access again from JavaScript.

[00:03:02]
And when doing their work, we'll not block the JavaScript thread from executing code. Beautiful, there it is. Okay, it's gonna have on it, by default, a body element that represents the entire page to which we can add things. And then in JavaScript, we have our memory. Phil, if you don't mind again, just telling us the first thing that's in that memory?

[00:03:30]
>> Yeah, the document object.
>> Yeah, and that's loaded there. Whenever the host, the place that is running JavaScript, is the web browser. There it is. Okay, and it has a link to where?
>> A DOM.
>> To our DOM, yeah, essentially to our DOM. Exactly right, there it is.

[00:03:48]
And it also has a bunch of useful functions, getter/setter properties. What is the functions that we're using here?
>> That would be-
>> We want to create some elements, and we want to-
>> Create element?
>> Yep, beautiful. I'm assuming you've seen that somewhere? No, sorry, you know where it is?

[00:04:06]
>> [CROSSTALK]
>> It is in the collapse. Don't try and click on that, there it is. But I was glad that you all were like, I know where it is, cuz that suggests it's not too bad that we have collapsed that bit, we do know what it does, right?

[00:04:21]
It does all the work of taking that description from the array in JavaScript and producing the actual DOM element and the accessor object. So hopefully we are clear on that at this point. Okay, now we're gonna have a call stack down here, all this set up, right? Call stack down here and our callback queue, Here, and then the event loop that determines whether the call stack is empty and all global code is finished running, such that we can add functions to the call stack.

[00:04:53]
Okay, let's, Phil, if you don't mind, get started there with our, well, piece of state, our piece of data in JavaScript from which all of this is gonna propagate.
>> Yeah, so first thing we're gonna do is we're gonna declare our name variable, and initialize it to the empty string.

[00:05:08]
>> Beautiful, and then the next, again, line, really here, but I put a semicolon to just-
>> Yeah.
>> Condense it.
>> Yeah, we'll be declaring our VDOM variable.
>> And usually here we're gonna immediately go about actually assigning it based on our initial state. And that's just for the ordering of this code to work and do so as tightly as possible.

[00:05:29]
So let's do that. What's gonna be the output with this state, with this data in our VDOM global variable?
>> You're gonna go through the return values.
>> Yeah, return value. So we know we're gonna call Create VDOM, inside we're gonna fill in the dynamic data name with actual values, yeah, so take it away.

[00:05:52]
>> It'll be an array with three subarrays, that first element will be a string of input. The next element will be an empty string.
>> Yeah, perfect.
>> And then the third element will be the function handle.
>> Fantastic, empty string and function handle. Again, I really like that I am able to sort of do these in a random order cuz I can visually see them there in JavaScript.

[00:06:20]
And that kind of gives me a preview of just how it will look in my page as well. So the next one is?
>> Next one will have the first element string of div, second element, the string hello.
>> I did it. Okay, yeah, exactly. Brilliant, exactly. Perfect, and then we have our previous VDOM label created.

[00:06:45]
So help me with this, Phil.
>> Global memory, we declare a previous VDOM.
>> VDOM, nothing assigned, but I have a feeling we're gonna end up having it point to this or at least the elements of this object. And probably the way we are gonna end up doing it in my diagram, is probably just moving this label up here, and having it, what we know in practices this is actually re-labeling.

[00:07:11]
I think it's gonna create, when we end up doing it, a brand new array that's going to have all these elements in it, and then this previous VDOM. Do you see in Line 18 when you end up doing this? We're gonna have previous VDOM be a new array with the sub-elements of VDOMS spread into that new array.

[00:07:32]
In practice, I'm gonna put the word previous VDOM here, [LAUGH] cuz that's good enough. Okay, and then last declaration there, Phil, is?
>> Elems variable,
>> Beautiful, and we'll see that that hopefully is gonna have a list of objects that could have corresponding DOM elements in C++, and then hopefully, instead, corresponding pixel on the page.

[00:07:58]
Perfect, let's declare a bunch of functions, right, that's next.
>> First we're gonna declare a create VDOM function, which, I don't know if we have that in there yet.
>> Well, which we use, forgive me, by the way, we use that cuz of the hoisting, right? So we're able to use any of these functions as soon as, wherever we want, even above where they're defined, because function keyword ensures they're all available throughout the whole file of code.

[00:08:20]
Probably a legacy JavaScript feature, but one that's quite nice for here just in terms of readability. I can't figure out how I'm gonna fit that on. So I think I'm going to get rid of this here so that we have room and maybe draw it either a bit further down or something else.

[00:08:36]
I'm not sure, we'll figure it out. But yeah, let's put him on here. What are our functions, if you don't mind?
>> Create VDOM.
>> Create VDOM.
>> Handle.
>> Yeah, so create VDOM is gonna be the one that, well, we just did it right, takes our data and creates our JavaScript representation with the real data in it, beautiful.

[00:08:55]
Next one was the handler function handle that's actually already stored up here on the specific JavaScript representation of that element. That's going to appear on the real C++ DOM when we convert these elements one by one. So there's our handler. And on that note, here's our big old function to do all the work.

[00:09:15]
This is called what, Phil?
>> Update DOM.
>> Update DOM, the next one?
>> Convert.
>> This is our function that we haven't even shown here, but it's exactly what we had before. I hope that's okay, people. That's just to save space, you can see there was no room.

[00:09:29]
But this is taking an array of three elements here, input, empty string, and handle, and producing a DOM element type input with an accessor object to get links to that corresponding DOM element in C++, okay? And then the final function here is?
>> Find div.
>> Thank you so much.

[00:09:54]
And there it is. And that's gonna do the work of figuring out, do we actually have to update the real DOM? And then let's put our call stack here. And then maybe we can have our queue, not to imply it's outside of JavaScript, but there's our callback queue to the right.

[00:10:15]
There we go. All right, and the event loop will check. Okay, good. All right, finally we hit what, Phil?
>> We execute the set interval function passing to it the arguments of the update DOM, function definition, and 15.
>> Update DOM, function definition, and the 15 milliseconds as the interval.

[00:10:44]
And that's gonna set up an interval over here with 15 milliseconds, and the update DOM function, I need to get my energy backup, update DOM function. Whoa, okay, nice, update DOM function. And 15 milliseconds later, well, yeah, it's gonna run many, many times. Now we want to actually go and grab it all and stick them on the page, well, on the condition that there's not yet any elements on the page.

[00:11:16]
Someone's gonna do it. Consider this the mounting of the elements. So heard that term before? Okay,