Practical Promises

D1b1ae7d58da3d0cb7db07e308758e9e?s=47 The Guild
September 05, 2013

Practical Promises

Matthijs Groen talks at the Guild (http://theguild.nl) about Javascript Promises, a design pattern for dealing with asynchronous Javascript calls. Video available at https://vimeo.com/75008316.

D1b1ae7d58da3d0cb7db07e308758e9e?s=128

The Guild

September 05, 2013
Tweet

Transcript

  1. d i g i t a l c r a

    f t s m a n s h i p Practical Promises
  2. None
  3. Matthijs Groen • Working @ Kabisa for 3 years •

    Currently developing using Rails and Backbone.js • I believe in the promise of web-applications • Building web applications since 19?? - Opera 5.11 - IE 5.5 - Dail-up modems
  4. Asynchrony is everywhere • Fetching data • Communicating with external

    components • Animations
  5. Callbacks

  6. Using callbacks with error handling handleData = (result) -> showMessage(result)

    try fetchData onSuccess: handleData onError: showAlternative catch e showMessage(e.message)
  7. Using callbacks with async flows handleData = (result) -> try

    showMessage(result); throw new Error('Broken') catch e # show animation and ask to reload showAnimation 'animation done', onSuccess: animationDone finally showMessage('ask feedback');
  8. Drawbacks of callbacks • Code reads backwards • Error management

    is hard to do • Hard to chain • Hard to explain • Chained callbacks will cause lot of nested code
  9. Promises

  10. Using promises (nested) fetchData('data fetched').then( (data) -> showMessage(data) throw new

    Error('broken') ).then( null, (e) -> showAnimation('animation done').then (result) -> showMessage result ).then -> showMessage('ask feedback')
  11. Promising code • Code reads in chronological order • Errors

    will be handled in a natural way (like exceptions) • Uniform way of handling asynchronous processes • Uniform way of handling between all Promises/A+ libraries • Return value will be a promise that delivers the return value or the exception asynchronously
  12. Creating a promise (using q.js) delay = (milliseconds) -> defer

    = Q.defer() setTimeout( -> defer.resolve() milliseconds ) defer.promise delay(500).then -> # and we're off!
  13. Creating a promise (using when.js) delay = (milliseconds) -> defer

    = `when`.defer() setTimeout( -> defer.resolve() milliseconds ) defer.promise delay(500).then -> # and we're off!
  14. Working with ‘others’

  15. jQuery defers # jQuery has no ‘real’ Promises/A promises #

    when.js allows wrapping to convert it to a # real one jDefer = $.ajax() `when(jDefer)`
  16. Wrapping callbacks defer = `when`.defer() callback = (arg) -> defer.resolver.resolve(arg)

    thirdPartyCall(arg1, arg2, callback) defer.promise
  17. Testing

  18. Chai-as-promised & Mocha-as- promised describe '#someAsyncMethod', -> it 'resolves if

    something succeeds', -> @someMethod().should.become('returnValue') it 'rejects if something fails', -> @someMethod().should.be .rejected.with(Error, 'message')
  19. Demo

  20. Questions?

  21. Thanks for listening!