Promise pattern
22 likes8,437 views
Promise patterns provide an asynchronous programming model for JavaScript using promises. Promises allow separating business logic from asynchronous API providers by defining a standard asynchronous API. Common patterns are callbacks, events, and promises. Promises improve on callbacks and events by allowing parallel asynchronous operations, error handling, and progress tracking in a standardized way.
![API Providers
function load_asset(path) {
return new Promise(function(deferred) {
$.get(path, deferred.done);
});
}
function choose_name() {
var valid = /^[a-zA-Z0-9_]+$/;
return new Promise(function(deferred) {
$('form').submit(function() {
if(valid.test($('.name).val()))
deferred.done();
});
});
}](https://image.slidesharecdn.com/promisepattern-120708080519-phpapp02/85/Promise-pattern-13-320.jpg)
Promise pattern
- 1. Promise Pattern for asynchronous JavaScript Sebastiaan Deckers — 2012 — BeermatesJS Singapore
- 2. What is asynchronous programming? Are we there yet? Are we there yet? Are we there yet? Are we there yet? ...
- 3. When do you use asynchronous programming?
- 4. Performance User input, network I/O (AJAX), computational processing, rendering, ...
- 5. KISS (keep it simple, stupid!) Separation of concerns, Less boilerplate, Focus on business logic
- 6. Asynchronous Patterns Callbacks, Events, Promises
- 7. Callbacks $.get('foobar.html', function(data) { $('.result').html(data); alert('Load was performed.'); });
- 8. Problem? ● Only one callback at a time ● Nested callbacks: turtles all the way down
- 9. Events $('a.button') .on('click', function(event) { // do something... }) .on('click', function(event) { // ... and do something else. });
- 10. Problem? ● Hard to synchronise multiple events ● No standard APIs
- 11. Promises Asynchronous API Provider Business Logic Promise Asynchronous API Provider Asynchronous API Provider
- 12. Business Logic (new Promise) .when(load_asset('maps/lobby.bsp')) .when(load_asset('music/intro.ogg')) .when(choose_name()) .then(function() { // everything loaded, start the game... });
- 13. API Providers function load_asset(path) { return new Promise(function(deferred) { $.get(path, deferred.done); }); } function choose_name() { var valid = /^[a-zA-Z0-9_]+$/; return new Promise(function(deferred) { $('form').submit(function() { if(valid.test($('.name).val())) deferred.done(); }); }); }
- 14. CommonJS Promise/* http://wiki.commonjs.org/wiki/Promises
- 15. The Basics Business Logic: ● when ● then API Provider: ● deferred.done
- 16. The Tricks .when().when() // parallel chaining .then().then() // multiple listeners .asap() // Race condition // Edge cases .deferred.failure(reason) .then(success, error) // Progress tracking .deferred.progress(amount) .then(success, error, progress)