Transcript from the "Diffing Algorithm" Lesson
>> I'm gonna run my findDiff function with passing in previous vDOM and vDOM. There they are, previous vDOM and vDOM and create, I think it's our last one. Create a brand new one what everybody?
>> Execution context.
>> There it is, execution context. We're still inside of update DOM, so it goes on top here, right?
[00:00:36] Am I right on that, yeah?
>> FindDiff, There it is, into it we go. And i is 0 initially, and we are going to compare if the string of 5 version of all these are our two parameters, previous and current. Previous refers to previous vDOM, and current refers to vDOM.
[00:01:10] And so we're going to say if i is 0, stringify, that means turn it into a string previous vDOM at position 0, that is going to give us the string what roughly fill?
>> It would be the string of-
>> Roughly inputs and then-
>> And then sort of the words function or whatever, I think.
>> Yeah, and then likely the code for it.
>> Yeah, exactly, exactly, exactly, yeah, yeah. And then now we do it again for current, which is what, in current is our vDOM, and we're at position i of 0. So, we're going to get a string of 5 out of that, which is what?
>> Input FM.
>> Input FM function.
>> And the function should-
>> Okay, are they the same? No wait, are they different?
>> Yes, they're different. There it is, they're different! And so we are now going to grab current, position 0, the text content, so the content basically, the input value.
[00:02:24] And we're going to grab that current, position 0, in that sub array again is 1, which is the content because we're gonna assume in this simplified model that we can only change our content. But yeah, we could easily expand this to handle all and any changes to what the user sees.
[00:02:45] And set that FM to LMs position 0 using our text content, uh-uh, no, no, no, we're gonna skip that one we don't need to, because it's an input. It won't cause any breakage, but we're going to hit our, this is again me trying to make sure we do not set a bunch of conditionals to work out what type of element it is, but we could very easily change that.
[00:03:09] And here it doesn't actually break anything, because we're gonna hit value on our LMs position 0, which is our setter, in this case to set on our associated corresponding element here. We're gonna set input value to a look incisive edit to FM. Did I get that right? I literally, and immediately it's gonna show up here on the page.
>> Okay, so we'll be comparing the stringied first index of private vDOM.
>> Which is going to contain div.
>> And hello exclamation mark.
>> And we're comparing that with the stringified vDOM1 at index 1, which is gonna be div Hello FM!
>> Brilliant, is that different?
>> You bet it is.
>> It's definitely different. And so we're going to do LMs position 1, and set, in this case it's text content. Again we can, this code works because text content is ignored by the input DOM element and value is ignored by the div DOM element.
[00:05:18] So text content setter, my goodness, LMs position 1 is our access object for the div element, where we are the first element where we're gonna set its text content to, what Ian?
>> Is going to become hello, FM!
>> And there it is, we as developers didn't think about any of it, but it's already made the incisive change.
[00:05:54] We just went, describe what it should look like on the page. Describe it, and then if the data changes, you do work here with the diffing. And the final one, would it fit? Maybe. The final comparison, Alexa, is going to be between? I's value is 2 now and so we're stringifying position 2.
[00:06:17] And what are we comparing?
>> We're comparing div great job, to div great job.
>> And are they different?
>> They are not, let's say it everyone together. Are they different people?
>> No, so do we go and do any changes to our DOM element?
>> I think we did it.
>> I think we did it people. Have I missed anything here?
>> Look at all those CPU cycles we saved.
>> My goodness.
>> What a beautiful job everybody, that is our update DOM function finished running.
[00:07:01] We exit our find div execution context. We exit our update DOM execution context.
[00:07:33] That's all we've been trying to get to, punchline. Descriptive of what's in the chart on the page, but with data that can change. Because what are the two things user interface is trying to do? We're trying to, what are we trying to do? Display, one, what's the first thing?
>> Display content.
>> And two, is to let the user.
>> Change the content.
>> Changed the content, change it, exactly. Yeah, yeah, exactly. So we had with HTML beautiful techniques for displaying content, put it on the page in the order you wanna display up, display in. And if you went to inside or something on the page, put it inside of that stuff in the code.
[00:08:35] So instead we said, one simple rule, users can only in their handlers update or we as developers can only write code to update underlying data, and then have a single function flow it through. Only think in terms of underlying data must describe all view all stuff the user sees must have corresponding underlying data.
[00:09:01] So that we can see exactly where our consequences, exactly what our change is based and caused by the underlying data flowing through to the view. It's one way of providing that restriction that makes our code predictable. I know where my output on the page comes from. It's my single function running through from underlying data.
[00:10:27] Where we could then compare those two collections of elements with their instantiated data and decide what actually changed, which we did. And from that diffing, that algorithm that did the comparison, we only made the actual changes necessary to the real C++ elements. No performance issues.
>> Finally, composable UI, that's not a disaster.
[00:10:59] Integrating that diffing algorithm makes our code for building user interface semi-visual. There it is, described on the page, looking like what it's gonna be in the output. But not untenably inefficient.