Asynchronicity in JavaScript

[00:00:00]
>> Will Sentance: This is not a model of jobs of execution. Every single time we have a task to do, we must finish it before we move on. But that's gonna pose a big problem. Single threaded, one command at a time, and synchronicity executed. That means each line must be finished before you move onto the next line.

[00:00:20]
But that might create a problem. What if we have a task like speaking to a server, to Twitter's server, to get new tweets. To like we click here to view new tweets on Twitter, it's gonna send a message to Twitter's server. And on those messages, the data coming back from Twitter, is then going to want to display that new data, those new tweets.

[00:00:41]
We've gotta sit on that line, and wait for that data to come back, and when it comes back finally, then we can display it, and then we can move on to the next line. But that could take like half a second, it could take longer, and in that time we can't run any further code afterwards.

[00:00:59]
That's a serious problem. We want to wait for the tweets to be stored in tweets as opposed to be sort of, run a function. Let's have a look. So, if you ever run a function like get tweets, it sends off a message to Twitter. And when the tweets come back, we're gonna store them in the label tweets, then we're gonna display those tweets.

[00:01:15]
But in the meantime, can we move on to any further code below? No, not in JavaScript, not with our current model of JavaScript. And imagine what that does, like suppose I'm doing on a slack like I'm clicking emoji, and then clicking emoji responses. Our favorite. So clicking emoji responses, and it's sending a message to slack saying hey, new emoji light.

[00:01:47]
It can't move on until it's got confirmation back, that that was successfully updated to the server. You can't kinda move onto to further code until you've confirmed its code. Well, in theory, right? And then meaning if you're trying to click the next emoji response, and you got the seven lined up, and you need to like every single one, because it is very, entertaining message, you click each one.

[00:02:10]
You wouldn't be able to click the next one, until you got confirmation back of the previous one being clicked. If you're on Twitter, and you click view more tweets, it's gonna send a message say hey, get new tweets. Bring them back, and until you get the tweets back, you can't move on and click any other stuff on the page.

[00:02:24]
You click a heart to like an emoji, and like a tweet before it comes back, you click that heart, and you're getting no response, because that's code that needs to run to turn the heart from clear to pink. So, what are we gonna do? Slow function blocks further code running so, what can we do people?

[00:02:46]
Let's make it even harder. What if we wanted to directly delay a function running, using set timer, built in function? Its first input, is the function you wanna delay running. And its second input, is the number of milliseconds by which you wanna delay it. So, to Ethan, it's lovely to have all of you back by the way to, and for our online audience who are watching this in a video format later, from earlier today from this one day world, Ethan, what are we gonna have happen here with this set timeout?

[00:03:16]
So I've got my function print hello. I've got my set timeout call with print hello, 1000 milliseconds delay. Presume I gotta do it inside set timeout, right, before I then have? In what order, Ethan, would our existing model of JavaScript suggest the console logs would happen. And then do you think that's actually what happens?

[00:03:39]
Take it away Ethan.
>> Ethan: I think you'll wait for one second, and then print hello, and then you'll print me first.
>> Will Sentance: I mean, if you look at what I've got here, that's kind of explain how else it could be and yet raise, no raising hands from here and yet.

[00:03:57]
Do we think that's actually what happens? There's no way. But with our existing model of JavaScript, Ethan would be spot on. Let's make it even more extreme. Brayden here, now we've got delay at zero milliseconds now. Now, I assume, now I assume it will be fine. Brayden, what's that order of console logs here, do you think?

[00:04:19]
>> Brayden: The same as before, where we'd say hello, and then it refers to
>> Will Sentance: It wasn't that before, either. [LAUGH]
>> Brayden: If you follow the, [LAUGH]
>> Will Sentance: Okay, let's see what we actually think. So before, actually, it was, yeah. Me first, and then hello. We didn't feel like that'd be right?

[00:04:34]
But we know in reality is closer towards me first, and then hello, but that makes no sense. So here, what do you think Brayden?
>> Brayden: In hello first, there's no wait.
>> Will Sentance: That would be more logical right? Is he right? That's why the answer's no.
>> Brayden: [LAUGH]
>> Will Sentance: He's, not, it's gonna be me first.

[00:04:52]
And then hello. What is this language? This is profound. For in reality, JavaScript is not enough. We need new pieces, some of which aren't actually JavaScript at all, in order to explain what's happening here, our core Java engine, we've seen it all. It has three main parts. Actually, let's make sure our call stack is on here.

[00:05:16]
It has three main parts. It has our memory, storing stuff, our thread of execution. Execution context, that has been based on just mini versions of those two things. And it has our call stack on which global is always at the bottom.
>> Will Sentance: With the model, that and we have multiplied by two, when we're running it here.

[00:05:42]
We take it off throughout the global we run it here, it's on top. This is all a JavaScript but, we're gonna have to add new components, we're gonna have to add. Web browser features, we have to add promises. The event loop callback task, callback will task you, and the microtask queue.

[00:06:00]
And we're gonna add all of these to our puzzle in order to explain what's happening here.