Promises Introduction

[00:00:00]
>> Will Sentance: So we are now going to move onto what changed in the ES2015 and on world. The ES6 world. So until then, what we saw here before. This model, remember that beautiful model here we had? That was pretty much it. And then along came promises, and everything got a little bit different.

[00:00:21]
The premise for it is this. If I were to try and sum it up, the premise would be this. When I had this model here, when I used setTimeout. Did setTimeout do anything in JavaScript? No, where was its consequence, Kayla?
>> Kayla: In the web browser.
>> Will Sentance: In the web browser, spot-on.

[00:00:39]
But once I've set up the timer in the web browser, keeping track of the fact that I've started it, or other background features? I didn't really get any way of tracking that back in JavaScript, right? In JavaScript, I kinda just threw them out. Now, I can console.log state In JavaScript data and JavaScript using my console.

[00:00:58]
But I can't go and visualize all the stuff that was down here. There's no like console visualize it for the web browser, which is that is a little bit old, right? That half of what you're doing obviously more than half what you do in JavaScript is happening down here.

[00:01:11]
And I'm getting kind of no tracking of it can no maintaining of consistency between the state, the data I see up here in my memory and the stuff that's happening down here. There's no kind of way of mapping what I'm doing down here in the web browser with what's going on up here in JavaScript.

[00:01:30]
That's in terms of developer reasoning and thinking about what we're doing as we go and sort of maintaining the application scale that isn't that ideal I would say. And I would put promises as the absolute one of the most valuable pieces they offer, they have all the benefits as well, is a desire to say, when you trigger something in the background, don't just throw it out there.

[00:01:56]
But have it have some sort of consequence in JavaScript memory as well. So, that I have a consistency between things going on in background is gonna have some consequence back in Java at some point. And I'm somehow keeping track of that within JavaScript memory as well. So with ES6, we introduced what I'm gonna call two-pronged facade functions.

[00:02:19]
They did not just, let's remember our web browser, what's in it. We had our JavaScript engine, we had our JS, our JavaScript engine, and then we also had a ton of browser features, one of which was speaking to the Internet the network request. And that its label. We have an old school label, that by the way worked in the same way as set timeout.

[00:02:50]
Took a function, threw it down into the web browser, set up a timer with the old school style. We have a new school style of setting up the browser feature speak to the Internet, speak to Twitter, whatever it might be. Send a request for more data over the Internet.

[00:03:06]
And the label for it in JavaScript is fetch. But there's a new star way of doing it. It's one I'm gonna call it two-pronged facade function. It does set up a network request in the web browser features, I keep doing that. In the web browser features, it does set up a network request down here.

[00:03:30]
But rather than just doing that and then nothing, no way of knowing this being done in JavaScript from then on, it's gonna have a consequence immediately in JavaScript as well. This fetch label is gonna trigger speaking to the Internet down here. Sending a network request, speaking to the internet, asking for data from Twitter down here.

[00:03:51]
And simultaneously it's going to also in JavaScript, in the JavaScript land return out a special kind of object called a promise object. That's going to sit in memory. And when the background work is done here, that's going to fill in and update that object's data with the data from the background.

[00:04:15]
And now when we finish our background work, we are not surprised that something's gonna have a result back in JavaScript because we had a two pronged facade function. It had consequences out here, one prong. But it had another consequence immediately in JavaScript. A little sort of placeholder object that's gonna allow us to keep track in JavaScript in our local memory or in our global memory there of the stuff we triggered off down here in the web browser.

[00:04:42]
So now we kinda have these two mapped together and they're intimately linked. The background feature when it completes is going to have consequences for that immediately returned down JavaScript object. We're gonna see it play through here, but take a look at it, two pronged facade functions that both initiate background web browser works being the Internet and return a place holder object.

[00:05:04]
It's just a charge of object but a special type of one with a promise immediately in JavaScript land. So that we have a way of making sure we know what's going on down here because we've kept it up to date up here. Really interesting, is very interesting concept.

[00:05:21]
So here we go. We're gonna see it play out here. Save a function display, which hopefully is gonna be run with the data that comes back from Twitter as input, then we're going to have his label future data. And then on the right hand side there, the five letter word that is the most powerful in JavaScript.

[00:05:42]
It is profoundly complex what those five letters do. They are going to set out speaking to the Internet. That five letter word literally speaks to the Internet down here from the web browser. Not in JavaScript, JavaScript can't do it, but the web browser can. That is how powerful that five letter word is.

[00:05:59]
It's using a myriad of technologies to go and get data from the other side of the world Adrian, JavaScript. JavaScript does not have that feature, believe me. But the web browser has a whole myriad of remarkable technologies that get all that work started. But it also simultaneously in JavaScript returns out a little object, that's gonna be called a promise object, that is just a regular JavaScript object.

[00:06:23]
But has some little bonus features on it a little bonus properties two we're gonna see them and how they play out in a moment.