Handling User Interaction Q&A

[00:00:00]
>> Go to, users can change what they see. So let's put it better, change the content. See content which was actually here, I guess an empty box, that's content in a sense, and then change the content. Which is to say, change what they see, the high and change online data for it and then display it on the page.

[00:00:19]
They're changing what they see based on their action. User direction typing, clicking cuz this was typing, right? Is registered. Registered is a password for the DOM element knowing, and this is one of those moments where it's like, how is that implemented? Well, all we need to know as engineers for building out web applications is, when the user takes action on that input field, the associated handler triggers running back on the callback queues.

[00:00:44]
It's literally a reference to that function is added to the callback queue. That's the DOM's job and then JavaScript will then execute that function. They know then they're taught but how can this cause a change in data, which is elsewhere in JavaScript? Because of the handler functions. It lets the user action or input notice events, password for events and sort of.

[00:01:09]
Yeah, the construct that ensure that when a user takes action, an associated function based on that type of action, in this case an input event. In this case an input event triggers the associated function to handle the input pass back into JavaScript where we can then change the data.

[00:01:29]
That key line there shouldn't really be there, honestly. We've been talking about let it be passed back. This line here is where we are assigning, where we're storing that handle input function ready to be triggered by user action. By saving a function, [INAUDIBLE] here. Let's say we wanted evidence in the DOM element where the user action event happens.

[00:01:50]
The function be called back into JavaScript and execute automatically. So what? Okay, that's very optimistic. Well, user actions can then trigger running JavaScript code to save or change the underlying data post, in this case in JavaScript. And then change what's displayed back in the DOM by taking that data and sticking it anywhere we want on that list of elements.

[00:02:13]
Now we have to manually reupdate the DOM with our data. There's no propagation. Every time the data changes here, we have to manually go and update what's seen on this, or what's added to this DOM at C++ DOM. But we have a full user interface. Goal 1, display content data inside the computer.

[00:02:29]
In this case all in JavaScript as the view for the user to see it has to be from JavaScript cuz that's where there's mutable data. Goal 2, enable the user to interact by tapping or clicking with what they see, they view, and then change that content. Which means in practice, changing underlying data in JavaScript, and then we went from post being an empty string to high, and then displaying that back on the view.

[00:03:00]
All right, people, that's our full user interface. Let's have thumbs. I wanna see every clarification question. If I punt some of them, forgive me, but something will show up later. You lost me, I have a clear mental model of, I need clarification. What is wrong with all of you?

[00:03:18]
If you literally looking around, [INAUDIBLE] you do not need to emulate. Okay, is anyone got clarifications, why? Good, no?
>> It's not a question, I'm not sure it's super topical, but having spent a bunch of time in imperative Dom land and the teens and being, why is it hundreds of milliseconds to change this one thing on this list?

[00:03:38]
This is the first time I've understood like, it's cuz there's tons of memory being allocated.
>> And it's all sorts of interesting pieces happening in this process. And I think it's just, I mean, don't think that the one minute is because of anything. The one minute here is just the use was really preparing what to write.

[00:03:55]
>> [LAUGH]
>> All right.
>> How does the callback queue relate to the task and micro task queues? Is it different and how does it fit priority?
>> Okay. So callback queue is our task queue. Micro task queue is our Priority VIP line as I know some of our audience like to call it, some of our community like to call it.

[00:04:17]
So they are queues that have different priorities. So if there were multiple items in the callback queue, if we had a handle of input, but then they were also to click these would all start queuing up here, ready to be added to the call stack once the previous one has been removed.

[00:04:34]
Actually, sorry, I should have said this callback. I should have said that this callback here, handle input, which was called back in, I should have said has now been removed when it was added to the call stack. So this is removed. But if there had been an error function in the micro task queue, does anyone know what actions in JavaScript put a function in the micro task queue in?

[00:05:05]
>> Something like asynchronous?
>> Yeah, these things are all asynchronous. What's the specific? Are you talking about asynchronous functions?
>> Yeah.
>> Specifically.
>> If you invoke an a sync function.
>> Yeah, yeah, exactly. It's specifically an a sync await under the hood, which is implementing promises, at least was-

[00:05:22]
>> [LAUGH]
>> That goes into the micro task queue. And they take precedence even over, so they were both waiting in the queue here. The micro tiles queue will take precedence over the callback queue for being able to the call stack. But we're not thinking about that right here.