okay Aloha my J is Koko Hana well I'm
crystal Martin I am originally from
Detroit Michigan I currently live yeah
right Marvin
I currently live in st. Louis working as
a Salesforce developer X while I'm
consulting so Ivan this Lee Louis office
we're 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 deaf that was
given the task of integrating stripe
payments with Salesforce using
javascript and sells horses Java based
proprietary language apex some of the
questions that mr. your dad asks what is
an HTTP request what do you mean there
is no stripe library for apex what is
Ajax I thought this is what Ajax was
like none of this made any sense to me I
was lost and my use of confused parrot
here when slacking my senior colleagues
increased immensely he's my BFF I am
confused parent we are one you see I was
writing code on the proprietary
Salesforce framework caught lightning
which is based on the aura framework and
it utilizes Ajax requests for server
calls and a lot of things are taken care
of under the hood so much like any other
junior dev does once I got the hang of
the pattern I knew what I had to do I go
okay I have to have a Java Script
controller and it calls helper functions
and another jobs could control there and
then it somehow calls my server call to
get David so sure my user okay great
why is he 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 got
back yet and I was assuming things were
happening in order but I don't
understand it 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 wah and he says because javascript
is asynchronous
what okay yeah okay
javascript is a secret what like what
does that mean I mean I know what
synchronous and asynchronous mean as
words like dictionary words but like I
had no idea but this meant when it came
to programming no idea now let me just
stop here we're not gonna get into this
nerds
listen yes javascript is asynchronous
right I know the JavaScript isn't any
synchronous language but it has
capabilities that allow it to to have
asynchronous behavior but just roll with
it oh okay
you see part of the problem here is how
many self-taught coders learn online we
learn JavaScript like it always runs
line by line one thing at a time and we
get taught to solve puzzles rather than
solve problems with the tool that we're
using in the context of its intended use
so sure I need to know what else what if
else's are and I need to know what for
loops are but they really discuss why
javascript is the way it is what does it
enable a developer to actually do so you
know starting out this isn't super
apparent to a junior devs we don't know
about asynchronous Nissen till we're
dumped in a coding job and have to write
JavaScript for I don't know the web and
then we're like where am I like
for loops and count that I need to count
like I've lost so you know you're
probably thinking why you're talking
about all this but I want this talk to
do two things one I want it to be
something that can be helpful for new
depths to understand JavaScript a bit
better and to show an overview over
different ways that you can do
asynchronous programming with JavaScript
and I want it I basically wrote this
talk because I wanted to break it down
for myself I was using something that I
had no idea what was happening in to our
mid-career and senior developers and the
to remember that most of the time we
don't get topless stuff if you don't
didn't get a siesta career 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 onto
how to help someone better understand
this so let's get into it but before we
can talk about what asynchronous means
let's talk about what synchronous 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 to
request data from an external system and
because those things take time
it can hold up 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 your part of your process
you're wasting precious resources and
that can't 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 you and if you're doing chores in
a totally synchronous way this will
require us to put our dirty clothes in
the washer and then proceed to stand
there for thirty minutes as they 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 and in the
meantime I can't get anything else done
I can't move on to clean the bathroom or
load the dishwasher which leads us to a
conversation on asynchronous programming
so what is it it means things are
happening at different times not in sync
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 if you the rest
of our chores and when there's an
indication that our sequence process has
completed we'll go on to the next step
relate it to that so you don't need to
you do have to wait for your clothes to
dry before you can fold them unless
you're weird but you don't need to stand
there and wait for them to get other
done and why don't we use
JavaScript for this well JavaScript was
written to deal with user and user
interactions in real time in the browser
so users don't use the web in a
synchronous way which is something I
would have liked kind of like to learn
about your interacting over a network
connection pulling data from external
sources which just takes time and
JavaScript was created to actually
ensure seamless experiences for users on
the web so let's continue our
conversation about asynchronous
programming with JavaScript with a fun
example that will help you learn
something new about two things
javascript and the natural haircare
process
black robe magic for you and Black
History Month okay let's go so Naturals
had this little thing called wash day
hashtag wash man hear you I hear you yes
and so clearly does meme is a joke but
it isn't too far from the truth yes
sometimes I need the Holy Bible to help
me with this process but it's not far
away from what a lot of naturals
experience and generally I do this on a
weekend day where I have some other
chores as well so I can kind of
multitask so if you don't know about the
natural hair process okay you're gonna
learn it's fine just roll with it so
this is my do hair function and just you
know this stuff is pseudocode it so
don't get all judgy JavaScript
developers but here's here's my main
process this is not do hair functions
I'm gonna walk you through it so first I
have to do something called a pre-poo
treatment what is that
poof well sometimes I have my hair and
like protective styles like this braids
right or I have afro and it stays like
that so I'm not calming my hair every
day so I have to put some conditioner
and oil in my hair first and let it fit
so my hair can get soft and then I can
go on to detangling right cuz I get
softer and I can get those shed hair and
I can detangle it and then I'll go ahead
and shampoo my hair rinse that stuff out
and then I have to do conditioner
because I have to you know put the
moisture back in let that sit for a
while rinse it out and then air dry it
air drying also takes time and then I'll
restart I would turn my styled hair and
this is what my Saturday generally looks
like so I have my chores here I usually
do my hair do laundry clean litter boxes
clean the kitchen clean the bathroom so
if I did this synchronously in order it
would take a long time look at this this
is what my day would look like right I'd
have my do here function here and I'd
have to go through all that before I
actually got to anything else in my do
chores function and I'm gonna go into
detail so again pre-poo treatment
requires me to put conditioner oil on my
hair and do what wait right so I have to
let it sit before I go on to detangle so
I'm waiting and then I have another
asynchronous process and then do here
again right I have to deep condition my
hair let it sit wait and then I have to
go ahead and do another you synchronous
process which is air drying my hair and
I have to wait and it 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 lot you know clean the
litter 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 asynchronously
with callbacks so what is a car back a
callback is a function that is passed as
an argument to an asynchronous function
ie a function it takes a while to
complete some time and it's called once
the asynchronous side takes it's called
sir it's called once the ace even is
function completes
so to give you a little example here
this is
that function if I take a scared Kitty
to the vet I need to comfort it when it
comes back and so I have an asynchronous
function here called take cat to vet
where the kitty gets his temperature
taken gets a shot and then it's brought
back home this is the asynchronous
function that takes a call back as an
argument so as you see here the call
back function gets passed by reference
to take cat to vet so the front and
Kitty get some TLC after visiting the
big bag vet Viktor happy kitty
so let's look all bags and the do hare
function so to remind you the process
here we're going to look at pre food
treatments this is our first
asynchronous function and it kicks off
the do hair function so this is pre-poo
without a callback this is what I do
here so the function would just sit here
while pre-poo was was finishing right
and this function will 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 chores function so I
have to I'm going to go ahead and
rewrite this as a callback that way we
don't get stuck here I'm sorry so I have
I have it
taking the callback let's look at it so
sorry I have this function here as we've
written as a function that takes a
callback and we'll look at it in more
detail from this point so here is my
pre-poo function declaration it
indicates that I am going to have a
function that takes a callback and so
this was my pre food treatment does
right misses the function does I put
conditioner oil my hair and I wait and I
come upon completion of the
aforementioned process of putting the
conditioner oil in my hair I will cause
that timeout which is a method that will
call a function which in this case is
our call back after a waiting period and
now I'm going to 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
process and I've abbreviated it here but
you can see that just for clarity's sake
that's what we passed in now you can
also instantiate the callback function
and set it equal to a variable and
pacify reference but you'll see this
done both ways so this looks pretty good
but you know what I need to add error
handling you know sometimes my hair just
isn't quite soft enough yet you know I
put it in there - still flunk out of
tough so if I started detangling my
curly fragile strands it would not be
good so I have to add some arrogantly
here so it's not soft enough I'm gonna
go ahead and not do anything right
otherwise if it's okay I'm going to go
ahead and go on to the next step of
detangling and shampooing oh but you
know what else I have some other
asynchronous processes in here right I
have to dis Hangul and shampoo which
happened back-to-back but deep
conditioning takes time right I have to
wait for that one to let have to let it
sit and you know what I heard Ryan takes
time too so now I have a function that
takes callbacks with functions that take
callbacks and this is what the doTERRA
function ends up looking like right now
partially this is great because I have
this asynchronous behavior right that
allows me to go on and continue doing
other things while I you know wait for
my hair to be done but this target part
to read right and what if there was
another fellow like natural these
wouldn't want to embrace our curls and
follow my process this will get really
really confusing to look at and this is
what developers call callback hell it's
kind of confusing to figure out what's
happening here you know it makes
tracking down bugs difficult and what if
I added more asynchronous processes
y'all believe it or not I'm going gray
at the age of 31 so sometimes I have to
put color in my hair and let that
sit right you know and then sometimes I
have to like I have to do a clarifying
tree because I have to put some of the
stuff in my hair so that's another
asynchronous function or process that I
would 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
asynchronous code
so that it looks some more synchronous
making it easier to follow and that can
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 sorrell with me so
what is a promise a promise is a
JavaScript object that will produce a
value at some point in the future
promises basically promise that they'll
let you know what happened right either
it was fulfilled reject it or 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
two internal state and result properties
and two method properties resolve and
reject which will call about a minute
and then I have dot VIN and dot catch
which are handlers for the asynchronous
calls result so it waits for a Stephan
is code 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 one is what's
good cause when this doesn't go well and
that catch handles errors so let's look
at the process and anatomy with a pizza
promise so here I have a pizza promise
I'm sure you'd all like to have a pizza
promise Valentine's Day is coming up
these Frances the so the promises object
of promise object constructor has a
function that takes the resolve and
reject methods as parameters and then
there's an executing cold that will
return some kind of result and so in
this case it's big pizza right so we
have big pizza that's our executing
close gonna do something and you know
what baked pizza returns will either
reject or 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 sabar pizza otherwise
everything's great this pizza is perfect
I'm gonna resolve with the perfect pizza
and so now
I can look at this and I'm going to go
ahead and now I have a flow piece of
promise here and I'm gonna go ahead and
call it or call it kids promise with
that then and again my first function in
there is what's going to happen
everything goes well so if I have a
perfect pizza I'm gonna go ahead and eat
that pizza or if it's burnt it's trash
I'm gonna go ahead and throw away that
pizza promises so we can rewrite pre-poo
the function paper as a function that
returns a promise and this enables us to
go ahead and call other things on it so
here I have pre pretreatment equal to a
function of anonymous function takes
here it returns a promise if
everything's okay I'm sorry everything
goes wrong I'm gonna go ahead and reject
with an error huh that's awesome I can't
drive into it otherwise it's okay I'm
gonna go ahead and detangle it Shampoo
it and then resolve this promise with
shampooed hair so I can go on to the
next step and know I could have do hair
return a promise and this allows us to
change our promises with dot bins a
point 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 that then
and complete another step in the process
and also notice that that things come
after the return of an asynchronous
function so this also means that we can
handle errors in one place
which allows us to remove all those it
else as we had in our callback channel
and clean up our code with that dot
catch hair then dot then go out on the
town oh and here's a side-by-side
comparison
and so now it's much easier to read you
know no more pyramid of do whom just say
synchronous Kol their reads
synchronously but this can be improved
even more with a sync awaked oh my god
so this is kind of cool if you put the
async keyword in front of a function it
automatically makes it a function that
returns a promise
and if executing code returns a non
promise value it'll just wrap it in a
promise and a wait mix jeaious wait
until the promise is settled and then
returns the result and this only works
with async function so faction but that
keyword just the disclaimer here like
this is a newer feature of JavaScript so
you might have to figure out how to make
it compatible browsers and all that
stuff but it is a cool new way to handle
asynchronous behavior and so now I can
go ahead and rewrite my do here function
with an async in front and then wherever
I have an asynchronous process I just
put in a weight there the function Waits
and it allows me to go onto other things
in my chore chart Detroit's function and
so looking at this you can see all three
approaches here now these are all
correct ways for handling asynchronous
behavior but as you can see it gets
progressively easier to see what is
happening in the code look at this looks
so nice and easy to follow someone that
didn't know JavaScript could probably
guess what's happening here so now I
might do here function is rewritten with
async await I can go ahead and call the
chores and everything works - maybe
expensive we can start my hair go do
something else come back to another step
to something else come back to another
step and now I have officially
officially finished my arm my chores and
my hair and not only do you know now how
to slay natural hair but you can also
display a sleeping this program with
JavaScript real watch so in closing I
just want to say being a junior dev is
no joke it is not for the faint of heart
and if you're feeling like a dummy it's
okay you're a you were dummy and if so
is everyone else you work 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 everyday and if you're a
senior dev training a team or someone
that's new to development may be
non-traditional background like myself I
was in education and non practice before
I came to tech again just know this
stuff isn't always apparent try 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 the corner and call 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 talk with
laundry as my main example that is
boring and I started having flashbacks
to my days watching online tutorials
looking at stupid ass examples about
torpedoes and like counting cattle for
real some of y'all know what class I'm
talking about and it was just so
irritating to me that there were no
examples like none of the materials were
anything like anything that I had
personally experienced and frankly
sometimes it 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 like to give shout outs to my
inspiration so I always just when I do a
talk these are the people who helped me
shape this idea who inspired it how give
me feedback so the people on this slide
are my friends my co-workers my
boyfriend's up here too
and I also want to do a special
shout-out to Amy because she is actually
like inspired this talks I did a zine
workshop with her at a conference caught
right speed code which yeah where
my girls it can be that yeah this
conference focuses on getting women and
I'm binary people writing and speaking
and tech and it works oh yeah you should
sponsor it and I do this because people
think that people think that like people
who do conference talks has come up with
like amazing ideas on their own and just
like brilliant ideas falling from the
sky and
is not the truth for me my brilliant
ideas are always a combination of the
awesome brilliant people around me who I
draw inspiration from so if you're
thinking about doing a conference talk
just know that you have a community of
support then you can tap into it takes a
village and we have your back thank you
[Applause]