Performance Gains Using Diffing

[00:00:00]
>> We managed to prevent ourselves rerunning our updateDOM function every single time by introducing this hook code in a function that we could hook into, that allowed us, when we updated our data, to mask the fact that we will also rerun in our updateDOM function, converting it all to DOM elements.

[00:00:26]
However, there was another problem. We had a full representation in JavaScript based on our data as it had changed, full updated representation of what was to show up on the page via the call to createVDOM. Wonderful visual, updated with our data. However, we then just proceeded to map through each element and just recreate them from scratch every time, replace the existing elements from scratch every time.

[00:00:51]
Was that really necessary, or could we have looked at that JavaScript intermediate representation? And what's to show up on the page? Use the fact we have that, and the fact we have the previous one based on the last data, and the fact that the only thing the user ever sees is, the data flowed through that representation description onto the page.

[00:01:14]
There's no other stuff on the page that could otherwise have shown up. It's all through that description in JavaScript, the visual, the virtual, the JavaScript DOM use that to compare how they actually changed between the two different states between the two different values of our data in JavaScript.

[00:01:32]
And then based on that, make the incisive actual changes to the real C++ DOM. And that is what we're gonna do. All the benefit of composition, that means moving around elements on a JavaScript representation so that we can have them all in JavaScript memory and have them visually represented there with one single description, one to one.

[00:01:56]
No conditional on this change, change this bit of the page, do conditional on this change, change this bit. No, just data, and here is what will be displayed, description of it in full light back in HTML. Very descriptive, very declarative, very composable, but dangerously inefficient. And so we're gonna introduce here, well, maybe it says on this slide here, all this benefit, but it's still dangerously inefficient.

[00:02:22]
Only some of our elements need recreating from scratch. Couldn't we recreate our vDOM from scratch to give us composition, but then write an algorithm? Clever code to check what elements actually differ, and only change the DOM elements that really need updating. So we're gonna need to figure out which elements need updating.

[00:02:45]
We've got here some preliminary code before we get to our final code in UI hard parts here, some preliminary code which is gonna build into that where we have data in JavaScript. We have a function createVDOM that is going to, when run, produce a description based on that current data or what should show up on the page.

[00:03:04]
We have a handle function. And we have this new function findDiff. And then in line 23 and 25 or 6, we have two codes to create VDOM, which is gonna produce that instantiated array. I mean, it's instantiated, means put the data into it, in this case, array of subarrays describing the page.

[00:03:25]
First time with name being an empty string, second time with name being will, okay? And we are then going to run createVDOM again and get that list of elements that are hopefully gonna become actual elements once we convert them. But these ones are in JavaScript, within that case, input, and then will, and then the handle function still, div, and then hello will, and then div, and great job.

[00:03:48]
We then are going to run in line 28, a function we're calling here findDiff that is gonna compare those two arrays of lists of elements, array of sub arrays, that list of elements. And how is it gonna do it? We're gonna loop through one by one. And then when i is 0, we're going to look at the zero index or zeroth element of the created visual virtual DOM in VDOM1, which will be input, empty string, handle, and compare it to the current, which will be input, will, and handle.

[00:04:32]
And if they're not the same, then we're gonna write some code to change the actual DOM element that we hopefully created the first time that we took that created VDOM. And actually, someone had to create the elements in the first place and put them on the actual C++ DOM in the first case.

[00:04:47]
But next time we're gonna check, has the data led to an actual change in the elements such that we need to go and make any significant edit to the real C++ DOM elements? Amazing, amazing. We're gonna have to use JSON.stringify as our tool for easily comparing arrays and their content.

[00:05:15]
So we're gonna pass in input, name, handle, which will be input, sorry, that'll be input empty string, handle, and that'll turn into, [INAUDIBLE] JSON.stringify, that'll turn into the string, input, space, function handle. And then when we do it again, it'll be, input, Will, function handle attribute will be input as you probably, input, function handle, and the next time will be input, Will, function handle.

[00:05:42]
Will they be the same? No, they will not. And so we will have to go and do some real changes. However, for i equals 0, 1, 2, the ID2, whatever it's called, index 2, will div great job and div great job be the same? You bet they will, thank you, exactly.

[00:06:06]
They'll be exactly the same. So will we go and change any actual DOM elements? No, we won't even need to.