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.

Transcript

1. d i g i t a l c r a f t s m a n s h i p Practical Promises
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!