Hello, My Js Concho.

Hana.

Well, im Crystal Martin.

I am originally from Detroit.

Michigan.

I currently live.

Yeah.

Um I currently live in ST Louis working as a sales force developer.

X column consulting.

So I'm in this one of those office were all over the country all over the world.

And I am a proud cat Mom of two.

So I want to start with a story.

Once upon a time, there was a junior death that was given the task of integrating stripe payments with Salesforce using JavaScript and sells forces Java based proprietary language Apex.

Some of the questions that this to your dad asked what is an Asian tipping request?

What do you mean?

There is no Scheib library for Apex.

What is Ajax?

I thought this is what Ajax waas like.

None of this may any sense tinny.

Who's lost?

Um, and my use of confused parents here when slacking, my senior colleagues increased immensely.

He's my B f f s.

I am confused parents.

We are one.

You see, I was writing code on the proprietary sells for his frame recall lightning, which is basically Laura Framework and it utilizes a drag strip less for service calls.

And a lot of things are taking care of under the hood so much like any average in your dad does.

Once I got the hang of the pattern, I knew what I had to do.

I go, Okay.

I have to have a job script controller, and it calls helper functions.

And another jobs could control there.

And that is somehow cause my server called ticket Day.

That's my user.

Okay, great.

Why isn't this working?

And I kept saying my logic is correct.

The way in which I made the request was correct.

The logic I had to process the request was the response that I got was right.

But there was a fundamental misunderstanding I was having.

I was trying to act on data that I hadn't even gotten back yet.

And I was assuming things were happening in order.

I don't understand that at the time.

And when my colleague looked at what I was trying to do, he goes, it doesn't work that way.

And I go long and he says, because Java script is a synchronous what?

Okay.

Yeah.

Okay.

Javascript as a single.

What?

Like what does that mean?

I mean, I know what synchronous and a synchronous mean as words like Dictionary words, But like, I had no idea what this meant when it came to programming.

No idea.

And let me just stop here.

We're not gonna get into this.

Nerds, listen.

Yes, Javascript is a synchronous right.

I know that Josh isn't any synchronised language, but it has capabilities.

Allow it to have a synchronous behavior, but just roll with it.

You see, part of the problem here is how many self taught coders learn online.

We learned Java script like it always runs line by line, one thing at a time.

And we can talk to solve puzzles rather than solve problems with the tool they were using in the context of his intended use.

So sure, I need to know what what else?

What else is our?

And I need to know what four loops are, but they really discussed my job's Fritz is the way it iss.

What does it enable a developed to actually do so?

You know, starting out.

This isn't super appearance to a junior death.

We don't know about a synchronous nous until were dumped in the coding job in half the right job, desperate for I don't know the Web.

And then really, where my second like four loops and counter that needs account.

I lost.

So, you know, you're probably thinking, why should talking about all this?

But I want this talk to do two things.

One I wanted to be something that could be helpful for new deaths.

Understand Java script a bit better.

And to show an overview over different ways that you can do a secret its programming with Java script on and I want it.

I basically wrote this talk is I wanted to break it down for myself.

I was using something that I had no idea what was happening.

And two, I want mid career and senior developers in the room to remember that most of the time we don't get taught this stuff if you don't didn't get a C s degree or even if you did, and it's kind of confusing and it's possible you take your understanding of this for granted.

So my hope is that this talk will give you some intuition on, so how to help someone better understand this.

So let's get into it But before we can talk about what a synchronous means, let's talk about what sacredness means.

So essentially, it means that things happen in order, right synchronously one thing after another, step by step.

But sometimes you need to make a call out, request data from minute external system.

And because those things take time, they could hold a processing of other actions that are independent of that data that you need.

So if you wait for it to come back before you go on to the next step in a part of your process you're wasting precious resource is, and that could be used to do something else.

It's kind of like doing household chores.

Say you need to clean up your house and do laundry.

So usually I put a load of clothes in before I start cleaning to get that process going I don't know about.

And if you're doing tours in a totally synchronous way, this will require us to put our dirty clothes in the washer and then proceed to stand there for 30 minutes as a wash, rinse and spin before we can put them in the dryer for the next part of the process two hours later, you're still standing there.

The sun is going down.

In the meantime, I can't get anything else done.

I can't move on from the bathroom or load the dishwasher.

Which leads us to a conversation on asynchronous program.

So what is it?

It means things are happening at different times, not in sync, huh?

Process.

And the rest of the code doesn't stop if there's a process that requires time, so we just go along doing our own thing and in this case would be the rest of our chores.

And when there's an indication that are synchronised, process has completed will go on to the next step related to that.

See, you don't need thio.

You do have to await for your clothes to dry before you can follow them unless you're weird.

But you don't need to stand there and wait for them to get other shit done.

And why do we use jobs?

But for this well, Java script is written to deal with user user interactions in real time in the browser, so users don't use the Web and a synchronous way, which is something I would have like, kind of like to learn about.

You're interacting over a network connection, pulling data from external sources.

Wish just takes time.

Um, and JavaScript created Thio, actually, um, and sure seemed experiences for user's on the wet.

So let's continue our conversation about asynchronous program Java script with a fun example that will help you learn something new about two things.

Java script and the natural hair care process tracker Magic for you, Black History Month.

Okay, let's go.

So naturally have this little thing called Wash Day hash.

I hear yes and clear his name is a joke, but it isn't too far from the truth.

Yes.

Sometimes I need the holy Bible toe Hold me with this process.

Um, but it's not far away from what?

A lot of natural experience.

And generally I do this on a weekend day where I have some other chores as well, so I can kind of multi task.

So if you don't know about the natural heir process, okay, you're gonna learn spine.

Just roll with it.

So this is my do hair function and just you know, this the pseudo code it so don't get all judgy javascript developers.

But here's Here's my main process.

This is not do hair conscious.

I'm gonna walk you through it.

So first I have to do something.

Caught a pre poo treatment.

What is that?

Well, sometimes I have my hair and, like, protect the styles like this braids right?

Or I have a frozen.

It stays like that.

So I'm not calming my hair everyday.

So I have to put some conditioner in oil in my hair first and let it sit so my hair can get soft.

And then I could go on to d tangling right like soft.

And I could get those shed tears, I could tangle it, and then I'll go ahead and shampoo my hair, rinse that stuff out, and then I have to do condition because I have to, you know, put the moisture back in, let that sit for awhile, rinse it out, and then air dry air drying off takes time and the whole research I would turn my styled hair and this is what my Saturday Jimmy looks like.

So I had my choice here using my hair do laundry, clean litter boxes go in the kitchen in the bathroom.

So if I did this synchronously in order.

It would take a long time since.

Look at this.

This is what my day would look like, right?

I'd have I do here, um, function here and I have to go through all that before I actually got to Anything else in my do Charles function, and I'm gonna go into detail, so I get free treatment requires me to put conditional on my hair.

And do what?

Wait right.

So I have to let it sit before I go on to tangle.

So I'm waiting, and then I have another asynchronous process within Do here again, right?

I have to deep condition my hair.

Let us it wait.

And then I have to go ahead and do another asynchronous process, which is air drying my hair.

And I have to wait, and that takes even more time.

So looking at the do chores function again here I have three asynchronous processes, and it would take forever before I started doing anything else cleaning the lab, you know, clean the little boxes, doing laundry, any of that.

So there's got to be a better way to do this, right?

And there is Thanks.

JavaScript.

Let's do it a synchronously with go backs.

So what is a callback?

Callback is a function that is past as an argument to it, a secret dysfunction.

I eat a function it takes a while to complete some time.

It's called once the A sickness the site.

So it's called, once the asynchronous function complete.

So to give you a little example here, this is a callback function.

If I take a scared kitty to the vet, I need to comfort it when it comes back.

And so I have, in a secret dysfunction here, caught Take catch vet where the kid he gets his temperature taken, gets a shot and then has brought back home.

This is the air sickness function that takes a call back as an argument.

So as you see here, the callback function gets passed by reference to take cats.

Evette.

So the frightened kid he gets some TLC after visiting the big bad bet picture of Happy Kitty.

So let's look callbacks on the do hair function was reminded.

The process here we're gonna look at people treatments is our first asynchronous function, and it kicks off the do hair function.

So this is pre poo without a call back.

This is what I do here.

So the function, we just sit here while creep who was was finishing, right?

Um and this function would be considered a blocking operation.

You know, you can't go on and do anything else in the do hair function, but I also can't do anything else in my overall Taurus function.

Um, so I have to I'm gonna go ahead and rewrite this as a call back that way.

We don't get stuck here.

Nope, Sorry.

So I have I have it taking a call back.

Let's look at it.

So I have this function here is we've written is, ah, a function that takes a call back and we'll look at it in more detail from this point.

So here is my pre poo function declaration indicates that I am gonna have a function that takes a call back.

And so this was my people.

Treatment does right.

Most of the function does that put conditioning oil my hair and I wait.

And upon completion of the aforementioned process of putting the conditional in my hair, I will cause that time out, which is a method that will call a function which in this case, is our callback after a waiting period and now I'm gonna go ahead and actually call the people treatment.

But I'm going to go ahead and pass in my function, which in this case is an anonymous function that contains the rest of the natural hair process.

And I've abbreviated here, but you can see that just for clarity sake, that's what passed in now you can also in Stan she ate the callback function and said, equal toe a variable and passing my reference which will see this done both ways.

So this looks pretty good.

But you know what?

I need to add air handling.

You know, sometimes my hair just isn't quite soft enough yet, you know, put it in there, and it's still feeling kind of tough.

So if I started to tangling my curly, fragile strands, wouldn't that be good?

So I have to add some air handling hears.

This is not soft enough.

I'm gonna go ahead, not do anything right.

Otherwise, if it's okay, I'm gonna go ahead and go on to the next step of de tangling and shampooing.

Oh, what?

You know what else I have some other asynchronous processes in here, right?