Asynchronous Browser Features

[00:00:00]
>> Will Sentance: Where does JavaScript actually run? Where is it running its code? Peter, where's JavaScript running?
>> Peter: Typically in a browser.
>> Will Sentance: In the browser, yeah, we don't open an app called JavaScript, right? We, run it in a browser we turn on, now the browser is a remarkable creation.

[00:00:17]
It has so much more than just JavaScript in it, so let's just, we use a white pen here for the JavaScript engine. As part of the blue, the overall web browser, sort of say is, I can't draw the Firefox. There it is JavaScript, it doesn't run in isolation, it has a ton of features in the web browser as well, what are the other features that the web browser has?

[00:00:47]
Adam, can you think of some other features the web browser has that JavaScript does not have?
>> Adam: Like dev tools?
>> Will Sentance: Sure, yeah, absolutely, honestly, yeah, dev tools, let's put it in dev tools, console, yeah, absolutely, what other things, Matt?
>> Matt: Web sockets?
>> Will Sentance: Yeah, sure, sockets.
>> Will Sentance: What other thing?

[00:01:09]
There are some really key, two really key ones, Dan, you got one? Can Javascript speak to the Internet? Can it make network requests over the Internet? No, JavaScript does not have the ability to speak to the Internet, that is not a feature inside JavaScript. So you know what, the browser does, though, the browser can make network requests.

[00:01:30]
The browser is this incredible app, that's full of all of these, it's a composite of a JavaScript engine that this bit, plus a ton of non-JavaScript features. One of which is the ability for it to make network requests, what other thing does JavaScript definitely not have?
>> Matt: Rendering.

[00:01:51]
>> Will Sentance: Yeah, rendering, exactly, is that in JavaScript? No, that's in the web browser, our HTML DOM, that is our model, our simplified version of what's on the page. That's our simplified version of what's on the page so that we can interact with it, so we can add stuff to that page.

[00:02:15]
Document Object Model, it's a model, a simplified version in an object style format of what's on the document, which is the visual of the page. Yeah, all these features we cannot code for directly, they're written in whatever the browser is written, in C++. Or whatever other languages, the browser is written in, do we write for these directly?

[00:02:39]
But people, we do have a programming language that lets us use these features. And that programming language is JavaScript, but we're not actually gonna find any of these features in JavaScript, so how do we interact with them? How do we interface with them? In JavaScript we get a bunch of what I call facade functions, and it's not catching on, I'll be clear.

[00:03:03]
This phrase is not catching on, a bunch of what's called, I call them facade functions, they are functions that look like they're JavaScript. But are actually fronts, facades, for web browser features and you know what? One of those web browser features believe it or not, JavaScript doesn't even have the feature of a timer that's in the web browser too.

[00:03:29]
And we get labels for each of these features, let's hope are perfectly aligned to the name, that'll be very nice, right? If they were perfectly aligned to the name instead, Kayla what do you think our label for timer would be?
>> Kayla: Timer?
>> Will Sentance: That makes sense, that would be a perfect name, but in reality, what label do we get in JavaScript in order to start a timer to delay a function Kayla?

[00:04:00]
>> Kayla: Set time out.
>> Will Sentance: Set time out, that's it, set time out is not doing anything of interest in JavaScript instead it's a label for the timer built to the web browser. Braden, what's our label for the HTML DOM, hopefully it's like DOM, right?
>> Braydon: That would be nice.

[00:04:18]
>> Will Sentance: That'd be nice, what is it instead?
>> Braydon: I don't know.
>> Will Sentance: Well, what label do we have in JavaScript whenever we wanna use a kind of collection of features of the web browser that allow us to display, and render, and display stuff on the page?
>> Peter: Document.

[00:04:31]
>> Will Sentance: Document, Peter's spot on. Exactly, Document, so whenever you see Document, that ain't doing anything in JavaScript. It's a command to go and use a feature of the web browser, that's kind of crazy. Todd, what do we have as our label for the feature of the web browser that lets us do network request speaking to the Internet?

[00:04:50]
Anyone know? Dan you know?
>> Dan: Is it get?
>> Will Sentance: Not quite, that's the one which we used to kind of, that was a wrapper for the feature.
>> Dan: TCP UDP.
>> Will Sentance: What did we have?
>> Dan: TCP UDP.
>> Will Sentance: Not directly.
>> Kayla: Fetch?
>> Will Sentance: Fetch, Kayla's spot on, that's our sort of newer name for it, but we used to have a different name for it, everyone remember?

[00:05:12]
>> Kayla: AJAX.
>> Will Sentance: No, it was something it was xhr, everyone remember xhr? Though, by the way, look how consistent our names are with the underlying feature, okay, console, this one's a little bit more reasonable, what's the label for console, Jeff?
>> Jeff: Console.
>> Will Sentance: Console, hold on Jeff, excellent, Jeff landed that perfectly, and we have other features here like local storage, IndexedDB, all of those.

[00:05:42]
So local storage's name is local storage, so they got better at it over time. They definitely got better at naming the JavaScript label for the web browser feature over time. But in the early days, I don't know these were not the smartest, whatever. Alright, so folk, that means a big part of what we're doing in JavaScript isn't even JavaScript at all.

[00:06:05]
Meaning I'm gonna need to expand my platform of JavaScript on here, taking it from being just those big three pieces in JavaScript. Being the big three pieces in JavaScript, plus, I'm gonna have everything below here be stuff that's happening in the web browser. I'm gonna do in blue, and when you see blue, it represents the web browser and not anything to do with JavaScript, okay folks, here we go.

[00:06:35]
It's a board wipe downtime, so turn to your partner, turn to your neighbor and start trying to navigate and verbalize what this code is doing. Give it a shot, we don't have the tools yet to do this, but given that we know set timeout, is gonna be a label for timer in the web browser.

[00:06:53]
Have a think what might be happening here, and have a think about how one might explain Braden. And Ethan's instincts around what the order of execution here might be, try and get ahead of it.