Asynchronous java script

ASYNCHRONOUS
JAVASCRIPT

GET STUFF DONE BY KNOWING WHEN STUFF IS DONE.

WANT TO HEAR A JAVASCRIPT JOKE?

CALLBACK LATER AND
I'LL TELL IT TO YA!

CALLBACKS ARE HOW JAVASCRIPT MANAGES THINGS THAT
NEED TO HAPPEN IN THE FUTURE
fnto dlvrucln( {
ucin eiePnhie)
cnoelg"eas te tk tig ltrly";
osl.o(Bcue hy ae hns ieal.)
}
fnto stpoe){
ucin eUJk(
cnoelg"h dntketmnaslk pn?)
osl.o(Wy o' lpoaic ie us";
stieu(eiePnhie 20)
eTmotdlvrucln, 00;
}
stpoe)
eUJk(;

EVENT PUMP
setUpJoke
deliverPunchline (after 2000 ms)

EXECUTION THREAD
setUpJoke
deliverPunchline

WHAT HAPPENS IF THE EXECUTION THREAD IS BUSY?
fnto dlvrucln( {
ucin eiePnhie)
cnoelg"eas svnhssm bds ttos";
osl.o(Bcue ee a oe aas ato.)
}
fnto cnrvdxml( {
ucin otieEape)
cnoelg"h i sxari o svn";
osl.o(Wy s i fad f ee?)
stieu(eiePnhie 20)
eTmotdlvrucln, 00;
fnPieatrFrETEEYLRENME)
idrmFcoso(XRML_AG_UBR;
}
fnto cnrvdxml(;
ucin otieEape)

EVENT PUMP
contrivedExample
deliverPunchline in 2000 ms (2000 ms are up!)

EXECUTION THREAD
contrivedExample (still finding factors)
deliverPunchline WAY after 2000 ms!

IN JAVASCRIPT, EVENTS
ARE BLOCKED BY
CURRENTLY EXECUTING
CODE.

"In JavaScript, events are blocked by currently
executing code." -RonTime

"
"In JavaScript, events are blocked
by currently executing code." RonTime
" -Your Name Here

EVENT PUMP
user furiously smashing keyboard event
scroll event
mouse click event
deliverPunchline in 100 ms

EXECUTION QUEUE
contrivedExample (still finding factors)

THAT'S COOL, BUT I DON'T USE SETTIMEOUT OR WRITE
FUNCTIONS THAT DO HEAVY COMPUTATION.

A SEQUENCE OF USER EVENTS ARE ASYNCHRONOUS BY
NATURE.

But more importantly...

THE FIRST 'A' IN 'AJAX'
IS 'ASYNCHRONOUS'

(The 'X' in 'Ajax' is 'XML', but we'll ignore that)

fnto laSuf){
ucin odtf(
vrxr=nwXLtpeus(;
a h
e MHtRqet)
xrorayttcag =fnto( {
h.nedsaehne
ucin)
i(h.edSae==4 {
fxrraytt = )
cnoelgxrrsosTx)
osl.o(h.epneet;
}
}
xroe(GT,'di?ea=';
h.pn'E' /otdly5)
xrsn(;
h.ed)
cnoelg"eus sn!)
osl.o(Rqet et";
}
laSuf)
odtf(;

YOU CAN'T WRITE ASYNCHRONOUS CODE SYNCHRONOUSLY
fnto gttf( {
ucin eSuf)
vrxr=nwXLtpeus(;
a h
e MHtRqet)
vrrsls
a eut;
h.nedsaehne
ucin)
i(h.edSae==4 {
fxrraytt = )
rsls=xrrsosTx;
eut
h.epneet
}
}
xroe(GT,'di?ea=';
h.pn'E' /otdly5)
xrsn(;
h.ed)
rtr rsls
eun eut;
}
cnoelg"tf i " gttf()
osl.o(Suf s , eSuf);

YOU CAN MAKE SOME ASYNCHRONOUS CODE SYNCHRONOUS,
BUT EXECUTION WILL BLOCK ALL EVENTS
fnto gttf( {
ucin eSuf)
vrxr=nwXLtpeus(;
a h
e MHtRqet)
vrrsls
a eut;
h.nedsaehne
ucin)
i(h.edSae==4 {
fxrraytt = )
rsls=xrrsosTx;
eut
h.epneet
}
}
xroe(GT,'di?ea=' fle;/ tidprmi te'sn'prm
h.pn'E' /otdly5, as) / hr aa s h ayc aa
xrsn(;
h.ed)
rtr rsls
eun eut;
}
cnoelg"tf i " gttf()
osl.o(Suf s , eSuf);

HOW DO WE MAKE THE ASYNCHRONOUS CODE MORE
UNDERSTANDABLE?

CALLBACKS

fnto gttf(r,clbc){
ucin eSuful alak
vrxr=nwXLtpeus(;
a h
e MHtRqet)
h.nedsaehne
ucin)
i(h.edSae==4 {
fxrraytt = )
clbc(h.epneet;
alakxrrsosTx)
}
}
xroe(GT,ul;
h.pn'E' r)
xrsn(;
h.ed)
}
gttf(/otdly5,fnto(epne {
eSuf'di?ea=' ucinrsos)
cnoelgrsos)
osl.o(epne;
};
)

BUT WHAT IF I NEED TO DO THINGS THAT DEPEND ON EACH
OTHER?

gttf(/srcret,fnto(eut {
eSuf'ue/urn' ucinrsl)
vrueNm =gtaermeutrsl)
a srae
eNmFoRsl(eut;
cnoelg"el,"+ueNm)
osl.o(Hlo
srae;
vrmsaeR =gtesgUIrmeutrsl)
a esgUI
eMsaeRFoRsl(eut;
gttf(esgUI fnto(esgs {
eSufmsaeR, ucinmsae)
vrmsaeon =gtesgCutrmeutmsae)
a esgCut
eMsaeonFoRsl(esgs;
cnoelg
osl.o(
"o hv "+msaeon +"msae.)
Yu ae
esgCut
esgs";
};
)
};
)

gttf(/srcret,fnto(eut {
eSuf'ue/urn' ucinrsl)
a srae
eNmFoRsl(eut;
cnoelg"el,"+ueNm)
osl.o(Hlo
srae;
a esgUI
eMsaeRFoRsl(eut;
gttf(esgUI fnto(esgs {
eSufmsaeR, ucinmsae)
a esgCut
eMsaeonFoRsl(esgs;
cnoelg
osl.o(
Yu ae
esgCut
esgs";
} fnto(r){
, uciner
cnoelg
osl.o(
"nerrocre gtigmsae:,ermsae;
A ro curd etn esgs" r.esg)
};
)
} fnto(r){
, uciner
cnoelg
osl.o(
"nerrocre gtigue dt:,ermsae;
A ro curd etn sr aa" r.esg)
};
)

gttf(/srcret,fnto(h,er {
eSuf'ue/urn' ucinxr r)
i(r){
fer
cnoelg
osl.o(
"nerrocre gtigue dt:,ermsae;
A ro curd etn sr aa" r.esg)
}
vrueNm =gtaermeutrsls;
a srae
eNmFoRsl(eut)
cnoelg"el,"+ueNm)
osl.o(Hlo
srae;
vrmsaeR =gtesgUIrmeutrsls;
a esgUI
eMsaeRFoRsl(eut)
gttf(esgUI fnto(esgs er {
eSufmsaeR, ucinmsae, r)
i(r){
fer
cnoelg
osl.o(
"nerrocre gtigmsae:,ermsae
A ro curd etn esgs" r.esg)
}
a esgCut
eMsaeonFoRsl(esgs;
cnoelg
osl.o(
Yu ae
esgCut
esgs";
};
)
};
)

GOOD THINGS WITH THIS APPROACH?
Understandable
Easy to consume
Direct API

PROBLEMS WITH THIS APPROACH?
Readability
Testing
Tight coupling / Wrong direction of dependencies
Pyramid of doom

HOW CAN WE ADDRESS THESE PROBLEMS?

CAN WE MANAGE ASYNCHRONOUS PROCESSES BY SHARING
AN OBJECT BETWEEN THE CONSUMER AND THE PRODUCER?

Consumer -> Shared Object <- Producer

fnto gttfASaeOjc(r){
ucin eSufshrdbetul
vrxr=nwXLtpeus(;
a h
e MHtRqet)
vrsae ={
a hrd
rsls
eut:
nl
ul
}
;
h.nedsaehne
ucin)
i(h.edSae==4 {
fxrraytt = )
sae.eut =xrrsosTx;
hrdrsls
h.epneet
}
}
xroe(GT,ul;
h.pn'E' r)
xrsn(;
h.ed)
rtr sae;
eun hrd
}
fnto cetSaeHnlrsae){
ucin raehrdade(hrd
vrhnlr=fnto( {
a ade
ucin)
i(sae.eut){
f!hrdrsls
stieu(ade,
eTmothnlr
}
es {
le
cnoelgsae.eut)
osl.o(hrdrsls;
}
}
rtr hnlr
eun ade;
}

0;
)

vrsae =gttfASaeOjc(di?ea=';
a hrd
eSufshrdbet'otdly5)
cetSaeHnlrsae))
raehrdade(hrd(;

Create an object in a producer that can be told that processing
is done
Get an object from the producer to the consumer so that the
consumer can tell it to do something

fnto gttfWtCodntrul {
ucin eSufihoriao(r)
vrxr=nwXLtpeus(;
a h
e MHtRqet)
vrcodntr=nwCodntr)
a oriao
e oriao(;
h.nedsaehne
ucin)
i(h.edSae==4 {
fxrraytt = )
codntraloenTeaasxrrsosTx)
oriao.lDnAdhDtI(h.epneet;
}
}
xroe(GT,ul;
h.pn'E' r)
xrsn(;
h.ed)
rtr codntrcnueOjc(;
eun oriao.osmrbet)
}

gttfWtCodntr'ue/urn'
eSufihoriao(/srcret)
.nTe(ucinrsl){
adhnfnto(eut
a srae
eNmFoRsl(eut;
cnoelg"el,"+ueNm)
osl.o(Hlo
srae;
a esgUI
eMsaeRFoRsl(eut;
rtr gttfWtCodntrmsaeR)
eun eSufihoriao(esgUI;
}.nTe(ucinrsl){
)adhnfnto(eut
vrmsaeon =gtesgCutrmeutrsl)
a esgCut
eMsaeonFoRsl(eut;
cnoelg"o hv "+msaeon +"msae.)
osl.o(Yu ae
esgCut
esgs";
};
)

fnto Codntr){
ucin oriao(
vrclbcs=[;
a alak
]
vrecpinades=[;
a xetoHnlr
]
rtr {
eun
aloenTeaas
lDnAdhDtI:
fnto(aa {
ucindt)
frvri=0 i<clbcslnt;i+ {
o(a
;
alak.egh +)
clbcsi(aa;
alak[]dt)
}
}
,
tigSrwdp
hnsceeU:
fnto(x {
ucine)
frvri=0 i<clbcslnt;i+ {
o(a
;
alak.egh +)
ecpinadesi(x;
xetoHnlr[]e)
}
}
,
cnueOjc:
osmrbet
fnto( {
ucin)
rtr {
eun
adhn
nTe:
fnto(n er {
ucinf, r)
vrcodntr=Codntr)
a oriao
oriao(;
vrclbc =fnto( {
a alak
ucin)
rsl.nTe(oriao.lDnAdhDtI,codntrtigSrwdp;
eutadhncodntraloenTeaas oriao.hnsceeU)
clbcsps(alak;
alak.uhclbc)
rtr codntrcnueOjc(;
eun oriao.osmrbet)
}
}
}
}
}

PROMISES/A+
A spec that builds out a standard for asynchronous
communication using a shared communication object called a
promise.

SO YOU TURNED NESTED CALLBACKS INTO A CHAIN.

BIG WHOOP!

A promise represents the future value that will be returned.

fnto gttfAPoieul {
ucin eSufsrms(r)
vrxr=nwXLtpeus(;
a h
e MHtRqet)
vrdfre =Qdfr)
a eerd
.ee(;
h.nedsaehne
ucin)
i(h.edSae==4 {
fxrraytt = )
i(h.ttsoe==50 {
fxrsauCd = 0)
trw"oehn poe o tesre!;
ho Smtig opd n h evr"
}
es {
le
dfre.eov(SNprexrrsosTx);
eerdrsleJO.as(h.epneet)
}
}
}
xroe(GT,ul;
h.pn'E' r)
xrsn(;
h.ed)
rtr dfre.rms;
eun eerdpoie
}

fnto gtsrnosrms( {
ucin eUeIfAPoie)
rtr gttfAPoie'ue/urn'
eun eSufsrms(/srcret)
.hn
te(
fnto(aa {
ucindt)
cnoelg
osl.o(
"el," dt.ae;
Hlo , aanm)
rtr dt;
eun aa
};
)
}

fnto gtesgssrms(aa {
ucin eMsaeAPoiedt)
rtr gttfAPoiedt.esgUI.hnfnto(aa {
eun eSufsrms(aamsaeR)te(ucindt)
cnoelg
osl.o(
"o hv" dt.esgslnt,"esgs";
Yu ae, aamsae.egh msae.)
rtr dt;
eun aa
};
)
}

Qfalgtsrnosrms)
.cl(eUeIfAPoie
.hngtesgssrms)
te(eMsaeAPoie;

EXCEPTION HANDLING
fnto gtro( {
ucin eErr)
trw"hsi!;
ho O ht"
}
Qfalgtro()
.cl(eErr)
.hngtsrnosrms)
te(eUeIfAPoie
.hngtesgssrms)
te(eMsaeAPoie
.ac(uciner {
cthfnto(r)
cnoelger;
osl.o(r)
};
)

COMPOSITION
fnto mprmsspoie,f){
ucin aPoie(rmss n
rtr Qalpoie)te(ucinrsls {
eun .l(rmss.hnfnto(eut)
vrmpeRsls=[;
a apdeut
]
frvri=0 i<rslslnt;i+ {
o(a
;
eut.egh +)
mpeRslsps(nrslsi);
apdeut.uhf(eut[])
}
rtr mpeRsls
eun apdeut;
};
)
}
fnto srPoie(rmss {
ucin otrmsspoie)
fnto gtaarsl){
ucin eDt(eut
rtr pren(eutdt,1)
eun asItrsl.aa 0;
}
rtr mprmsspoie,gtaa.hnfnto(eut){
eun aPoie(rmss eDt)te(ucinrsls
rtr rslssr(;
eun eut.ot)
};
)
}
fnto stp){
ucin eU(
vrdt =[;
a aa
]
frvri=0 i<1;i+ {
o(a
;
0 +)
dt.uhgttfAPoie
aaps(eSufsrms(
}

'otx'+i)
di?=
);

srPoie(aa.hnfnto(otd {
otrmssdt)te(ucinsre)
frvri=0 i<sre.egh i+ {
o(a
;
otdlnt; +)
cnoelgsre[];
osl.o(otdi)
}
};
)

Promises are more than just a fancy callback system. A promise
stands in place of a future value.

When an object is "thenable", the value can be retrieved in the
future and used directly, making asynchronous concepts look
synchronous.

GOOD THINGS WITH THIS APPROACH
Code is much more flat
Easier to test
We can compose functions that take promises
We can handle exceptions very clearly
We can pass around promises as though they were the actual
value, using .then() to get the result

BAD THINGS WITH THIS APPROACH
Tends to cause some confusion because the abstraction isn't
straightforward
Using this in a public API is considered very opinionated, and
forces consumers of your API to use a specific paradigm
Multiple implementations of this, not all meet the standard
(*cough* jQuery *cough*)

Asynchronous processes in JavaScript are handled with
callbacks.
Callback mechanisms introduce some problems such as error
handling, composition, testing.
Callbacks are functions, which are first class objects.
Instead of callbacks, what if we used a different object that
mediates between consumer and producer?
Promise objects are a type of mediator that represent the
future value of an async process.
Promises/A+ is an open standard with a specification.
Promise objects can be used in place of actual values to make
asynchronous code look synchronous.

Asynchronous java script

More Related Content

Similar to Asynchronous java script (20)

Recently uploaded (20)

Asynchronous java script