Angular JS Promise by Jimmy Chandra

1 of 23

Slide Notes

Angular JS Promise

Published on Nov 18, 2015

Almost done

View Outline

PRESENTATION OUTLINE

Angular JS PROMISE

CHAINING, EXCEPTION HANDLING, & ANTI-PATTERNS

Photo by ditatompel

Jimmy Chandra

T: @jchandra E: jimmy.chandra@coupa.com

Intro to self here,
perhaps a bit of an icebreaker as well.. joke, whatever.

Photo by ginnerobot

Promise?

What's That?

What's a promise?
(Not the one in background)
What's so good promise?
Why should we use it?

Photo by Daniel M. Reck

Synchronous

IMMigration Line, Supermarket Checkout, etc.

Real life example...
Waiting in line in bank, grocery store, immigration line.

Why is this not good?

Perception: slow.

From the clerk's / teller / custom officer perspective...
Serving one client at a time from start to finish before can move on.

Photo by illustir

ASYNCHRONOUS

ReSTAURANT, PHARMACY, ETC.

Like to eat out?
Restaurant?

Let's discuss the waiter...

From waiter's perspective...

Take order,
bring order to kitchen...
then what? wait till it's done?

No, go take another order from different table, etc.

Only and only when food is ready (bell - food ready), they go back to kitchen and take the meal to the client.

Why is this better?
Perceptions: faster.

From resto owner perspective? Efficient use of limited resource.

So async is good.

So how does this tie to Angular?
Anyone use promise before in angular?
Get example...
get them to think $http or $resource...
flip to next slide...

Photo by MyTangerineDreams

promise returning angular services

$q
$http
$timeout

Things I know in Angular that return promise...

talk a bit about $timeout and how to use it for mocking server side call and why $http can't do it w/ out server...

Photo by Andrey Zhukov

var foo = $http.get('/data.json');

Trap...

ask what will foo have...
data.json content?

explain people are using this incorrectly.

talk about how it was actually correct in the old day of angular.

Demo: demo01

Photo by Stéfan

DEMO

Photo by hackNY

PROMISE CHAINING

Photo by ernest figueras

10.

SERIAL CHAIN

waiter
.takeCustOrder()
.then(handOderToKitchen)
.then(takeOrderToTable)
.catch(tellProblemToCust);

Photo by pratanti

11.

PARALLEL CHAIN

$q.all([prepareSauce(), cookPasta(), prepareSalad()])
.then(notifyOrderReady)
.catch(unableToFulfillOrder);

Photo by Dusty J

12.

AUTO-RESOLVING PROMISE
return $q.when(value);

Photo by keightdee

13.

DEMO

Photo by hackNY

14.

Exception HANDLING

Photo by micheleorsi

15.

SERVICE EXCEPTION HANDLING
.catch(handleProblem);
function handleProblem(resp) {
logger.logError(resp);
return $q.reject('unable to ...');
}

16.

UI EXCEPTION HANDLING
.catch(handleProblem);
function handleProblem(reason) {
alert('Problem, contact support');
}

17.

DEMO

Photo by hackNY

18.

ANTI-PATTERN

var dfd = $q.defer();
$timeout(function() {
return dfd.resolve(0);
}, 0);
return dfd.promise;

Photo by thematthewknot

19.

DO THIS INSTEAD

return $timeout(function() {
return 0;
});

Photo by DieselDemon

20.

ANTI-PATTERN

someService
.doSomething()
.then(funtion(res) {...}, function(res) { ... });

Photo by thematthewknot

21.

DO THIS INSTEAD

someService
.doSomething()
.then(successHandler)
.catch(failHandler);

Photo by DieselDemon

22.

IN THE NEAR FUTURE

- ES6 Promise
- Observables

Photo by Clauz Jardim

23.

References

Adventure In Angular ep.55: https://devchat.tv/adventures-in-angular/055-aia-promises
Thomas Burlesson - Flattening Promise Chain: http://solutionoptimist.com/2013/12/27/javascript-promise-chains-2
Angular $q Documentation: https://docs.angularjs.org/api/ng/service/$q
Aviv Ben-Yosef - $q.defer: You’re doing it wrong http://www.codelord.net/2015/09/24/$q-dot-defer-youre-doing-it-wrong/
Talk Source Code: https://github.com/jchandra74/ng-promise-demo-material

Photo by Andrew|W

Jimmy Chandra

http://blog.jimmychandra.com/

Slide Notes

Angular JS Promise

MORE DECKS TO EXPLORE

PRESENTATION OUTLINE

Angular JS PROMISE

Jimmy Chandra

Promise?

Synchronous

ASYNCHRONOUS

promise returning angular services

var foo = $http.get('/data.json');

DEMO

PROMISE CHAINING

SERIAL CHAINwaiter.takeCustOrder().then(handOderToKitchen).then(takeOrderToTable).catch(tellProblemToCust);

PARALLEL CHAIN$q.all([prepareSauce(), cookPasta(), prepareSalad()]).then(notifyOrderReady).catch(unableToFulfillOrder);

AUTO-RESOLVING PROMISEreturn $q.when(value);

DEMO

Exception HANDLING

SERVICE EXCEPTION HANDLING.catch(handleProblem);function handleProblem(resp) {logger.logError(resp);return $q.reject('unable to ...');}

UI EXCEPTION HANDLING.catch(handleProblem);function handleProblem(reason) {alert('Problem, contact support');}

DEMO

ANTI-PATTERNvar dfd = $q.defer();$timeout(function() {return dfd.resolve(0);}, 0);return dfd.promise;

DO THIS INSTEADreturn $timeout(function() {return 0;});

ANTI-PATTERNsomeService.doSomething().then(funtion(res) {...}, function(res) { ... });

DO THIS INSTEADsomeService.doSomething().then(successHandler).catch(failHandler);

IN THE NEAR FUTURE- ES6 Promise- Observables

References

Jimmy Chandra

Error!

SERIAL CHAIN

waiter
.takeCustOrder()
.then(handOderToKitchen)
.then(takeOrderToTable)
.catch(tellProblemToCust);

PARALLEL CHAIN

$q.all([prepareSauce(), cookPasta(), prepareSalad()])
.then(notifyOrderReady)
.catch(unableToFulfillOrder);

AUTO-RESOLVING PROMISE
return $q.when(value);

SERVICE EXCEPTION HANDLING
.catch(handleProblem);
function handleProblem(resp) {
logger.logError(resp);
return $q.reject('unable to ...');
}

UI EXCEPTION HANDLING
.catch(handleProblem);
function handleProblem(reason) {
alert('Problem, contact support');
}

ANTI-PATTERN

var dfd = $q.defer();
$timeout(function() {
return dfd.resolve(0);
}, 0);
return dfd.promise;

DO THIS INSTEAD

return $timeout(function() {
return 0;
});

ANTI-PATTERN

someService
.doSomething()
.then(funtion(res) {...}, function(res) { ... });

DO THIS INSTEAD

someService
.doSomething()
.then(successHandler)
.catch(failHandler);

IN THE NEAR FUTURE

- ES6 Promise
- Observables