User Interaction & DOM Updates

[00:00:00]
>> So let's now have user action happen. I'm gonna use green for my user actions, okay? So user action, here it is, user action. And our user action is going to be, let's say this is, I don't know, one minute, because this user has been really enjoying looking at the input.

[00:00:21]
They've been musing over what they're gonna type in to the input, and they are going to type in-
>> Hi.
>> Hi, yeah, exactly. Type Hi, there it is, type Hi, exactly. All right, so as soon as the user types this, people, as soon as they type, we've already said this, our value property in JavaScript, sorry not in JavaScript, let me get that completely right.

[00:00:53]
Our value property in C++, there it is, our value in C++, shoot, our value, not in C++, our value in C++ is going get populated with Hi, there it is. We knew that from before, and that's gonna allow us to have data that can then change. Okay, but we can't run code there, don't panic.

[00:01:23]
The DOM API, particularly its Event API, is going to trigger this function to be called back into JavaScript where it will, where should we put this, it's actually at the top here, didn't we? Where it will sit in a queue of functions to be called on the call stack called the callback queue.

[00:01:54]
It's a queue of function definitions. Callback queue is a queue of function definitions, I've never put it there before, but that'll do. As soon as a function is in there, and if you've been to Async Hard Parts, you've seen this, but as soon as a function is in there, well let's put it in there.

[00:02:14]
So at this moment, actually tell me about the render engine, because it's directly related to what the user sees and where they're clicking. So when they start writing Hi in this input field, it will trigger in what's called an event. This is one of those names I don't love, event, I don't know.

[00:02:40]
It's a user action packaged up as a command to tell this DOM element, please run your function that handles the user inputting something. And that, it's gonna take this handle input function, [SOUND] and call it back into JavaScript to sit in the callback queue where handle input sits.

[00:03:08]
And we're not gonna get bogged down in the implementation of this Async Hard Parts, not bogged down, Async Hard Parts does this in more detail. But something called, well, knowledge questions, who knows what's the feature that's looping very quickly to check, is there any JavaScript code still executing currently?

[00:03:29]
Yeah, Ian?
>> Is that the event loop?
>> That's the event loop, exactly, spot on. But we know we're now at one minute. I don't care how long our code took to execute, it was not a minute. So there's definitely no code left on the call stack. The global code has finished running, there it is.

[00:03:48]
The global code has finished running all its code, and so the callback queue is able to pass the handle input function to the call stack, where it is then, okay people it's a big moment coming up, it's a big moment. You all know what's coming up, it gets added to the call stack.

[00:04:08]
Okay, exactly, start stretching people, because it's about, shoot, it's about to be a moment, people. That's not one that works. Okay, here we go. I don't see any parentheses, so I'm not seeing any calling of a function. Don't panic. As soon as a function is passed from the callback queue to the call stack, JavaScript's gonna put parens on the end of it.

[00:04:37]
Okay, anyone feeling excited for what's about to happen? Yeah, exactly. Because exactly, we've been waiting all day for this we're about to execute a function. We didn't have to make it execute. JavaScript auto executed for that, so auto as the bloody, what are they called, parentheses, to say run this function, to take our thread of execution inside of the function.

[00:05:06]
And to create a brand new, everyone together, three, two, one.
>> Execution context.
>> Well on, people.
>> [LAUGH]
>> Sorry, that's actually sad.
>> Okay for those who have not done JavaScript before, when a function executes what a function runs, a function is called and it's added to the call stack to be run.

[00:05:28]
In JavaScript, it creates a new execution context, a place in which to run its code, and a little mini store of data like this one, but just for while we're inside of this function. Beautiful, and that's exactly where we go right now, and that's where we create a new execution context.

[00:05:45]
Did we write the parens, Justice, to execute this function? Did we put the parens on? JavaScript did, exactly, when handle input, Justice just pointed at the screen, that'll do.
>> [LAUGH]
>> But that will do, right? It's JavaScript doing it, exactly. All right, good, Justice, uou got away with it.

[00:06:05]
And into it, we go where we are going to. Look at this line here, post is going to be the result. I almost like to say, the evaluation of calling, that's what I was gonna say, I almost like to say calling the value getter. Yeah, go on, Ian, can I really say calling when it's not a function?

[00:06:30]
No [LAUGH]
>> I'm just so curious if post is, is it gonna be h or is it gonna be [CROSSTALK]?
>> Great, yeah, yes, Ian's immediately right. Input is going to trigger an event on every letter. I was gonna add that caveat, don't worry, Ian. But because it's boring enough with the word Hi, let alone if it's just the letter h, you know why it could actually work.

[00:06:56]
For the first time, it could actually work, yeah. That's really cool. No, Ian's pointing out immediately there a real issue, that [INAUDIBLE], I mean, it's fine. Handle input would actually be triggered to run on every letter, and that's okay, that means every letter. And what we could do if you wanted to have it only run on fully entering text that we want to have sort of submitted to be displayed in this little preview window here, is maybe on text key, press down on the enter key, which would be key, I think, ID number 13, something like that, I think it's 13.

[00:07:30]
On key, press down. If that is key number 13, then run a function to handle it. One of the things about Hard Parts is one has to keep the code as tight as possible, meaning we're using just on input here. But you're actually right, to be really clear, Ian's saying, hold on, handle input would be triggered to run on, the event is on every input by the key, h, then i.

[00:08:00]
Okay, so really we'd have h the first time here, it's good to clear that up immediately. Yeah, we will definitely clear that up, probably, no [LAUGH] we definitely will clear that up.
>> [LAUGH]
>> Spot on, no, absolutely. Okay, easy to tweak or whatever, just keep it very simple and we'll keep using Hi for now just to keep it a bit more interesting.

[00:08:17]
So I'm actually glad you brought that up, Ian, it's quite nice to clear up immediately. So post is now gonna be assigned. The result of calling the value getter property on the JS input object that has access to the underlying input element where we find the value is the string Hi.

[00:08:43]
It's brought back as a DOM string Hi, and it's then going to be converted into a JavaScript string, which is then stored into post, there it is, Hi. Okay, it's been a lot of work, but flipping heck, I'm really proud, that we managed to get the user acting on what they saw by typing, it was an empty box, essentially, by typing, and that data coming all the way across to JavaScript.

[00:09:16]
When I look at this now, you look at it and you go, wow, what happened here? But actually to be fair, shoot, yeah, but it is the same model again and again and again, so we'll get used to it. I've heard people describe this workshop as going from difficult to tedious, so.

[00:09:36]
>> [LAUGH]
>> What a review, but it's gonna go from difficult to tedious. Because we're gonna be so familiar with search DOM and or use document object to access full C++ list of elements, to create an element or to search for an element. Get a link to that element via an object in JavaScript that can host that hidden link.

[00:09:59]
Then use methods on that object in JavaScript to edit, update, transform, delete, remove, move around the element on the C++ object. It becomes such a familiar pattern. It is the model of the web browser and the interplay between JavaScript and the pixels via the DOM. Okay, great, and so our second line there, Phil, can I ask you for this one?

[00:10:25]
Maybe if you don't mind, trying to do the sort of style of communication there in terms of our DOM element and what text content is doing here on jsDiv.
>> Yeah, so we're going to start off by accessing the jsDiv object.
>> Perfect, there it is.
>> We are going to, again, it is a little bit tough to communicate through, but I guess, execute the text content setter.

[00:10:54]
>> I love that, I love that, really nice, exactly.
>> And setting it equal to the value of post.
>> Which is a string-
>> Hi.
>> Yeah, beautiful, okay, and which is setting it as the text on the-
>> The DOM C++-
>> Element, yeah.
>> Element.

[00:11:15]
>> Text is set to Hi from JavaScript, and that immediately shows up on our screen. Look at that, people, well done, everybody
>> [APPLAUSE]
>> Well done, I brought my own applause for all of you. Look at that, user has typed, and what they've seen on the screen has changed [LAUGH].

[00:11:41]
It only took, my goodness, it looks kind of beautiful though, with the colors. It does look beautiful. But it's astonishing how much work it takes just to make a single change on what the user sees via JavaScript's underlying data, via an event and a function that handles that known as the handler.

[00:12:02]
And that is then passed back to JavaScript to the callback queue where it's, or, called back. Sorry, passed, called back, might as well call it by what it is, right, called back to JavaScript into the callback queue, added to the call stack, at that moment, parens are added by JavaScript engine on our behalf.

[00:12:18]
A brand new execution context is created to run that code, where we then used our global, just to make it easy, access to objects to these DOM elements to find input, grab what the user had typed in value, stick it in the post JavaScript data. We updated our underlying data in JavaScript, which is where we're able to use change run code on that data to determine where to display it back on the page, which we did via the text content set up on the jsDiv access for the development on the DOM.

[00:12:51]
Where we then set its text content, the property, actually on the DOM element might be something like text. Again we can look it up but the exact implementation of this, all we need to know is that the DOM API is designed such that we can use text content to access this C++ objects text to which we attached Hi, and that appeared on the page.

[00:13:15]
Imagine if we could have just done it right here, right, they're literally probably next to each other in memory. Not a chance, but also not the end of the world, you have the model, right? We have a function, I mean, kind of makes sense. You know what they're trying to do with this handler function, is it's like a little package of code that allows us to change the DOM, a little patch of code, it just happens to have to run in JavaScript.

[00:13:37]
But it's like little package of code that would be encapsulated to run on these two elements. But do we think of it like that? I don't know, maybe. I think the problem with, not least because of that console trick, is that we have no idea that actually there is these two different worlds.

[00:13:57]
One of which has data that determines what the user sees, but we cannot change right there and then. We have to pull back into JavaScript to change that data, to then redisplay it by adding it back to that store of data, almost sort of not even store of data, I guess it is.

[00:14:16]
It's a sort of object that has all the data the user is seeing directly. Unfortunately, if we wanna change that data, we gotta put it back into JavaScript. Meaning if we weren't tracking that data in JavaScript, we wouldn't even really know what data is on the DOM, because note, we do not have this data directly on these objects here in JavaScript.

[00:14:36]
It may look like we do, because when we write jsDiv.textcontent, it would go and get the value of the text of the Div but it ain't there. These are just access objects. I fall into the trap, when I think about that object being pulled out and then we add elements, we add data to it, I'm like, is that being added to this object?

[00:14:56]
We're using this object, get a set of properties to go and append information to a C++ DOM element. What that's gonna mean is that we're always gonna be doing this back and forth. In fact, every change of data is gonna require a back and forth, a flowing through, and in fact there's gonna be no permanent bonds built in between data here and data here.

[00:15:23]
Every single change between these two worlds is gonna require a manual running of a handler function to go and run code in JavaScript to change the data here. Then a manual execution, which was a term that Phil used, of a setter property to go and set data here.

[00:15:39]
There is no permanent bond. If posts were to change here, the text here won't change. We'll have to re-run a setter function, set a property to make the change. I mean, given as Ian rightly said, this is a lot like we are setting a value on a key on an object right here in JavaScript.

[00:16:01]
Or actually if we were to console log jsDiv on maybe a sort of HTML line of code, to actually, in practice, for this to be a setter into a different runtime that every time we change the assigned value here would have to be rerun to reset that value over here.

[00:16:19]
That's why your engineering in the web browser is so challenging. Nobody would design this from scratch.
>> [LAUGH]