[MUSIC]

So we're gonna talk about reaching asynchronous cloud nine in

JavaScript with generators,

which is basically a fancy way of saying we're gonna make JavaScript not suck.

The first one thing real quick.

I work for a company called Segment.io, and

if you want a really cool shirt like the one I have on, or

a really cool sticker like that, you can come grab one afterwards.

So asynchronous programming really sucks sometimes.

Sometimes it feels like juggling all these call backs,

feels a lot like this guy here trying to throw a boomerang.

You know, cuz you, you have to just pass values and

pass behaviors around, and you end up with just, you know, a small example.

You end up with code that looks like that and it's it's not fun to maintain at all.

I don't know about you guys, but

I get kinda irritated with it cuz when you go to change things,

you end up doing things like that when you try to re-factor your application.

And it's just it's a pain.

[BLANK_AUDIO]

And you're supposed to kinda, people say they're gonna fix it with promises but,

you know, we could see this application with promises.

It's just a pyramid of promises instead of callbacks.

And that kinda sucks too.

And, when you kinda put this all together, you're like doing this this,

this balancing act of all this coordination, right?

And it just seems like it's a lot harder than it has to be.

And I, I started finding myself frustrated, cuz you seem like you're,

instead of focusing on your business problem, that you're trying to solve,

you've now created this code problem.

And you're like spending all day trying to figure out what needs to be synchronise,

what needs to be sequential.

And now you're solving that problem instead of what you get paid to solve.

And that's just irritating.

And you end up just wanting to smash your keyboard against your computer.

So thankfully, there is a better way.

And that's with generators,

which is in the new what they call ECMAScript 6 addition to JavaScript.

Which is kinda the new features that are slowly being rolled out.

The ironic thing, is generators aren't really meant for

asynchronous programming at all.

And we're just gonna make them work anyways.

And there's a lot of framework's built around them and

everybody's kinda jumping on board.

Cuz they're there and we're gonna make it work, kinda like this kid with his toys.

So in a sense, they're not really meant for asynchronous control flow.

We're gonna kinda go over some of the basics of

how you can make them work to your advantage.

And then you'll kinda understand some of these new tools in the node

community at least.

That's kinda where I focus like co and coa and how they actually work, and

how you can kinda leverage those in the future.

[BLANK_AUDIO]

And by the way, if you have any questions.

If you can kinda just interrupt me.

So, no biggie.

I'm gonna kind of assume you have some JavaScript knowledge.

Most of this stuff, it can work with node or

in the browser, assuming it's a modern browser.

But we're gonna talk about some of the tools you can do to get around that.

[BLANK_AUDIO]

So, a generator.

The basic generator looks like your normal function,

except you have this little asterisk, asterisk at the top on the name and

then we have this new keyworld, keyword called yield.

And other than that they look the same.

Just have some new syntax.

When you invoke it, you can just assign it to a variable.

And then you have this new method called next.

[BLANK_AUDIO]

And as you call next you get values back.

And it's an object with a value property and a done property.

And the value property is gonna be whatever you yield.

So in this example, we yield three times so as we run it,

we get one, two, three and then the last one is undefined.

However you'll notice done is true now.

So if you've ever used iterators before in

another language it's actually built on top of iterators.

It's just kind of, there's some magic going on behind the scene where yield and

next, are able to coordinate iteration.

So not only can you send values back, you can also send values into the generator.

So here same exact thing except now we're yielding and

then we're getting a value back from yields.

So basically, what we see here is,

when you first create the generator, the very first time,

you call it next, you, you wake up the generator out of its suspended state.

Cuz when you first create it, nothing happens.

So if we didn't call it dot next on that first line or below you have no output.

However, the first time we call it we'll get here and

then we'll get that value done and one, and then it would stop.

But since we call it again,

we get the value a received back out of the yield, cuz it basically freezes.

Up to right after the yield and it goes back into

suspended state.

[INAUDIBLE]

No, because your first iteration's going to take it up to the yield and then right

before the assignment happens, it's going to go back and this has been its state.

And that next call, it's going to take the value that you're passing in next, and

it's going to have it and it's going to go to the next yield stop.

And then the next one.

>> So that's just [INAUDIBLE] >> Yes, yeah, yeah.

>> [INAUDIBLE] >> And

we're gonna go over the ascending values pretty quick cuz as we get into

the asynchronous programming,

there's not a whole lot that we're gonna do with it for our example.

So what the third really interesting thing with

generators is it also has a throw method on the generator.

And you can throw an error inside of the generator.

So in this example we're gonna iterate up to the first time.

And then we're gonna throw an error and you can see here

that we got our first iteration now, but then we get an exception thrown.

And you'll have to trust me because I don't want to go back and forth

between the code editor, but stack trace actually lines up to where the yield was.

Which is pretty nice, cause then we can actually put a try catch

inside of our generator, and we can try and yield something and if something thr,

uses our generator throw we can actually catch what they're throwing.

Mean, you have to put that in the back of your mind.

For now 'till we get back to how we can use that for asynchronous programming.

What you're probably wondering by now, you know, WTF,

what does this have to do with asynchronous programming?

You're talking about iteration and generators.

however, if we look back at some of the basics of asynchronous programming and

then kind of JavaScript.

We'll be able to draw some pretty close parallels.

And if you understand those basics,

then you can apply generators without a problem.

So here, we have kind of a simple problem, just three functions.

That just do kind of a set timeout and logging.

I didn't want to go complicated with, databases and

all that, so, just a simple problem.

But then in the bottom here we're just gonna call them in row.

One, two, three, console log.

And does anybody wanna guess what the output of that's gonna be?

Yes, so it's not in order right?

Cuz it's asynchronous.

Yeah it was a, sorry if you couldn't hear, it was done two, three, one.

So, and that's because everything's asynchronous so

in order to have sequential order what do we use in JavaScript to,

be able to call something and then call the next thing the next thing right?

You have to use callbacks or promises or, you know, some variation.

So we go back to our three functions.

And we have to add a callback to each of em.

And it's all pretty simple.

You just gotta pass in the function as a value and then we'll just invoke it.

And then a horrible way to use it, would just be, you nest it, and that's how

end up with the whole call [INAUDIBLE] stuff.

We just call each one, and then we pass the, a callback function,

which'll call the next one and the next one and the next one.

Which is kind of probably the way you wrote code the very first time you

tried to write an asynchronous app.

But then, there's tricks to make that not so nested and

crazy and these are the tricks that some of the libraries like async use but

they handle a lot more cases.

Cuz what we wanna do is basically take three functions and

run them in a row, right?

And now that we've added a call-back,

we can just have a utility function that can do that for us.

So, if we skip the top function but look how we're gonna use it.

We just have this run function and

we're gonna pass it, this array of three functions?

And what that utility is gonna do is call those in order, and

it's gonna have this internal next function that just

recursively calls the next one until there's no more functions left.

And when there's no more left it just calls our done function for us so

we can do something afterwards.

Pretty straightforward, right, make sense?

So if you're kinda thinking, like wow, this whole iteration until you're done,

that kinda sounds similar to what you, we just talked about with generators.

And if you thought that before I said it, you're awesome.

If not, we'll get there.

And we'll talk about how we can make it work.

So, we can just change our

run function to, utilize what we just learned about generators, and

apply the very similar concept but instead just,

instead of popping off functions from the stack, just call generator.next.

And we just learn with the next,

it just takes, the value that gets sent back from yield.

Now, with yield, you can yield anything.

So what we're gonna do is we're gonna yield functions, and then our utility

function's gonna grab that function that's been yielded to it and call it.

And then do that same recursive trick,

where it just passes itself, to that callback.

[BLANK_AUDIO]

And then soon as it's done, we'll just call the done function.

Or just return, actually cuz we don't have to call [UNKNOWN]

[BLANK_AUDIO]

So, again. If you're thinking you can yield anything,

you're correct.

We can yield, other generators.

We can yield objects or arrays.

We can really yield anything I think, except for an undefined value.

[BLANK_AUDIO]

So, doing that's a little more complicated.

So we're actually not going to write that in our done function.

There is libraries that are built by really smart people that have done that.

And one is called co.

Which does basically, what we just did.

and, here's an example of it being used so this is node by the way so, it's

a node module, so you just require it, and you pass in your generator function.

And it will run it for you.

And figure out all the yields.

And do the sequential or

parallel processing based on the values you give it.

but, and this is a simple example.

Rather than our callback one, two, three, we're actually, wrote those as generators.

And we passed the generator to yield.

And co-resolves that for us.

So in the first one after it's created we do the yield sleep.

Well what sleep does, is it just returns a function that accepts a function.

That after set, a certain set time out it continues.

Inco will traverse that and then once it's done will move on to the next one.

And just does the whole next iterator dependency tree all

the way down until there's nothing to next.

So we'll look at some

more kinda more advanced examples of what you can do with it on their on their site.

But before I forget.

Other tooling so all these can be used in node 11 or above.

I think it's node 11 3.

But the current version is 11 13 which it says unstable, but

we use it in production and it works great.

And you have to pass this harmony flag to it since that's part of the es 6 and

that's how you turn it on.

And the latest version of Chrome has em.

And the latest version of Firefox.

And then if you need to work with older browsers,

there's this really neat tool called Regenerator.

And I just spelled generator.

Sorry I misspelled that.

But Facebook built this tool that basically will compile your generators,

using it's a node module called [INAUDIBLE].

So it takes the syntax tree of the generators and

then rewrites it as callback functions, and then just dumps it out.

So you can compile a really nice-looking app for all the browsers.

But along the lines of tooling.

[BLANK_AUDIO]

Where's the object example.

Down here.

[BLANK_AUDIO]

Yeah, so you can yield objects or erase.

And code will traverse the object and inspect every property.

And call those for you.

So, if you just want to create like an instance of a,

you know, a class in JavaScript.

And just have all your methods that you want to be called.

It will figure that out for you.

And a raise will be iterated in parallel, so

if you have like an array of a bunch of requests you want to make,

you can just yield that array of all the outgrown requests, and

it resolve each one and after the last one is done, it will continue on.

[BLANK_AUDIO]

Get back into presentation right.

All right. [BLANK_AUDIO]

So, any questions?

I kind of flew through that really quick, quicker than I thought I would, so.

Go for it.