Transcript from the "DOM Diffing Setup" Lesson
>> 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 a C++ implementation of those elements as a list, technically as an object in C++, 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.
>> Yeah, the document object.
>> A DOM.
>> To a DOM, yeah, essentially to a DOM. Exactly right, there it is.
[00:03:48] And it also has a bunch of useful functions, got a set of 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?
>> It is in the clubs. 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?
>> Yeah, so first thing we're gonna do is we're gonna declare our name variable, and initialize it to the empty string.
>> Beautiful, and then the next, again, line, really here, but I put a semicolon to just-
>> 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.
>> 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.
[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: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.
[00:09:15] This is called what, Phil?
>> Update DOM.
>> Update DOM, the next one?
>> 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: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 50 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,