Promises And Chaining In AngularJS - Into Callback Hell And Back Again

41
Promises and chaining Into callback hell … back again

description

If you have worked with Javascript before you might have been there already - callback hell! But there is an easy & elegant way out to get back control over your code - Promises and promise chaining! This talk will give an introduction to promises and chaining in AngularJS. This talk was held by Hans-Gunther Schmidt at the Berlin AngularJS Meetup on Oct. 8th 2014 (http://www.meetup.com/AngularJS-Meetup-Berlin/events/182646022/).

Transcript of Promises And Chaining In AngularJS - Into Callback Hell And Back Again

Page 1: Promises And Chaining In AngularJS - Into Callback Hell And Back Again

Promises and chainingInto callback hell … back again

Page 3: Promises And Chaining In AngularJS - Into Callback Hell And Back Again
Page 4: Promises And Chaining In AngularJS - Into Callback Hell And Back Again

Intro: sync, async, callbacks

Page 5: Promises And Chaining In AngularJS - Into Callback Hell And Back Again

Humans are multi-threaded!

Page 6: Promises And Chaining In AngularJS - Into Callback Hell And Back Again

Browsers provide asynchrony*.

Javascript is single-threaded & synchronous.

Page 7: Promises And Chaining In AngularJS - Into Callback Hell And Back Again

finish

a()b()c()

start

a()b()c()

Page 8: Promises And Chaining In AngularJS - Into Callback Hell And Back Again

finish

a()b()c()

start

a()b()c()

b()a()c()

c()b()a()

c(),a()b() …

Page 9: Promises And Chaining In AngularJS - Into Callback Hell And Back Again

sync async

Page 10: Promises And Chaining In AngularJS - Into Callback Hell And Back Again

Why async?

Page 11: Promises And Chaining In AngularJS - Into Callback Hell And Back Again

Synchronous flow, here? Bad idea!

Page 12: Promises And Chaining In AngularJS - Into Callback Hell And Back Again

“Callbacks to the rescue!”

Page 13: Promises And Chaining In AngularJS - Into Callback Hell And Back Again

“Call me back!”

Page 14: Promises And Chaining In AngularJS - Into Callback Hell And Back Again

Use a callback! Way better!

Page 15: Promises And Chaining In AngularJS - Into Callback Hell And Back Again

Got it!

Page 16: Promises And Chaining In AngularJS - Into Callback Hell And Back Again

Callbacks in order?

a() b() c() d() e() f()

Page 17: Promises And Chaining In AngularJS - Into Callback Hell And Back Again
Page 18: Promises And Chaining In AngularJS - Into Callback Hell And Back Again

“Pyramid of doom!”

Page 19: Promises And Chaining In AngularJS - Into Callback Hell And Back Again
Page 20: Promises And Chaining In AngularJS - Into Callback Hell And Back Again

“I am NOT going to debug that!”

Page 21: Promises And Chaining In AngularJS - Into Callback Hell And Back Again

“Free ticket into callback hell!”

Page 22: Promises And Chaining In AngularJS - Into Callback Hell And Back Again
Page 23: Promises And Chaining In AngularJS - Into Callback Hell And Back Again

Core: Promises to the rescue

Page 24: Promises And Chaining In AngularJS - Into Callback Hell And Back Again

My definition of a promise

“I hereby give you a promise that I will answer your question some time in the future … but not right now!”

Page 25: Promises And Chaining In AngularJS - Into Callback Hell And Back Again

Promise

fulfilledrejected

settledpending

Page 26: Promises And Chaining In AngularJS - Into Callback Hell And Back Again

Still experimental

kriskowal/q cujojs/when

WinJS.Promisetildeio/rsvp.js

Page 27: Promises And Chaining In AngularJS - Into Callback Hell And Back Again

$q.defer()

Page 28: Promises And Chaining In AngularJS - Into Callback Hell And Back Again

.then()

Page 29: Promises And Chaining In AngularJS - Into Callback Hell And Back Again

.resolve() .reject()

Page 30: Promises And Chaining In AngularJS - Into Callback Hell And Back Again

.then() in .then() in .then() …

Page 31: Promises And Chaining In AngularJS - Into Callback Hell And Back Again

“I’ve seen that *$#%$* before …”

Page 32: Promises And Chaining In AngularJS - Into Callback Hell And Back Again

Chaining

Page 33: Promises And Chaining In AngularJS - Into Callback Hell And Back Again

“Wicked, Hans!”

Page 34: Promises And Chaining In AngularJS - Into Callback Hell And Back Again

“And what about collecting results from multiple promises?”

Page 35: Promises And Chaining In AngularJS - Into Callback Hell And Back Again

Combined results

$q.all()

Page 36: Promises And Chaining In AngularJS - Into Callback Hell And Back Again
Page 37: Promises And Chaining In AngularJS - Into Callback Hell And Back Again

“OK! Enough theory!”

Page 38: Promises And Chaining In AngularJS - Into Callback Hell And Back Again

Get fancy: Demo Time!

Page 39: Promises And Chaining In AngularJS - Into Callback Hell And Back Again

Outro: Questions?

Page 40: Promises And Chaining In AngularJS - Into Callback Hell And Back Again

http://ejohn.org/blog/how-javascript-timers-work/

http://www.html5rocks.com/en/tutorials/async/deferred/

https://docs.angularjs.org/api/ng/service/$q

https://github.com/kriskowal/q

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise

https://www.promisejs.org/

https://github.com/promises-aplus/promises-spec

Page 41: Promises And Chaining In AngularJS - Into Callback Hell And Back Again

“Thank you! Over & out!”