Asynchronous Web Browser APIs

[00:00:00]
>> Will Sentance: So we have to introduce a whole new world of features of JavaScript. These are features that happen outside of our JavaScript engine itself. These are features of the web browser. JavaScript's a little feature of the broader web browser. Web browser is full of features. The dorm, that's the model of our webpage that JavaScript can interact with to change stuff on the webpage.

[00:00:27]
It's a sort of representation of the stuff on our page that JavaScript can write code to interact with that changes our webpage. That's a feature outside of JavaScript. A console is another web browser feature that's a feature outside of JavaScript. Our local storage, that database thing in the browser.

[00:00:47]
Our ability to speak to the Internet, the XHR ability, all of these are not JavaScript features. They're found on MDN. As a list of web browser features known or be it, in JavaScript as web browser API's. The reason they are know as that in JavaScript is that we use labels for those features from within JavaScript to stimulate, to get started, a web browser feature.

[00:01:15]
And any feature that's not in my own runtime, in my own engine is something interface with. So, we call it an AP Interface an API, so we interact outside of JavaScript.
>> Will Sentance: We gotta introduce those to have any chance of solving this three-way conundrum. The only chance we have of solving it is introduced web browser features or in Node, they're known as background threads or APIs in Node as well.

[00:01:44]
So here we go people. Line by line, we're going to walk through this. And this solution I'm going to tell you, everything else is just an augmentation of this solution. I like this solution. But JavaScript designers recognize some failings of this solution. And solution three is gonna be our brand new solution.

[00:02:09]
And that is the most popular. But I still think our final solution, we're gonna see the very end of the day is the solution that finally is particularly nice, I think. And all of these solutions work including solution two if you understand how they're working under the hood.

[00:02:27]
So here we go. Line one Michelle, what are we doing?
>> Michelle: We're declaring a function and memory called print hello.
>> Will Sentance: Excellent. Thank you, Michelle. Can you tell it a little bit slower while I continue to wipe down my white board?
>> Michelle: We're defining a function in memory called print hello.

[00:02:47]
>> Will Sentance: Print hello. I'm trying to keep my handwriting tidy for posterity. There we go. That's better, good. All right, excellent. Thank you Michelle, excellent. Next line, talk to me in general terms. Victor, what are we doing in my next line? What are we calling?
>> Victor: I think we're calling the-

[00:03:12]
>> Will Sentance: Don't try and be smart about it.
>> Victor: Okay, we're talking to the global execution context. To use a-
>> Will Sentance: Okay, stop trying to be smart. Someone else speak in more abstract terms. Very good, Victor. We're going to come to it in a sec. I just want to first, Mike.

[00:03:26]
>> Mike: I think we're actually trying to print our function.
>> Will Sentance: Okay, so we just need to be more abstract. We're calling set timer with what arguments, Ben?
>> Ben: Print hello.
>> Will Sentance: Yeah, the entire print hello function definition. Be really clear. When I call a function, what symbols tell me I'm calling a function event?

[00:03:45]
>> Ben: The parentheses.
>> Will Sentance: Parens, parens, parens, parens. I'm calling set timeout. Do I see any parens on the end of hello? Definitely not, I'm instead passing the entire function definition into set timeout. Who knows what that means?
>> Multiple: [LAUGH]
>> Will Sentance: And the second argument 1,000 which represents the number of milliseconds after which I want this print hello function to be called, to be invoked.

[00:04:11]
So it's gonna be auto-invoked, kind of beyond my control probably, right? Somewhere inside Set time out, wrong, but let's imagine that's the case. Let's imagine that is the case that somehow, when I put parens up, function call, Brian, what do I create, a new?
>> Brian: Execution context.
>> Will Sentance: Execution context, everything suggests I would, let's just see what would happen if that were the case.

[00:04:33]
New execution context, there it is Into it I go and then plus 1000 milliseconds. It's gonna stay on the cool stack for 1000 milliseconds. We're gonna be inside this and you've got execution context. At which time, I'm then going to, well, JavaScript set time out is gonna call for me, print hello and we're gonna come back out.

[00:04:55]
At about 1,001 milliseconds and hit what line, Michelle?
>> Michelle: The set time out.
>> Will Sentance: Nichole.
>> Michelle: The console log.
>> Will Sentance: The console log, me first. Okay, 1,001 milliseconds later. I've continued my JavaScript synchronous thread, a thousand one [INAUDIBLE]. Does this seem likely, as how to set timeout works?

[00:05:19]
>> Michelle: No.
>> Will Sentance: This would be disastrous. This is absolutely not what set timeout's doing. Set timeout, in fact, does nothing. Here's one little thing in Javascript, but in fact, does nothing of any interest in JavaScript at all. It is instead a facade function. A facade for functionality happening outside of JavaScript.

[00:05:47]
Where? In what place?
>> Multiple: Browser.
>> Will Sentance: The web browser. JavaScript has no timer.
>> Will Sentance: JavaScript is not the timer that set timeout's using. We've got to introduce a whole new section to our model app platform, for understanding JavaScript's runtime. It's actually not even in JavaScript,
>> Will Sentance: The web browser, let's try and keep this tidy the Web Browser features, there it is, my proudest moment, there it is.

[00:06:30]
>> Will Sentance: Yeah, Ben look up. That's a beautiful illustration.
>> Multiple: [LAUGH]
>> Will Sentance: It's not as good as I thought it was actually. I'm disappointed with that. Let me try that again. I've been practicing that for so long. The only thing I prepared. There we go. Too small this time.

[00:06:47]
[LAUGH] I got it too small this time. Now let's look at. Okay, here we go straight. And you've got pho for this time.
>> Ben: I like the Firefox.
>> Will Sentance: Thanks man, nice.
>> Multiple: [LAUGH]
>> Will Sentance: I don't even know what that looks like. That's got too many bits to it.

[00:07:04]
And also I'm anti open source. No, no.
>> Multiple: [LAUGH]
>> Will Sentance: That's a joke. It's a joke. That's a joke, big fan. Big fan of Firefox. Ever since 2010, big fan. All right, good, web browser features. Set timer is gonna do nothing in JavaScript. Instead, it's gonna spin up a web browser feature, but which one?

[00:07:37]
Does anyone know what the features called?
>> Michelle: A work group?
>> Ben: Timer.
>> Will Sentance: Timer, brilliant Ben. You're gifted. There it is, timer. And we're going to take the information we need, which is a function that we want to have called, the reference to the position in JavaScript's memory of the function, we want to have called then and the important property being the thousand milliseconds.

[00:08:01]
And down in the web browser, down in the web browser, we are going to spin up our timer with 1,000 milliseconds as our property. And then we're gonna have a kind of condition. Is it complete? Ben, is it complete yet?
>> Ben: No.
>> Will Sentance: Definitely not, exactly. At 1 millisecond, it is definitely not complete.

[00:08:22]
And then on completion, Ben, what are we gonig to want to invoke?
>> Ben: Print hello.
>> Will Sentance: Print hello exactly on completion, on completion we are going to want invoke
>> Will Sentance: We are gonna want to invoke we're gonna wanna run print. Hello, the function. All right, set timeout's work is now done.

[00:08:55]
It's only work of interest was the work it does outside of JavaScript. Technically in JavaScript it returns a value representing a timer, okay, fine. But it has nothing of any interest in JavaScript. Its only job is in the Web browser spin up this work. Meaning, we can move on from this line, this line until we finished its work, in JavaScript, well, it's nothing.

[00:09:26]
So we move straight on to Alec. What is our next line of code at about two milliseconds that the JavaScript engine, we've just onset time out, the JavaScript engine is going to execute?
>> Alec: It's gonna log me first to the console.
>> Will Sentance: Exactly, log me first, beautiful. Me first is there.

[00:09:45]
And look, people, we're very, very close to being happy. We've spun up, we got started on a task that takes a long time, here albeit just a timer with functionality. You want to call it the end of it, not the most interesting task but it's a task takes a long time and we've continued straight on.

[00:10:05]
There you go, accelerated, that's not a good new additional piece to my diagram. We continued straight on in our synchronous job at the execution to add console log. Look at that. This is very, very nice. This is the first part. But now we're going to encounter the issue, it's basically going to be our issue ongoing, which is, now we have functionality.

[00:10:30]
That's gonna hopefully come back in and be run, how? JavaScript sync, JavaScript synchronous code, like the regular code, the stuff that's top to bottom, line by line, is done now. But and since I call stack, I should highlight call stack up, sorry. Just make sure our call stacks up.

[00:10:49]
JavaScript synchronous code is done now. There it is. But in the background, a world of stuff is happening. Our little timer, it's clicking by, as it goes. And at about 1001 milliseconds, what happens? Brian.
>> Brian: It executes the print hello.
>> Will Sentance: Right, is it complete at 1000 milliseconds?

[00:11:13]
Is our timer complete after 1000 milliseconds?
>> Brian: Yes.
>> Will Sentance: It's complete and so we're able to call print hello. What does it mean in terms of my callsat, Brian, to say I execute call print hello?
>> Brian: It adds it to a queue?
>> Will Sentance: We'll come to that in one second.

[00:11:29]
What does it mean, it tells my call stack?
>> Brian: It adds print hello to the call stack.
>> Will Sentance: The call stack. Excellent, Brian, thank you man. It adds it to the call stack. That is to say, the thing that was happening outside of the web browser is gonna send a message to say.

[00:11:44]
Print hello function, get it back on the call stack. It's ready to be executed back in JavaScript at about 1,001 milliseconds. So there it is, look at that. At 1,001 milliseconds, we get our JavaScript Code. Our JavaScript function, the one we deferred, is allowed back in. It calls print hello, which console logs hello.

[00:12:10]
And so this is a beautiful outcome. This is it. Our three goals were do tasks that take a long time like deferring a function with a timer. Continue running our Java Script code in the meantime. Oops, no, wrong way. Continue running our JavaScript code in the meantime. Console code, we first continued, immediately after.

[00:12:33]
We set up a task, set time out, it was going to take a long time. We set up long term tasks and we continue the hell straight on 2 milliseconds later and when our slow task, that is this countdown on the timer, completes. Be able to run functionality knowing the task is done and data is ready.

[00:12:53]
No data to be ready here. But we'll see in a moment what that looks like. All right, thumbs on this concept. I want to add, there are a whole bunch of edge cases. Things where you go, but what about if that happened? But what about if that happened?

[00:13:11]
I wanna see some medium thumbs on clarifications but what if that happened? We're gonna see in a moment when you interact with a world outside of this pure synchronous JavaScript engine. You're going to need to have some really strict rules for when our JavaScript engine allows this differed functionality back in.