Virtual DOM Introduction

[00:00:00]
>> So, now introduce the virtual DOM. I think the most misunderstood concept in UI development because I don't know, it sounds kinda good, doesn't it, right? I don't know what it is, but it sounds kinda good. We're going to build out a y for it, hopefully. And that's gonna enable us to have a more visual or declarative version of JavaScript for coding user interfaces, knowing that JavaScript is incredibly non-declarative.

[00:00:30]
Doesn't matter where, if your output of your code in UI is physical element or not physical, right? Your elements on this green in an order you would perhaps imagine, hopefully, that your code would look somewhat shaped like what shows up. If you're adding an element here, here, and here, the display will display them in that order.

[00:00:55]
If you're thinking about declaring, I want these elements in this order, what's the most intuitive way of doing that was HTML's listing them down in that order down the page. That is what declaring, that is what descriptive code would look like for producing the output, not of data but of pixels.

[00:01:16]
Pixels are a visual structure. Therefore, the declarative style of UI engineering would be a visual, somewhat, representation in our code of what's to show up on the page. Well, JavaScript does not give us that, by default we're going to give ourselves that. But it's gonna require some significant optimizations, diffing, reconciliation to even be performative.

[00:01:38]
Slash also, it is what enables us to have performative declarative code in UI. Because having it, we're gonna see interstitial, and intermediary, and intermediate, I don't know, none of them quite work, version of our page. Will allow us to maybe archive the last version based on the previous data from the user and maybe compare those two.

[00:02:07]
In JavaScript, work out the actual differences, and then pinpoint change, the real list of elements in C++ that will actually change what the user sees. So we both get the benefit of a visual representation in JavaScript of what's gonna show up, just for our ability as engineers to be able to compose our UI.

[00:02:29]
That means move pieces around and move little units of view around in our JavaScript to appear on the page. And we're going to from that optimize our performance to save ourselves making unnecessary changes to the real page.