Placeholder Image

Subtitles section Play video

  • Okay.

  • 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?

  • I have to tangle and shampoo, which happened back to back.

  • But the conditioning takes time, right?

  • I had to wait for that one to let have let it sit.

  • And you know what?

  • Her giant takes time too.

  • So now I have a function that takes callbacks with functions to take callbacks.

  • And this is what the douceur function ends up looking like right now.

  • Partially, this is great, because I have this asynchronous behavior, right that allows me to go on to continue doing other things.

  • Why, you know, wait for my hair to be done.

  • But this Triscuit part to read, write.

  • And what if there was another fellow like national news of the wanted to embrace her curls Of all my process?

  • This would get really, really confusing to look at.

  • And this is what developers call call back hell.

  • It's kind of confusing to figure out what's happening here.

  • You know, it makes tracking down books difficult.

  • And what if I added more asynchronous processes?

  • Yeah, Believe it or not, I'm going great at the age of 31.

  • So sometimes I have to put color in my hair and let that shit sit right, you know?

  • And then sometimes I have to like, I have to do a clarify and treat because I have to put some stuff in my hair.

  • Says another asynchronous function or process it.

  • I have to put in this do hair function like this would get confusing after a while.

  • So this functionality is great, but the readability is not so great.

  • But there is a way you can rewrite a synchronous Cole so that it looks more synchronous, making it easier to follow.

  • And that could be done by using promises.

  • Ah, promises so useful yet so difficult to understand what you're starting out.

  • But I'm gonna try to break it down so well with me.

  • So what is a promise?

  • A promise is a javascript object.

  • It will produce a value at some point in the future.

  • Promises basically promise that I'll let you know what happened.

  • I either it was Scofield rejected are pending, and it allows you to act on other your results with other methods.

  • And then I have a promise object here, and this has to internal state in result properties and to method properties resolve emerging, which will call.

  • We'll talk about in a minute, and then I have dot then and dot catch which our handlers for the asynchronous Cole's results.

  • So it waits for a super his coat to complete to then go on to the next process and dot then takes two methods as arguments one.

  • The first function is what happens when everything goes well and the other ones.

  • But let's get caused.

  • This doesn't go well, and that catch handles Ares.

  • So let's look at the president and anatomy with its promise.

  • So here I haven't pizza promise.

  • I'm sure you'd all like to have a promise.

  • Um, Valentine's Day is coming up.

  • Its promises, the promises object of promise objects.

  • Constructor has a function that takes the resolve and reject methods as parameters.

  • And then there's an executing Cole that will return some kind of result.

  • And so, in this case, it's big pizza, right?

  • So we have big pizza that's are executing close gonna do something and you know what baked pizza returns.

  • We'll either reject a resolve.

  • This promise.

  • So here, if there's an error and say the pizza got burnt, I'm gonna go ahead and reject with pizza era of our pizza.

  • Otherwise everything's great.

  • This pizza's perfect.

  • I'm gonna resolve with perfect pizza.

  • And so now I can look at this and I'm gonna go ahead.

  • And now I have awful pizza promise here, and I'm gonna go ahead and call it or call its promise with that then and again.

  • My first function And there is what's gonna happen if everything goes well.

  • So if I have a perfect pizza, I'm gonna go ahead and eat that pizza Or if it's burnt trash, I'm gonna go ahead and throw away that pizza practices so we can rewrite pre pool the function people ask a function that returns a promise, and this enables us to go ahead and call the things on it.

  • So here I have people treat equal thio function anonymous function takes here, returns a promise.

  • If everything's okay, everything goes wrong.

  • I'm gonna go ahead and reject with an era that's our ticket.

  • But I can't do anything to it.

  • Otherwise, it's okay.

  • I'm gonna go ahead and detail it, shampoo it and the resolve this promise with shampooed here so I can go onto the next step and no I could have do hair return a promise.

  • And this allows us to change our promises with dot thins Upon completion of an asynchronous functions processing, we can go on to the next step that returns a promise, which means that we can do another death in and complete another step in the process and also notice that that has come after the return of an asynchronous function.

  • So this awesome meeting, you can handle errors in one place which allows us to remove all those else's.

  • We had our callback fail and clear our back hold with that dot catch doing here, then dot then go out in town.

  • And here's a side by side comparison.

  • And so now it was much easier to read, you know, no more Pyramid of Doom.

  • Just a secret is Cole that res synchronously.

  • But this could be improved even more with, I think a Wait.

  • Oh, no.

  • So this is kind of cool.

  • If you put the ace think you were in front of a function, it automatically makes it a function that returns.

  • I promise.

  • On def, executing Colt returns a non promise value.

  • It'll just wrap it in a promise and await mixed Js.

  • Wait until the promise is settled and then returns.

  • A result in this only works with a sink functions affected with that key word.

  • Just this kind we're here like this is a newer feature of JavaScript, so you might have to figure out how to make a compelling browses and all that stuff.

  • But it is a whole new way to handle asynchronous behavior.

  • And so now I can go ahead and rewrite my do hair function within a sink in front.

  • And then wherever I have a new secret this process, I just putting the weight there.

  • The function weights and it allows me to go on to other things.

  • In my chart charged Detroit's function.

  • And so, looking at this, you can see all three approaches here.

  • Now, these are all correct ways for handling a synchronous behavior.

  • But as you can see, it gets progressively easier to see what is happening in the coat.

  • Well, look at this.

  • Well, some nice and easy to follow.

  • Some of the didn't know Java script could probably guess what's happening here.

  • So not might do.

  • Hair function is written with a single weight.

  • I can go ahead and call do chores and everything works.

  • Maybe expected.

  • We can start my hair, go to something else, come back to another sub to something else, come back to another step.

  • And now I have officially officially finished My, um my chores and my hair is time.

  • And I could go on alone and herded.

  • And, uh, not only do you no know howto slay natural hair, which is also display a secret.

  • His program with jobs For what?

  • So in closing, I just want to say being a junior Deb is no joke.

  • It is not for the faint of heart.

  • And if you're feeling like a dummy, it's okay, you're you're dummy, and it's always everyone else she worked with.

  • But seriously, all jokes aside, this is what it's exciting about being and programming, right?

  • Like everyone is trying to just figure things out.

  • We don't always have the answers.

  • We're always learning every day.

  • And if you're a singer, death training, a team, or someone that's new to development, maybe nontraditional back, background like myself, I was an education and not practice before I came to tech again.

  • Just know this stuff isn't always a parent trying to remember where you were here when you were here.

  • Have some empathy, you know, and share your knowledge.

  • You know what they say?

  • Those who can teach and those who can't just sit in a corner and called by themselves.

  • And if you create tech training materials, think about how you can represent all the diverse people in this field that make up tech.

  • Originally, I was gonna write this whole top of laundry as my main example.

  • That shit is boring.

  • And I started having flashbacks to my days watching online tutorials, looking as stupid as examples about torpedoes and like, constant cattle for real.

  • Some of y'all know what class I'm talking about.

  • Um, and it was just so irritating to me that there were no examples.

  • I none of the materials were anything like anything that I had personally experienced and frankly, sometimes just made it hard for me to understand the content that I was supposed to be learning.

  • So it's important to me that everyone sees themselves in this field no matter who you are, it makes a difference.

  • And I always liked Thio gives shout out to my inspiration.

  • So I always lose when I do a talk.

  • These are the people who help me shake this idea who inspired it.

  • Hold, Give me feedback.

  • So the people on this slide, I'm our friends, my coworkers.

  • My boyfriend's up here to, um And I also want us to do a special shout out to Amy because she is actually, like, inspired this talks.

  • I did a Z workshop with her at a conference call, right?

  • Speak code.

  • Which?

  • Yeah.

  • Where?

  • My girls at NBC.

  • Yeah, Um, that is this conference focuses on getting women and on ordinary people, writing and speaking in tech.

  • And it works.

  • You should sponsor it.

  • Um, and I do this because he will think that people think that, like people who do conference talks is coming with amazing ideas on their own.

  • And just like brutal India's falling from the sky.

  • And that just is not the truth for me.

  • My brilliant ideas are always a combination of the awesome, brilliant people around who I draw inspiration from.

  • So if you're thinking about doing a conference talk, just know that you have a community of support that you can tap into.

  • It takes a village and we have your bet.

  • Thank you.

Okay.

Subtitles and vocabulary

Click the word to look it up Click the word to find further inforamtion about it