DC AngularJS Meetup

presented by

Who are we?

Audax Health is a health software company that focuses on the health and wellness of individuals through our flagship product, Zensey.

Some features we use to engage with individuals:

Who am I?

Bryan Lin

Software Engineer at Audax Health
Work primarily in Scala...
But now am more focused on the AngularJS portion of our stack
Follow me @hooliganlin
Challenge me to any Halo game on Xbox Live: BK DERF1

Promises

My Promises to you

You will learn

var avoidCallbackHell = $q.deferred.promise
var chainingPromises = $q.deferred.promisevar createYourOwnPromises = $q.deferred.promise
$q.all([avoidCallbackHell, chainingPromises, createYourOwnPromise])  .done(function() {    // celebrate  })

JavaScript and Async

Asynchronous functionality is achieved through callbacks

 var orderCompleted = false;
 placeOrder(order, function(result) {
   orderCompleted = result.success;
   alert('I got my order!', result);           
 }); 
 
 //do some other things while we are placing an order
 doingSomethingElse();

Callbacks are a response to an event that has finished, but it does not return a value.

But wait...

What if I wanted to read a value which the callback function was modifying??

var orderCompleted = false; placeOrder(order, function(result) {
   orderCompleted = result.success;          
});
//NOO!!!!! orderCompleted is not guaranteed that the order was completed!!shipOrder(order, orderCompleted);

So to "guarantee" the value has been updated...

placeOrder(order, function(results) {
   //Insert the function to ship the order in the callback...   shipOrder(order, results.completed); });

But to add more complexity...

    placeOrder(order, function(result) {
            authorizeCC(creditCard, function(validCC) {
                validateShippingAddr(address, function(validAddress) {
                    shipProduct(order, function(result) {
                       //order shipped!! right???
                       //result.success?? validCC???
                    });
                });
            });
        });

CALLBACK HELL!!!!

Enter in...

Promises

Not this promise:

But this promise:

(note this is part of the Q library by Kowal)

var creditCardValidated = placeOrder(order).then(authorizeCC);var shippingValidated = creditCardValidated.then(validateShipping)
Q.all([creditCardValidated, shippingValidated]).done(shipProduct)

Delivery of promise #1:

Avoiding callback hell

What's a Promise?

a container that holds or will hold a value
a time-independent proxy for a remote/external object
an instance of a class that has utility methods like .then()
a 'frozen event' you can learn status of at any time
It's a first-class object so you can:

Pass it
Reference it
Chain it

Reference: http://christianlilley.wordpress.com/2013/09/19/promises-promises-mastering-async-io-in-javascript-with-the-promise-pattern/

Why Promises?

Easy to read when dealing with async
You will always be guaranteed a return value/state (fulfilled, unfulfilled, failed)

You know that value returned within the promise is the value that you expect (even if it's a failure).

Flexible

You can chain multiple promises and do something after they have all been fulfilled

 var promise = Q.all([promise1, promise2]).then(finalPromise)

Angular's promises

//Using the promisefuncThatReturnsAPromise().then(function(success) { console.log(success);}, function(error) {  console.log(error)};

//Creating the promise var promise = function() {   var deferred = $q.defer();   if (fail)      deferred.reject('oh no!!!');   else       deferred.resolve('happy!');   return deferred.promise;}

$q

AngularJS $q is inspired by Kris Kowal's Q.

Doesn't contain all the features of Q, but the important functionalities
Integrated with the $rootScope (avoid browser repaint when the model updates)

Contains two API:

Promise API
Deferred API

Promise API

.then()

The action to be executed upon a fulfilled promise
Actions are callbacks that are resolved, rejected, and notified
Returns a new promise

 var ccPromise = CreditCardService.validateCC(cc).then(   function(result) {     //resolved     console.log('You have a valid credit card', result);   },   function(error) {     //rejection     console.log('Dude, something is not right with your card', error);   },   function(msg) {      //notify callback      console.log('I have been notified', msg);   });

Promise API

Then() (cont.)

Because it returns a promise, you can chain them!

 var shippingPromise = CreditCardService.validateCC(cc)                        .then(validateShipping)                        .then(calculateTotalPrice)                        .then(shipOrder)

It just makes sense!

Delivery of promise #2:

Chaining promises

Promise API

catch()

shorthand for a promise with only a rejection
```
 promise.then(null, rejectionCallback)
```

finally()

Think of it as the finally block of a try-catch block. It will always be executed at the end of a statement regardless of a fullfilment or rejection

Defer API

Purposes of the deferred:

Creates a promise

var deferred = $q.defer(); // promise created internall

You return the promise, and fulfill it later.
```
return deferred.promise;
```

Signals the status of the promise (resolve, reject, notify)

deferred.resolve('successful callback!');
deferred.reject('go home fool, you just got rejected!');
deferred.notify('I just got an alert!');

Defer API

Example above expanded

 var doSomethingAsync = function() {   var deferred = $q.defer();   $timeout(function() {     deferred.resolve('Done after 500 milliseconds');   }, 500);
   return deferred.promise; }
 doSomethingAsync().then(function(resp) {     //the message appears after ~500 milliseconds    console.log(resp); });

Recap on Promises and Deferred

According to Christian Lilley's metaphor: "A Promise is a mailbox"

It contains the message you want
You can pick it up and bring it to whatever context it needs to be in

Reference: http://www.slideshare.net/xmlilley/postal-for-promises-20-min

And the deferred is the mailman

Assigns you a new mailbox (creating a promise)
Puts the mail into mailbox (resolve the promise)
Raises the flag on the box (set the state of the promise)

Reference: http://www.slideshare.net/xmlilley/postal-for-promises-20-min

AngularJS is filled with promises

$http
$route
$timeout
$resource

Let's create a promise!

Delivery of promise #3:

Creating your own promises

http://bit.ly/1j2a2s4

Before

$q.defer().promise.resolve(nextSpeaker())

Questions?

AngularJs - Promises

By Bryan Lin

AngularJs - Promises

2,058

Bryan Lin

hooliganlin

DC AngularJS Meetup

Who are we?

Some features we use to engage with individuals:

Who am I?

Bryan Lin

Promises

My Promises to you

JavaScript and Async

But wait...

So to "guarantee" the value has been updated...

But to add more complexity...

CALLBACK HELL!!!!

Enter in...

Promises

Not this promise:

But this promise:

Delivery of promise #1:

Avoiding callback hell

What's a Promise?

Why Promises?

Angular's promises

$q

Promise API

Promise API

Delivery of promise #2:

Chaining promises

Promise API

Defer API

Defer API

Recap on Promises and Deferred

And the deferred is the mailman

AngularJS is filled with promises

Let's create a promise!

Delivery of promise #3:

Creating your own promises

Before

$q.defer().promise.resolve(nextSpeaker())

Questions?

AngularJs - Promises

More from Bryan Lin

`$q.defer().promise.resolve(nextSpeaker())`