>> So let's now use the fact that the real jsDiv is not this, that we've console.logged and saw, but instead is an object with a method that has access to the C++ DOM element, and so with that in mind in line four. In line four, here we go.
[00:00:18] We are going to access jsDiv. That's not very good, is it? Let me get this right. Let me get my wording right. So here we go, what is post? Ian, what is the value of post here?
>> The current value is the string high and exclamation mark.
>> Beautiful, beautiful, perfect.
[00:00:41] We are going to try to attach to, we hope, the DOM element, the string high. Well, here's already a tricky question. jsDiv is our object that has a property text content. I kept calling it a method, maybe you can think why. Cuz if that were a regular old property, Ian, can you help me with this?
[00:01:05] Where would that high be assigned? If I had jsDiv.text content equals post, which you just said is string high, where would that high be stored on that jsDiv object?
>> Can we just give Ian a round of applause for a really sharp-
>> We probably want it to go out to the DOM.
>> Yeah, beautiful.
>> And by extension show up in the UI in the browser.
>> Beautiful, wow, Ian, excellent, excellent, exactly right. And it does, because in practice, text content is working to do this. One, it goes and looks at the link.
[00:02:01] In this case, it's a link to which element, Ian?
>> It's a link to the jsDiv.
[00:02:57] And now exactly as you said Ian, high shows up on the page. Beautiful, flipping heck. We've now managed to display content, one second, Paul, we managed to display content that would have taken us one line in HTML. Honestly, actually, we didn't even do the, yeah, it would have taken one word, one letter.
[00:04:09] Well that's a separate question.
>> That's a more deep question. But you might be thinking wow, this is a heck of a lot just to put some content on the page. However, it does turn out that once we have this model down, this is the model until the end.
[00:04:23] As I said, there are four parts to UI hard parts, part one is the truths. Part two, three, and four are moves to make the truths more easy to work with. Yes, it's my new quote. It is demanding, however, once we have it down, it becomes the standard.
[00:04:43] Let's have thumbs on this, I wanna start seeing clarifications. Excellent, John's got one, Justin is clear. Paul's got one, fantastic, Phil, Alexa, Wyatt, all clear. Let's start with Paul, you had yours first.
>> It's not a big deal but you put the high in the wrong box there, you put it in-
>> No, honestly, Paul, thank you. Everybody is grateful for you doing that, thank you, because otherwise that would have been let. Can we do a round of applause for Paul? [LAUGH] [APPLAUSE]
>> Yeah, yeah, thank you, Paul. Honestly, for me, that makes me appreciative you're following it so closely, fantastic.
[00:05:17] What else was I gonna say? Yeah, why do we need to even know this? Well, flipping it, we're gonna see in a moment that the fact that these are in two different places. Our data is in one runtime, and the structure that persists displaying that data and directly mirrors what's on the page is in an entirely different runtime that we access, by the way, on a case by case basis.
[00:05:40] We're gonna quickly see there is no way to have data, well, I'm not gonna give it away, but wouldn't it be nice if we could have changes of data here flow directly through to here? These are two different runtimes that we're gonna have to manually make the moves across to change.
[00:05:59] Because you might be like, well do I really need to know this? Unfortunately, having your data in a different environment to the structure of your page where that data ends up being actually displayed, and when the user changes, the data is gonna change here, but you've still got data over here, that's gonna turn out to be profoundly challenging.
[00:06:50] I mean, that couldn't be more misrepresentative, right.
>> All right, John, you had one.
>> So I had a question about the call stack. So document.querySelector is being pushed to the call stack or?
[00:07:32] I don't ever put it on the call stack, although it is on the call stack, because I like to think of the stuff on the call stack as being the code that we have written and that we are taking the threat of execution inside of. And that we could actually change the code inside the functions that are on here, whereas we can't go and change querySelector.
>> We'll see that in a moment.
[00:08:30] But I do always like, I don't really know what this quote means, but the turtles all the way down quote, which is, you can always go a layer deeper. The question becomes, is it helping you understand building what you're doing today. We are not doing this for the sake of the intellectual satisfaction, although to be fair, we sort of are.
[00:08:49] Only because, I want also you all to be able to go to your interviews and say to them, you're gonna by the end of today, even by the end of today, maybe by tomorrow, be able to say, I prefer to spin up my own custom implementation of the virtual DOM.
>> Let me try that again.
>> I prefer to spin up my own custom implementation of the virtual DOM. And by the end of tomorrow, did I miss part of it? Okay, I know you can't do it yet, because you don't prefer it yet but soon you will.
>> But soon you will, once you do, you'll be able to say that. What I'm getting at there is this stuff is incredibly important to understand the great UI frameworks, the reacts, the felts, the views, the angulars. I should have had this at the start, sorry, people.
[00:09:35] Under the hood, such that you can debug them, such that you can work with them at scale, such that you can even genuinely spin up your own versions of them. It's for that purpose. However, it is also quite cool to be able to go into interviews, and speak to some of these things.
[00:09:52] Because the senior engineers, the VPs, whatever, interviewing you, to be able to tell them these sort of things, they may have come to these over years of kind of piecing it together. But for you to be able to give them these mental models, honestly, it's a cool edge.
[00:10:07] Listen, I'm not saying you wanna intimidate them, I'm trying to be polite, I don't want to have on record.
>> I'm not saying you wanna scare them, but I am saying that you want them to come away saying, uh-oh, my job is on the line. This person's knowledge is, I don't wanna, see, that's not very nice is it, but that's the goal.