'

Promises - The Unsung Heroes ofJavaScript

Понравилась презентация – покажи это...





Слайд 0

PROMISES THE UNSUNG HEROES OF ASYNC IN JAVASCRIPT DEAN RADCLIFFE • OK GROW! • @DEANIUSDEV


Слайд 1

A SPORTING BET "I BET YOU $20 THE REDS WON'T BEAT THE CUBS THIS SEASON..."


Слайд 2

TWO PROMISES ➢ Begin Season then Cubs Lose then Season Ends ↩ I Pay You ➢ Begin Season then Season Ends ↩ You Pay Me


Слайд 3

TWO PROMISES ➢ Begin Season then Cubs Lose // ^ What if we made the bet after a loss ? then Season Ends ↩ I Pay You ➢ Begin Season then Season Ends ↩ You Pay Me


Слайд 4

PROMISES: EVENTS, AT ANY TIME A Promise represents a point in time which is: ▸ ASAP, if something has already happened ▸ ASAP the moment it happens


Слайд 5

PROMISES: VALUES, AT ANY TIME A Promise provides access to a value whether: ▸ It is already known ▸ It is being computed in this turn of the Event Loop ▸ It may be un-knowable (maybe use a TimeOut)


Слайд 6

PROMISES: ONE OR MORE CONDITIONS & ACTIONS A Promise can represent an entire chain of events, with branching possibilities. var firstStep = new Promise() var allSteps = firstStep .then(isReady => isReady || makeReady) .then(lastStep) Promise.await(allSteps)


Слайд 7

OUR BET - MAKE IT SO ➢ let ourBet = BeginSeason() .then(Promise.race(CubsLoseToReds(), SeasonEnds())) .then(cubsLose => cubsLose ? iPayYou : youPayMe) //.then(iPayYou, youPayMe) ▸ CubsLoseToReds and SeasonEnds return Promises ▸ CubsLose should return truthy (such as the score), ▸ SeasonEnds should return falsy, or throw or reject


Слайд 8

UNSUNG HEROES OF ASYNC ▸ Standard, explicit contract of behavior ▸ A promise can resolve or reject ▸ Its state may change 1x from pending to fulfilled ▸ p.then(youPayMe, iPayYou) ▸ Or: p.then((value)=>{}) .catch((err)=>{})


Слайд 9

BACK ON THE CHAIN GANG Each step in a .then chain: RETURNS A CUMULATIVE PROMISE FOR ALL BEFORE ➢ let chain = promise1 .then(promise2) .then(action1)


Слайд 10

BACK ON THE CHAIN GANG Each step in a .then chain may: RETURN A VALUE / RETURN A PROMISE FOR A NEW VALUE ➢ BeginSeasonLossless .then(CubsLoseToReds) // <-- a Promise .then(iPayYou)


Слайд 11

BACK ON THE CHAIN GANG Each step in a .then chain may: RAISE AN EXCEPTION / RETURN REJECTED PROMISE ➢ BeginSeasonLossless .then(Promise.race(CubsLoseToReds,TimeOutAtSeasonEnd)) .then(iPayYou) .catch(youPayMe)


Слайд 12

EXCEPTIONS ▸ An uncaught exception in a .then is OK! ▸ A catch at the end can handle errors for the whole chain


Слайд 13

COMIC RELIEF CAT PICTURE


Слайд 14

QUESTION: HOW DO THESE EVENTS BEHAVE ? If you add an event listener after an event has happened, does it make a sound ? document.addEventListener("DOMContentLoaded") // vs. $(document).ready // vs. $(document).on("ready")


Слайд 15

QUESTION: HOW DO THESE EVENTS BEHAVE ? If you add an event listener after an event has happened, does it make a sound ? document.addEventListener("DOMContentLoaded") // vs. $(document).ready // <<-- only this one - like a Promise // vs. $(document).on("ready")


Слайд 16

PROVIDED ITS LOADED, 1 ➢ DomContentLoadedPromise.then(function () { console.log('Im ready') }); ↩ Promise {[[PromiseStatus]]: "resolved"} ----Im ready


Слайд 17

PROVIDED ITS LOADED, 2 ➢ DomContentLoadedPromise.then(function () { console.log('Im ready') }); ↩ Promise {[[PromiseStatus]]: "pending"} -----


Слайд 18

PROVIDED ITS LOADED, 2.. ➢ DomContentLoadedPromise.then(function () { console.log('Im ready') }); ↩ Promise {[[PromiseStatus]]: "pending"} ----...


Слайд 19

PROVIDED ITS LOADED, 3 ➢ DomContentLoadedPromise.then(function () { console.log('Im ready') }); ↩ Promise {[[PromiseStatus]]: "pending"} ----... _____ Im ready


Слайд 20

WHAT'S WRONG WITH CALLBACKS ? Implicit, not formalized standard of behavior: 1. Function that takes 2 arguments ▸ first argument is an error ▸ second argument is the result ▸ Never pass both ▸ error should be instanceof Error


Слайд 21

WHAT'S WRONG WITH CALLBACKS ? Implicit, not formalized standard of behavior (cont.) 1. Must never execute on the same tick of the event loop 2. Must be passed as last argument to function 3. Return value is ignored 4. Must not throw / must pass resulting errors 5. Must never be called more than once


Слайд 22

WHAT'S WRONG WITH CALLBACKS ? ▸ Burdensome to check & propogate errors correctly function doAsyncStuff (cb) { try { doStuff1(function(err, value) { if (err) return cb(err); try { doStuff2(value, function(err, value2) { if (err) return cb(err); cb(null, value2); }); } catch (e) { cb(e); } }) } catch (e) { cb(e); } }


Слайд 23

WHAT'S RIGHT WITH PROMISES ? BEAUTIFUL TO CHECK ERRORS, EXCEPTION OR ASYNC! // Promises FTW !! function doAsyncStuff () { return doStuff1() .then(doStuff2) .catch(function(err){ /*...*/}) }


Слайд 24

THE EVENT LOOP (AKA TASK QUEUE)


Слайд 25

THE EVENT LOOP (AKA TASK QUEUE)


Слайд 26

THE 2 WAYS OF CODING JS


Слайд 27

PROMISES AND REACTIVITY Keep an upperCase var in sync with a variable called lowerCase let lowerCase = new ReactiveVar let upperCase = new ReactiveVar


Слайд 28

PROMISES AND REACTIVITY Keep an upperCase var in sync with a variable called lowerCase let lowerCase = new ReactiveVar let upperCase = new ReactiveVar Tracker.autorun(() => { let x = lowerCase.get() upperCase.set(x.toUpperCase()) })


Слайд 29

PROMISES AND REACTIVITY Keep an upperCase var in sync with a variable called lowerCase lowerCase.set(x).then((x) => { upperCase.set(x.toUpperCase()) })


Слайд 30

PATTERN RETURNING A PROMISE FROM A METEOR METHOD


Слайд 31

RETURNING A PROMISE FROM A METEOR METHOD Return a Promise from a Method Return an Eventual Value from a Method


Слайд 32

RETURNING A PROMISE FROM A METEOR METHOD Return a Promise from a Method Return an Eventual Value from a Method Eventually return a value from a Method


Слайд 33

RETURNING A PROMISE FROM A METHOD, 1 Meteor.methods({ futureTime() { return Promise.await( ); } })


Слайд 34

RETURNING A PROMISE FROM A METHOD, 2 Meteor.methods({ futureTime() { return Promise.await(new Promise((resolve) => { //some callback code which should call 'resolve' })); } })


Слайд 35

RETURNING A PROMISE FROM A METHOD, 3 Meteor.methods({ futureTime() { return Promise.await(new Promise((resolve) => { setTimeout(() => { console.log("its the future now") resolve(new Date()) }, 5000) })); } })


Слайд 36

RETURNING A PROMISE FROM A METHOD, 4 Meteor.methods({ futureTime() { let actions = new Promise((resolve) => setTimeout(()=> resolve(new Date), 5000)) .then(logAndReturn) .catch(logAndReturn); return Promise.await(actions); } })


Слайд 37

ASYNC SHEEP


Слайд 38

CALLING A METHOD Meteor.promise("futureTime") .then(log)


Слайд 39

CALLING A METHOD, NOW AND LATER ➢ Promise.resolve(new Date) .then(log) .then(() => Meteor.promise("futureTime")) .then(log) --Fri Sep 18 2015 22:11:26 GMT-0500 (CDT) ↩ Promise {[[PromiseStatus]]: "pending"} --Fri Sep 18 2015 22:11:31 GMT-0500 (CDT)


Слайд 40

CALLING A METHOD, FUNNILY Promise.resolve(new Date) .then(log) .then(() => "futureTime") .then(Meteor.promise) .then(log) --Fri Sep 18 2015 22:11:46 GMT-0500 (CDT) ↩ Promise {[[PromiseStatus]]: "pending", --Fri Sep 18 2015 22:11:51 GMT-0500 (CDT)


Слайд 41

var ComicReliefCatPicture; // TODO fill in


Слайд 42

PROMISES AND REACTIVITY okgrow:promise A promise's resolution can invalidate a computation ? Awwwwwww yeah !


Слайд 43

DEFINE A HELPER AROUND A PROMISE <template name="example1Demo"> <input id="arg1" value="foo"/> <input id="arg2" value="bar"/> <textarea> {{meteorPromise "addWithSleep" "arg1" "arg2"}} </textarea> </template>


Слайд 44

RETURN A PROMISE FROM A HELPER // {{meteorPromise "addWithSleep" "arg1" "arg2"}} Template.example1Demo.helpers({ meteorPromise: function (methodName, part1, part2) { var template = Template.instance(), value1 = template[part1].get(), value2 = template[part2].get(); // want to - but cant do this ! return Meteor.callPromise(methodName, value1, value2); } });


Слайд 45

RETURN A PROMISE FROM A HELPER // {{meteorPromise "addWithSleep" "arg1" "arg2"}} Template.example1Demo.helpers({ meteorPromise: ReactivePromise(theHelperFunction, {pending: "loading..."}) }); var theHelperFunction = function (methodName, part1, part2) { var template = Template.instance(), value1 = template[part1].get(), value2 = template[part2].get(); return Meteor.callPromise(methodName, value1, value2); }


Слайд 46

TMTOWTDI CALLBACKS, PROMISES, FIBERS, REACTIVITY, AND ES6 GENERATORS ARE ALL WAYS TO BE ASYNC! (YOU CAN ALWAYS CONVERT)


Слайд 47

QUESTIONS ??


Слайд 48

PROMISES Я AWESOME


Слайд 49

PROMISES Я AWESOME AND SO ARE YOU!


Слайд 50

DEAN RADCLIFFE, OK GROW! @DEANIUSDEV


Слайд 51


×

HTML:





Ссылка: