javascript meetup - diciembre 2016files.meetup.com/5844892/promises+observables - js... · promise...
TRANSCRIPT
![Page 1: JavaScript Meetup - Diciembre 2016files.meetup.com/5844892/Promises+Observables - JS... · Promise A Promise represents a value which may be available now, or in the future, or never](https://reader030.vdocuments.net/reader030/viewer/2022040612/5edab5135d118654c423e92c/html5/thumbnails/1.jpg)
Promises and ObservablesJavaScript Meetup - Diciembre 2016
Matías Delgado | @matias_delgado
Santiago Ferreira | @san650
![Page 2: JavaScript Meetup - Diciembre 2016files.meetup.com/5844892/Promises+Observables - JS... · Promise A Promise represents a value which may be available now, or in the future, or never](https://reader030.vdocuments.net/reader030/viewer/2022040612/5edab5135d118654c423e92c/html5/thumbnails/2.jpg)
Promise
A Promise represents a value which may be available now, or in the future, or never.
A Promise is a proxy for a value not necessarily known when the promise is created. It allows you to associate handlers to an asynchronous action's eventual success value or failure reason.
![Page 3: JavaScript Meetup - Diciembre 2016files.meetup.com/5844892/Promises+Observables - JS... · Promise A Promise represents a value which may be available now, or in the future, or never](https://reader030.vdocuments.net/reader030/viewer/2022040612/5edab5135d118654c423e92c/html5/thumbnails/3.jpg)
ECMA Script Promise
![Page 4: JavaScript Meetup - Diciembre 2016files.meetup.com/5844892/Promises+Observables - JS... · Promise A Promise represents a value which may be available now, or in the future, or never](https://reader030.vdocuments.net/reader030/viewer/2022040612/5edab5135d118654c423e92c/html5/thumbnails/4.jpg)
http://caniuse.com/#search=promise
![Page 5: JavaScript Meetup - Diciembre 2016files.meetup.com/5844892/Promises+Observables - JS... · Promise A Promise represents a value which may be available now, or in the future, or never](https://reader030.vdocuments.net/reader030/viewer/2022040612/5edab5135d118654c423e92c/html5/thumbnails/5.jpg)
var promise = new Promise(function(resolve, reject) {
// call resolve or reject
});
promise.then(function(value) {
// work with value
}, function(error) {
// on error
});
Basic usage (I)
![Page 6: JavaScript Meetup - Diciembre 2016files.meetup.com/5844892/Promises+Observables - JS... · Promise A Promise represents a value which may be available now, or in the future, or never](https://reader030.vdocuments.net/reader030/viewer/2022040612/5edab5135d118654c423e92c/html5/thumbnails/6.jpg)
function get(url) { return new Promise(function(resolve, reject) { var req = new XMLHttpRequest();
req.open('GET', url); req.onload = function() { if (req.status == 200) { resolve(req.response); } else { reject(Error(req.statusText)); } }; req.onerror = function() { reject(Error("Network Error")); }; req.send(); });}
Basic usage (II)
![Page 7: JavaScript Meetup - Diciembre 2016files.meetup.com/5844892/Promises+Observables - JS... · Promise A Promise represents a value which may be available now, or in the future, or never](https://reader030.vdocuments.net/reader030/viewer/2022040612/5edab5135d118654c423e92c/html5/thumbnails/7.jpg)
function get(url) { return new Promise(function(resolve, reject) { var req = new XMLHttpRequest();
req.open('GET', url); req.onload = function() { if (req.status == 200) { resolve(req.response); } else { reject(Error(req.statusText)); } }; req.onerror = function() { reject(Error("Network Error")); }; req.send(); });}
Basic usage (III)
![Page 8: JavaScript Meetup - Diciembre 2016files.meetup.com/5844892/Promises+Observables - JS... · Promise A Promise represents a value which may be available now, or in the future, or never](https://reader030.vdocuments.net/reader030/viewer/2022040612/5edab5135d118654c423e92c/html5/thumbnails/8.jpg)
https://github.com/san650?tab=repositories&type=source
![Page 9: JavaScript Meetup - Diciembre 2016files.meetup.com/5844892/Promises+Observables - JS... · Promise A Promise represents a value which may be available now, or in the future, or never](https://reader030.vdocuments.net/reader030/viewer/2022040612/5edab5135d118654c423e92c/html5/thumbnails/9.jpg)
https://api.github.com/users/san650/repos
[ { "id": 40941202, "name": "ember-sokoban", ... }, { "id": 40941203, "name": "tajpado", ... }, ...]
![Page 10: JavaScript Meetup - Diciembre 2016files.meetup.com/5844892/Promises+Observables - JS... · Promise A Promise represents a value which may be available now, or in the future, or never](https://reader030.vdocuments.net/reader030/viewer/2022040612/5edab5135d118654c423e92c/html5/thumbnails/10.jpg)
get('https://api.github.com/users/san650/repos')
.then(function(response) {
var repos = JSON.parse(response);
console.log(repos.map(repo => repo.name));
});
Basic usage (IV)
![Page 11: JavaScript Meetup - Diciembre 2016files.meetup.com/5844892/Promises+Observables - JS... · Promise A Promise represents a value which may be available now, or in the future, or never](https://reader030.vdocuments.net/reader030/viewer/2022040612/5edab5135d118654c423e92c/html5/thumbnails/11.jpg)
![Page 12: JavaScript Meetup - Diciembre 2016files.meetup.com/5844892/Promises+Observables - JS... · Promise A Promise represents a value which may be available now, or in the future, or never](https://reader030.vdocuments.net/reader030/viewer/2022040612/5edab5135d118654c423e92c/html5/thumbnails/12.jpg)
¿Y si hay un error en la petición?
![Page 13: JavaScript Meetup - Diciembre 2016files.meetup.com/5844892/Promises+Observables - JS... · Promise A Promise represents a value which may be available now, or in the future, or never](https://reader030.vdocuments.net/reader030/viewer/2022040612/5edab5135d118654c423e92c/html5/thumbnails/13.jpg)
function get(url) { return new Promise(function(resolve, reject) { var req = new XMLHttpRequest();
req.open('GET', url); req.onload = function() { if (req.status == 200) { resolve(req.response); } else { reject(Error(req.statusText)); } }; req.onerror = function() { reject(Error("Network Error")); }; req.send(); });}
![Page 14: JavaScript Meetup - Diciembre 2016files.meetup.com/5844892/Promises+Observables - JS... · Promise A Promise represents a value which may be available now, or in the future, or never](https://reader030.vdocuments.net/reader030/viewer/2022040612/5edab5135d118654c423e92c/html5/thumbnails/14.jpg)
get('https://api.github.com/users/san650/repos') .then(function(response) { var repos = JSON.parse(response); console.log(repos.map(repo => repo.name)); }, function(error) { console.warn(error); });
Error handling (I)
![Page 15: JavaScript Meetup - Diciembre 2016files.meetup.com/5844892/Promises+Observables - JS... · Promise A Promise represents a value which may be available now, or in the future, or never](https://reader030.vdocuments.net/reader030/viewer/2022040612/5edab5135d118654c423e92c/html5/thumbnails/15.jpg)
get('https://api.github.com/users/san650/repos') .then(function(response) { var repos = JSON.parse(response); console.log(repos.map(repo => repo.name)); }) .catch(function(error) { console.warn(error); });
Error handling (II)
![Page 16: JavaScript Meetup - Diciembre 2016files.meetup.com/5844892/Promises+Observables - JS... · Promise A Promise represents a value which may be available now, or in the future, or never](https://reader030.vdocuments.net/reader030/viewer/2022040612/5edab5135d118654c423e92c/html5/thumbnails/16.jpg)
.catch(function(reason) {})
=
.then(undefined, function(reason) {})
Error handling (III)
![Page 17: JavaScript Meetup - Diciembre 2016files.meetup.com/5844892/Promises+Observables - JS... · Promise A Promise represents a value which may be available now, or in the future, or never](https://reader030.vdocuments.net/reader030/viewer/2022040612/5edab5135d118654c423e92c/html5/thumbnails/17.jpg)
get('https://api.github.com/users/san650/repos')
.then(function(response) {
return JSON.parse(response);
})
.then(function(repos) {
return repos.map(repo => repo.name);
})
.then(function(names) {
console.log(names);
}); Transforming values (I)
![Page 18: JavaScript Meetup - Diciembre 2016files.meetup.com/5844892/Promises+Observables - JS... · Promise A Promise represents a value which may be available now, or in the future, or never](https://reader030.vdocuments.net/reader030/viewer/2022040612/5edab5135d118654c423e92c/html5/thumbnails/18.jpg)
get('https://api.github.com/users/san650/repos') .then(JSON.parse) .then(function(repos) { return repos.map(repo => repo.name); }) .then(console.log);
Transforming values (II)
![Page 19: JavaScript Meetup - Diciembre 2016files.meetup.com/5844892/Promises+Observables - JS... · Promise A Promise represents a value which may be available now, or in the future, or never](https://reader030.vdocuments.net/reader030/viewer/2022040612/5edab5135d118654c423e92c/html5/thumbnails/19.jpg)
get('https://api.github.com/repos/san650/ceibo') .then(JSON.parse) .then(function(repo) { return get(repo.stargazers_url); }) .then(JSON.parse) .then(function(stars) { console.log(stars.length); });
Queuing async actions (I)
![Page 20: JavaScript Meetup - Diciembre 2016files.meetup.com/5844892/Promises+Observables - JS... · Promise A Promise represents a value which may be available now, or in the future, or never](https://reader030.vdocuments.net/reader030/viewer/2022040612/5edab5135d118654c423e92c/html5/thumbnails/20.jpg)
get('https://api.github.com/repos/san650/ceibo') .then(JSON.parse) .then(function(repo) { return get(repo.stargazers_url); }) .then(JSON.parse) .then(function(stars) { console.log(stars.length); });
Queuing async actions (II)
![Page 21: JavaScript Meetup - Diciembre 2016files.meetup.com/5844892/Promises+Observables - JS... · Promise A Promise represents a value which may be available now, or in the future, or never](https://reader030.vdocuments.net/reader030/viewer/2022040612/5edab5135d118654c423e92c/html5/thumbnails/21.jpg)
get('https://api.github.com/users/san650/repos') .then(function(response) { // ... then 1 }) .catch(function(error) { // ... catch 1 }) .then(function(message) { // ... then 2 });
Ejercicio para el lector
![Page 22: JavaScript Meetup - Diciembre 2016files.meetup.com/5844892/Promises+Observables - JS... · Promise A Promise represents a value which may be available now, or in the future, or never](https://reader030.vdocuments.net/reader030/viewer/2022040612/5edab5135d118654c423e92c/html5/thumbnails/22.jpg)
Then 1
get('...')
Catch 1Then 2
Unhandled errorDone
![Page 23: JavaScript Meetup - Diciembre 2016files.meetup.com/5844892/Promises+Observables - JS... · Promise A Promise represents a value which may be available now, or in the future, or never](https://reader030.vdocuments.net/reader030/viewer/2022040612/5edab5135d118654c423e92c/html5/thumbnails/23.jpg)
Promise.all([ get('https://api.github.com/repos/san650/ceibo'), get('https://api.github.com/repos/san650/ombu')]).then(function(responses) { // array of responses});
Promise.all(iterable)
![Page 24: JavaScript Meetup - Diciembre 2016files.meetup.com/5844892/Promises+Observables - JS... · Promise A Promise represents a value which may be available now, or in the future, or never](https://reader030.vdocuments.net/reader030/viewer/2022040612/5edab5135d118654c423e92c/html5/thumbnails/24.jpg)
Promise.race([ get('https://api.github.com/repos/san650/ceibo'), get('https://api.github.com/repos/san650/ombu')]).then(function(response) { // only one response});
Promise.race(iterable)
![Page 25: JavaScript Meetup - Diciembre 2016files.meetup.com/5844892/Promises+Observables - JS... · Promise A Promise represents a value which may be available now, or in the future, or never](https://reader030.vdocuments.net/reader030/viewer/2022040612/5edab5135d118654c423e92c/html5/thumbnails/25.jpg)
Promise.resolve('a dummy value');
Promise.resolve(value)
![Page 26: JavaScript Meetup - Diciembre 2016files.meetup.com/5844892/Promises+Observables - JS... · Promise A Promise represents a value which may be available now, or in the future, or never](https://reader030.vdocuments.net/reader030/viewer/2022040612/5edab5135d118654c423e92c/html5/thumbnails/26.jpg)
Promise.reject(Error('a failed promise'));
Promise.reject(reason)
![Page 27: JavaScript Meetup - Diciembre 2016files.meetup.com/5844892/Promises+Observables - JS... · Promise A Promise represents a value which may be available now, or in the future, or never](https://reader030.vdocuments.net/reader030/viewer/2022040612/5edab5135d118654c423e92c/html5/thumbnails/27.jpg)
ECMAScript Promise
● new Promise(function(resolve, reject))
● then, catch
● chaining
● Promise.all
● Promise.race
● Promise.resolve
● Promise.reject
![Page 28: JavaScript Meetup - Diciembre 2016files.meetup.com/5844892/Promises+Observables - JS... · Promise A Promise represents a value which may be available now, or in the future, or never](https://reader030.vdocuments.net/reader030/viewer/2022040612/5edab5135d118654c423e92c/html5/thumbnails/28.jpg)
RSVP.Promise
![Page 29: JavaScript Meetup - Diciembre 2016files.meetup.com/5844892/Promises+Observables - JS... · Promise A Promise represents a value which may be available now, or in the future, or never](https://reader030.vdocuments.net/reader030/viewer/2022040612/5edab5135d118654c423e92c/html5/thumbnails/29.jpg)
![Page 30: JavaScript Meetup - Diciembre 2016files.meetup.com/5844892/Promises+Observables - JS... · Promise A Promise represents a value which may be available now, or in the future, or never](https://reader030.vdocuments.net/reader030/viewer/2022040612/5edab5135d118654c423e92c/html5/thumbnails/30.jpg)
![Page 31: JavaScript Meetup - Diciembre 2016files.meetup.com/5844892/Promises+Observables - JS... · Promise A Promise represents a value which may be available now, or in the future, or never](https://reader030.vdocuments.net/reader030/viewer/2022040612/5edab5135d118654c423e92c/html5/thumbnails/31.jpg)
function get(url) { return new RSVP.Promise(function(resolve, reject) { var req = new XMLHttpRequest();
req.open('GET', url); req.onload = function() { if (req.status == 200) { resolve(req.response); } else { reject(Error(req.statusText)); } }; req.onerror = function() { reject(Error("Network Error")); }; req.send(); });}
Basic usage (I)
![Page 32: JavaScript Meetup - Diciembre 2016files.meetup.com/5844892/Promises+Observables - JS... · Promise A Promise represents a value which may be available now, or in the future, or never](https://reader030.vdocuments.net/reader030/viewer/2022040612/5edab5135d118654c423e92c/html5/thumbnails/32.jpg)
function get(url) { return new RSVP.Promise(function(resolve, reject) { var req = new XMLHttpRequest();
req.open('GET', url); req.onload = function() { if (req.status == 200) { resolve(req.response); } else { reject(Error(req.statusText)); } }; req.onerror = function() { reject(Error("Network Error")); }; req.send(); });}
Basic usage (II)
![Page 33: JavaScript Meetup - Diciembre 2016files.meetup.com/5844892/Promises+Observables - JS... · Promise A Promise represents a value which may be available now, or in the future, or never](https://reader030.vdocuments.net/reader030/viewer/2022040612/5edab5135d118654c423e92c/html5/thumbnails/33.jpg)
var deferred = RSVP.defer();
// ...deferred.promise // access the promise
// ...deferred.resolve();
Deferred (I)
![Page 34: JavaScript Meetup - Diciembre 2016files.meetup.com/5844892/Promises+Observables - JS... · Promise A Promise represents a value which may be available now, or in the future, or never](https://reader030.vdocuments.net/reader030/viewer/2022040612/5edab5135d118654c423e92c/html5/thumbnails/34.jpg)
var deferred = RSVP.defer();
btn.onclick = function() { deferred.resolve(42);};
deferred.promise.then(function(value) { console.log(`the answer to life the universe and everything is ${value}`);});
Deferred (II)
![Page 35: JavaScript Meetup - Diciembre 2016files.meetup.com/5844892/Promises+Observables - JS... · Promise A Promise represents a value which may be available now, or in the future, or never](https://reader030.vdocuments.net/reader030/viewer/2022040612/5edab5135d118654c423e92c/html5/thumbnails/35.jpg)
get('https://api.github.com/users/san650/repos') .then(function(response) { // process }) .catch(function(error) { // an error }) .finally(function() { // always runs });
finally
![Page 36: JavaScript Meetup - Diciembre 2016files.meetup.com/5844892/Promises+Observables - JS... · Promise A Promise represents a value which may be available now, or in the future, or never](https://reader030.vdocuments.net/reader030/viewer/2022040612/5edab5135d118654c423e92c/html5/thumbnails/36.jpg)
RSVP.hash({ ceibo: get('https://api.github.com/repos/san650/ceibo'), ombu: get('https://api.github.com/repos/san650/ombu')}).then(function(data) { // data.ceibo // data.ombu});
RSVP.hash
![Page 37: JavaScript Meetup - Diciembre 2016files.meetup.com/5844892/Promises+Observables - JS... · Promise A Promise represents a value which may be available now, or in the future, or never](https://reader030.vdocuments.net/reader030/viewer/2022040612/5edab5135d118654c423e92c/html5/thumbnails/37.jpg)
RSVP.hashSettled({ ceibo: get('https://api.github.com/repos/san650/ceibo'), ombu: get('https://api.github.com/repos/san650/ombu')}).then(function(data) { // data.ceibo -> { state: 'fulfilled', value: value } // data.ombu -> { state: 'rejected', reason: reason }});
RSVP.hashSettled
![Page 38: JavaScript Meetup - Diciembre 2016files.meetup.com/5844892/Promises+Observables - JS... · Promise A Promise represents a value which may be available now, or in the future, or never](https://reader030.vdocuments.net/reader030/viewer/2022040612/5edab5135d118654c423e92c/html5/thumbnails/38.jpg)
RSVP.allSettled([ get('https://api.github.com/repos/san650/ceibo'), get('https://api.github.com/repos/san650/ombu')]).then(function(responses) { // responses[0] -> { state: 'fulfilled', value: value } // responses[1] -> { state: 'rejected', reason: reason }});
RSVP.allSettled
![Page 39: JavaScript Meetup - Diciembre 2016files.meetup.com/5844892/Promises+Observables - JS... · Promise A Promise represents a value which may be available now, or in the future, or never](https://reader030.vdocuments.net/reader030/viewer/2022040612/5edab5135d118654c423e92c/html5/thumbnails/39.jpg)
RSVP.on('created', function(event) { // event.detail // event.label // ...});
RSVP.on('fulfilled', function(event) { // ...});
RSVP.on('rejected', function(event) { // ...});
Instrumentation
![Page 40: JavaScript Meetup - Diciembre 2016files.meetup.com/5844892/Promises+Observables - JS... · Promise A Promise represents a value which may be available now, or in the future, or never](https://reader030.vdocuments.net/reader030/viewer/2022040612/5edab5135d118654c423e92c/html5/thumbnails/40.jpg)
Demo ember-inspector
![Page 41: JavaScript Meetup - Diciembre 2016files.meetup.com/5844892/Promises+Observables - JS... · Promise A Promise represents a value which may be available now, or in the future, or never](https://reader030.vdocuments.net/reader030/viewer/2022040612/5edab5135d118654c423e92c/html5/thumbnails/41.jpg)
new RSVP.Promise(function(resolve, reject) {}, "a label");
RSVP.Promise.resolve('a value', 'a label');
RSVP.on('created', function(event) { // event.label});
Labelling
![Page 42: JavaScript Meetup - Diciembre 2016files.meetup.com/5844892/Promises+Observables - JS... · Promise A Promise represents a value which may be available now, or in the future, or never](https://reader030.vdocuments.net/reader030/viewer/2022040612/5edab5135d118654c423e92c/html5/thumbnails/42.jpg)
RSVP.on('error', function(reason, label) { if (label) { console.error(label); }
console.assert(false, reason);});
Unhandled errors
![Page 43: JavaScript Meetup - Diciembre 2016files.meetup.com/5844892/Promises+Observables - JS... · Promise A Promise represents a value which may be available now, or in the future, or never](https://reader030.vdocuments.net/reader030/viewer/2022040612/5edab5135d118654c423e92c/html5/thumbnails/43.jpg)
RSVP.Promise
● Deferred
● finally
● RSVP.hash
● RSVP.allSettled
● RSVP.hashSettled
● RSVP.on(...) instrumentation
● RSVP.on('error') unhandled errors
● labelling
![Page 44: JavaScript Meetup - Diciembre 2016files.meetup.com/5844892/Promises+Observables - JS... · Promise A Promise represents a value which may be available now, or in the future, or never](https://reader030.vdocuments.net/reader030/viewer/2022040612/5edab5135d118654c423e92c/html5/thumbnails/44.jpg)
Bluebird
![Page 45: JavaScript Meetup - Diciembre 2016files.meetup.com/5844892/Promises+Observables - JS... · Promise A Promise represents a value which may be available now, or in the future, or never](https://reader030.vdocuments.net/reader030/viewer/2022040612/5edab5135d118654c423e92c/html5/thumbnails/45.jpg)
![Page 46: JavaScript Meetup - Diciembre 2016files.meetup.com/5844892/Promises+Observables - JS... · Promise A Promise represents a value which may be available now, or in the future, or never](https://reader030.vdocuments.net/reader030/viewer/2022040612/5edab5135d118654c423e92c/html5/thumbnails/46.jpg)
![Page 47: JavaScript Meetup - Diciembre 2016files.meetup.com/5844892/Promises+Observables - JS... · Promise A Promise represents a value which may be available now, or in the future, or never](https://reader030.vdocuments.net/reader030/viewer/2022040612/5edab5135d118654c423e92c/html5/thumbnails/47.jpg)
get('https://api.github.com/repos/san650/ceibo') .timeout(100) .catch(Promise.TimeoutError, function() { // could not get response within 100ms }) .catch(function() { // different error });
timeout
![Page 48: JavaScript Meetup - Diciembre 2016files.meetup.com/5844892/Promises+Observables - JS... · Promise A Promise represents a value which may be available now, or in the future, or never](https://reader030.vdocuments.net/reader030/viewer/2022040612/5edab5135d118654c423e92c/html5/thumbnails/48.jpg)
get('https://api.github.com/repos/san650/ceibo') .timeout(100) .catch(Promise.TimeoutError, function() { // could not get response within 100ms }) .catch(function() { // different error });
Catch with "type matching"
![Page 49: JavaScript Meetup - Diciembre 2016files.meetup.com/5844892/Promises+Observables - JS... · Promise A Promise represents a value which may be available now, or in the future, or never](https://reader030.vdocuments.net/reader030/viewer/2022040612/5edab5135d118654c423e92c/html5/thumbnails/49.jpg)
Cancellation
function get(url) { return new Promise(function(resolve, reject, onCancel) { var xhr = new XMLHttpRequest(); ... onCancel(function() { xhr.abort(); }); });}
get('https://api.github.com/repos/san650/ceibo').cancel()
![Page 50: JavaScript Meetup - Diciembre 2016files.meetup.com/5844892/Promises+Observables - JS... · Promise A Promise represents a value which may be available now, or in the future, or never](https://reader030.vdocuments.net/reader030/viewer/2022040612/5edab5135d118654c423e92c/html5/thumbnails/50.jpg)
Y mil cosas más...
![Page 51: JavaScript Meetup - Diciembre 2016files.meetup.com/5844892/Promises+Observables - JS... · Promise A Promise represents a value which may be available now, or in the future, or never](https://reader030.vdocuments.net/reader030/viewer/2022040612/5edab5135d118654c423e92c/html5/thumbnails/51.jpg)
Problemas y futures
![Page 52: JavaScript Meetup - Diciembre 2016files.meetup.com/5844892/Promises+Observables - JS... · Promise A Promise represents a value which may be available now, or in the future, or never](https://reader030.vdocuments.net/reader030/viewer/2022040612/5edab5135d118654c423e92c/html5/thumbnails/52.jpg)
Problemas...
![Page 53: JavaScript Meetup - Diciembre 2016files.meetup.com/5844892/Promises+Observables - JS... · Promise A Promise represents a value which may be available now, or in the future, or never](https://reader030.vdocuments.net/reader030/viewer/2022040612/5edab5135d118654c423e92c/html5/thumbnails/53.jpg)
var promise = get('https://api.github.com/users/san650/repos');
btn.onclick = function() {
promise.cancel(); // nope :-(
};
Cancellation
![Page 54: JavaScript Meetup - Diciembre 2016files.meetup.com/5844892/Promises+Observables - JS... · Promise A Promise represents a value which may be available now, or in the future, or never](https://reader030.vdocuments.net/reader030/viewer/2022040612/5edab5135d118654c423e92c/html5/thumbnails/54.jpg)
var promise = new Promise(function(resolve, reject) {
// ...
}).then(function() {
// ...
}).then(function() {
// ...
}).then(function() {
// ...
}).then(function() {
// ...
}); Performance
![Page 55: JavaScript Meetup - Diciembre 2016files.meetup.com/5844892/Promises+Observables - JS... · Promise A Promise represents a value which may be available now, or in the future, or never](https://reader030.vdocuments.net/reader030/viewer/2022040612/5edab5135d118654c423e92c/html5/thumbnails/55.jpg)
get('https://api.github.com/users/san650/repos')
.then(function(response) {
return JSON.parse(response);
})
.then(function(repos) {
return Promise.all(...);
})
.then(function(values) {
console.log(values);
});
Inconsistencias, no es lo mismo retornar un valor que retornar una promesa
![Page 56: JavaScript Meetup - Diciembre 2016files.meetup.com/5844892/Promises+Observables - JS... · Promise A Promise represents a value which may be available now, or in the future, or never](https://reader030.vdocuments.net/reader030/viewer/2022040612/5edab5135d118654c423e92c/html5/thumbnails/56.jpg)
Problemas
● No se pueden cancelar
● No son lazy, la función executor se ejecuta siempre
● Performance
● Inconsistencias, no es lo mismo retornar un valor que retornar una promesa
![Page 57: JavaScript Meetup - Diciembre 2016files.meetup.com/5844892/Promises+Observables - JS... · Promise A Promise represents a value which may be available now, or in the future, or never](https://reader030.vdocuments.net/reader030/viewer/2022040612/5edab5135d118654c423e92c/html5/thumbnails/57.jpg)
Futures
![Page 58: JavaScript Meetup - Diciembre 2016files.meetup.com/5844892/Promises+Observables - JS... · Promise A Promise represents a value which may be available now, or in the future, or never](https://reader030.vdocuments.net/reader030/viewer/2022040612/5edab5135d118654c423e92c/html5/thumbnails/58.jpg)
Futures (Fluture)
Much like Promises, Futures represent the value arising from the success or failure of an asynchronous operation (I/O).
Though unlike Promises Futures are lazy and monadic by design. They conform to the Fantasy Land algebraic JavaScript specification.
![Page 59: JavaScript Meetup - Diciembre 2016files.meetup.com/5844892/Promises+Observables - JS... · Promise A Promise represents a value which may be available now, or in the future, or never](https://reader030.vdocuments.net/reader030/viewer/2022040612/5edab5135d118654c423e92c/html5/thumbnails/59.jpg)
![Page 60: JavaScript Meetup - Diciembre 2016files.meetup.com/5844892/Promises+Observables - JS... · Promise A Promise represents a value which may be available now, or in the future, or never](https://reader030.vdocuments.net/reader030/viewer/2022040612/5edab5135d118654c423e92c/html5/thumbnails/60.jpg)
![Page 61: JavaScript Meetup - Diciembre 2016files.meetup.com/5844892/Promises+Observables - JS... · Promise A Promise represents a value which may be available now, or in the future, or never](https://reader030.vdocuments.net/reader030/viewer/2022040612/5edab5135d118654c423e92c/html5/thumbnails/61.jpg)
https://github.com/Avaq/Fluture/wiki/Comparison-to-Promises
new Promise(function(resolve, reject) { resolve('san650/repos');}).then(function(value) { return `https://api.github.com/users/${value}`;}.then(function(url) { return get(url); // returns a new Promise}).then(function(repos) { JSON.parse(repos).map(repo => console.log(repo.name));}, console.error);
![Page 62: JavaScript Meetup - Diciembre 2016files.meetup.com/5844892/Promises+Observables - JS... · Promise A Promise represents a value which may be available now, or in the future, or never](https://reader030.vdocuments.net/reader030/viewer/2022040612/5edab5135d118654c423e92c/html5/thumbnails/62.jpg)
https://github.com/Avaq/Fluture/wiki/Comparison-to-Promises
Future(function(reject, resolve) { resolve('san650/repos');}).map(function(value) { return `https://api.github.com/users/${value}`;}).chain(function(url) { return get(url); // returns a new Future}).fork(console.error, function(repos) { JSON.parse(repos).map(repo => console.log(repo.name));});
![Page 63: JavaScript Meetup - Diciembre 2016files.meetup.com/5844892/Promises+Observables - JS... · Promise A Promise represents a value which may be available now, or in the future, or never](https://reader030.vdocuments.net/reader030/viewer/2022040612/5edab5135d118654c423e92c/html5/thumbnails/63.jpg)
Fin primera parte...
![Page 64: JavaScript Meetup - Diciembre 2016files.meetup.com/5844892/Promises+Observables - JS... · Promise A Promise represents a value which may be available now, or in the future, or never](https://reader030.vdocuments.net/reader030/viewer/2022040612/5edab5135d118654c423e92c/html5/thumbnails/64.jpg)
Observables
![Page 65: JavaScript Meetup - Diciembre 2016files.meetup.com/5844892/Promises+Observables - JS... · Promise A Promise represents a value which may be available now, or in the future, or never](https://reader030.vdocuments.net/reader030/viewer/2022040612/5edab5135d118654c423e92c/html5/thumbnails/65.jpg)
¿Qué son los Observables?
![Page 66: JavaScript Meetup - Diciembre 2016files.meetup.com/5844892/Promises+Observables - JS... · Promise A Promise represents a value which may be available now, or in the future, or never](https://reader030.vdocuments.net/reader030/viewer/2022040612/5edab5135d118654c423e92c/html5/thumbnails/66.jpg)
Patrón Observer
Se agregan los eventos:
● onError
● onComplete
![Page 67: JavaScript Meetup - Diciembre 2016files.meetup.com/5844892/Promises+Observables - JS... · Promise A Promise represents a value which may be available now, or in the future, or never](https://reader030.vdocuments.net/reader030/viewer/2022040612/5edab5135d118654c423e92c/html5/thumbnails/67.jpg)
Ejemplo con RxJS
let observable = Observable.create((observer) => { setTimeout(() => { observer.onNext(1891); // onComplete, onError }, 500);});
observable.subscribe((value) => { ...});
![Page 68: JavaScript Meetup - Diciembre 2016files.meetup.com/5844892/Promises+Observables - JS... · Promise A Promise represents a value which may be available now, or in the future, or never](https://reader030.vdocuments.net/reader030/viewer/2022040612/5edab5135d118654c423e92c/html5/thumbnails/68.jpg)
Ejemplo con RxJS
let observable = Observable.create((observer) => { setTimeout(() => { observer.onNext(1891); // onComplete, onError }, 500);});
observable.subscribe((value) => { ...});
![Page 69: JavaScript Meetup - Diciembre 2016files.meetup.com/5844892/Promises+Observables - JS... · Promise A Promise represents a value which may be available now, or in the future, or never](https://reader030.vdocuments.net/reader030/viewer/2022040612/5edab5135d118654c423e92c/html5/thumbnails/69.jpg)
Ejemplo con RxJS
let observable = Rx.Observable.create((observer) => { setTimeout(() => { observer.onNext(1891); // onComplete, onError }, 500);});
observable.subscribe((value) => { ...});
![Page 70: JavaScript Meetup - Diciembre 2016files.meetup.com/5844892/Promises+Observables - JS... · Promise A Promise represents a value which may be available now, or in the future, or never](https://reader030.vdocuments.net/reader030/viewer/2022040612/5edab5135d118654c423e92c/html5/thumbnails/70.jpg)
Promises recargadas
![Page 71: JavaScript Meetup - Diciembre 2016files.meetup.com/5844892/Promises+Observables - JS... · Promise A Promise represents a value which may be available now, or in the future, or never](https://reader030.vdocuments.net/reader030/viewer/2022040612/5edab5135d118654c423e92c/html5/thumbnails/71.jpg)
Múltiples valores
● Los Observables pueden devolver múltiples valores durante cierto periodo de tiempo.
● Ideal para trabajar con datos en tiempo real, eventos, o streams en general.
![Page 72: JavaScript Meetup - Diciembre 2016files.meetup.com/5844892/Promises+Observables - JS... · Promise A Promise represents a value which may be available now, or in the future, or never](https://reader030.vdocuments.net/reader030/viewer/2022040612/5edab5135d118654c423e92c/html5/thumbnails/72.jpg)
Cancelablelet observable = Rx.Observable.create((observer) => { let id = setInterval(() => { observer.onNext(1891); }, 500);
// clean up return () => { console.log("disposed"); clearTimeout(id); };});
let disposable = source.subscribe((value) => { // ...});
disposable.dispose();
![Page 73: JavaScript Meetup - Diciembre 2016files.meetup.com/5844892/Promises+Observables - JS... · Promise A Promise represents a value which may be available now, or in the future, or never](https://reader030.vdocuments.net/reader030/viewer/2022040612/5edab5135d118654c423e92c/html5/thumbnails/73.jpg)
Cancelablelet observable = Rx.Observable.create((observer) => { let id = setInterval(() => { observer.onNext(1891); }, 500);
// clean up return () => { console.log("disposed"); clearTimeout(id); };});
let disposable = source.subscribe((value) => { // ...});
disposable.dispose();
![Page 74: JavaScript Meetup - Diciembre 2016files.meetup.com/5844892/Promises+Observables - JS... · Promise A Promise represents a value which may be available now, or in the future, or never](https://reader030.vdocuments.net/reader030/viewer/2022040612/5edab5135d118654c423e92c/html5/thumbnails/74.jpg)
Cold vs Hot Observables
![Page 75: JavaScript Meetup - Diciembre 2016files.meetup.com/5844892/Promises+Observables - JS... · Promise A Promise represents a value which may be available now, or in the future, or never](https://reader030.vdocuments.net/reader030/viewer/2022040612/5edab5135d118654c423e92c/html5/thumbnails/75.jpg)
Cold: Lazy y repetibles
let observable = Rx.Observable.create((observer) => { // Not executed setTimeout(() => { observer.onNext( 1891); }, 500);});
// observable.subscribe((value) => {// ...// });
![Page 76: JavaScript Meetup - Diciembre 2016files.meetup.com/5844892/Promises+Observables - JS... · Promise A Promise represents a value which may be available now, or in the future, or never](https://reader030.vdocuments.net/reader030/viewer/2022040612/5edab5135d118654c423e92c/html5/thumbnails/76.jpg)
Hot Observables
● Emiten eventos incluso sin suscriptores● No repetibles● Ejemplo: eventos del DOM
![Page 77: JavaScript Meetup - Diciembre 2016files.meetup.com/5844892/Promises+Observables - JS... · Promise A Promise represents a value which may be available now, or in the future, or never](https://reader030.vdocuments.net/reader030/viewer/2022040612/5edab5135d118654c423e92c/html5/thumbnails/77.jpg)
Basado en streams
![Page 78: JavaScript Meetup - Diciembre 2016files.meetup.com/5844892/Promises+Observables - JS... · Promise A Promise represents a value which may be available now, or in the future, or never](https://reader030.vdocuments.net/reader030/viewer/2022040612/5edab5135d118654c423e92c/html5/thumbnails/78.jpg)
let source = Observable.fromEvent(myInput, "keyup") .pluck("target", "value") .filter(value => value.length >= 3) .debounceTime(500) .mergeMap(term => search(term)) .subscribe( data => { console.log("Subscribe: ", data); }, error => { console.log("Error: ", error); });
![Page 79: JavaScript Meetup - Diciembre 2016files.meetup.com/5844892/Promises+Observables - JS... · Promise A Promise represents a value which may be available now, or in the future, or never](https://reader030.vdocuments.net/reader030/viewer/2022040612/5edab5135d118654c423e92c/html5/thumbnails/79.jpg)
let source = Observable.fromEvent(myInput, "keyup") .pluck("target", "value") .filter(value => value.length >= 3) .debounceTime(500) .mergeMap(term => search(term)) .subscribe( data => { console.log("Subscribe: ", data); }, error => { console.log("Error: ", error); });
![Page 80: JavaScript Meetup - Diciembre 2016files.meetup.com/5844892/Promises+Observables - JS... · Promise A Promise represents a value which may be available now, or in the future, or never](https://reader030.vdocuments.net/reader030/viewer/2022040612/5edab5135d118654c423e92c/html5/thumbnails/80.jpg)
let source = Observable.fromEvent(myInput, "keyup") .pluck("target", "value") .filter(value => value.length >= 3) .debounceTime(500) .mergeMap(term => search(term)) .subscribe( data => { console.log("Subscribe: ", data); }, error => { console.log("Error: ", error); });
![Page 81: JavaScript Meetup - Diciembre 2016files.meetup.com/5844892/Promises+Observables - JS... · Promise A Promise represents a value which may be available now, or in the future, or never](https://reader030.vdocuments.net/reader030/viewer/2022040612/5edab5135d118654c423e92c/html5/thumbnails/81.jpg)
let source = Observable.fromEvent(myInput, "keyup") .pluck("target", "value") .filter(value => value.length >= 3) .debounceTime(500) .mergeMap(term => search(term)) .subscribe( data => { console.log("Subscribe: ", data); }, error => { console.log("Error: ", error); });
![Page 82: JavaScript Meetup - Diciembre 2016files.meetup.com/5844892/Promises+Observables - JS... · Promise A Promise represents a value which may be available now, or in the future, or never](https://reader030.vdocuments.net/reader030/viewer/2022040612/5edab5135d118654c423e92c/html5/thumbnails/82.jpg)
let source = Observable.fromEvent(myInput, "keyup") .pluck("target", "value") .filter(value => value.length >= 3) .debounceTime(500) .mergeMap(term => search(term)) .subscribe( data => { console.log("Subscribe: ", data); }, error => { console.log("Error: ", error); });
![Page 83: JavaScript Meetup - Diciembre 2016files.meetup.com/5844892/Promises+Observables - JS... · Promise A Promise represents a value which may be available now, or in the future, or never](https://reader030.vdocuments.net/reader030/viewer/2022040612/5edab5135d118654c423e92c/html5/thumbnails/83.jpg)
let source = Observable.fromEvent(myInput, "keyup") .pluck("target", "value") .filter(value => value.length >= 3) .debounceTime(500) .mergeMap(term => search(term)) .subscribe( data => { console.log("Subscribe: ", data); }, error => { console.log("Error: ", error); });
![Page 84: JavaScript Meetup - Diciembre 2016files.meetup.com/5844892/Promises+Observables - JS... · Promise A Promise represents a value which may be available now, or in the future, or never](https://reader030.vdocuments.net/reader030/viewer/2022040612/5edab5135d118654c423e92c/html5/thumbnails/84.jpg)
let source = Observable.fromEvent(myInput, "keyup") .pluck("target", "value") .filter(value => value.length >= 3) .debounceTime(500) .mergeMap(term => search(term)) .subscribe( data => { console.log("Subscribe: ", data); }, error => { console.log("Error: ", error); });
![Page 85: JavaScript Meetup - Diciembre 2016files.meetup.com/5844892/Promises+Observables - JS... · Promise A Promise represents a value which may be available now, or in the future, or never](https://reader030.vdocuments.net/reader030/viewer/2022040612/5edab5135d118654c423e92c/html5/thumbnails/85.jpg)
Unificación de modelos
![Page 86: JavaScript Meetup - Diciembre 2016files.meetup.com/5844892/Promises+Observables - JS... · Promise A Promise represents a value which may be available now, or in the future, or never](https://reader030.vdocuments.net/reader030/viewer/2022040612/5edab5135d118654c423e92c/html5/thumbnails/86.jpg)
● Se pueden crear Observables a partir de:○ Llamadas ajax○ Eventos del DOM○ Workers
![Page 87: JavaScript Meetup - Diciembre 2016files.meetup.com/5844892/Promises+Observables - JS... · Promise A Promise represents a value which may be available now, or in the future, or never](https://reader030.vdocuments.net/reader030/viewer/2022040612/5edab5135d118654c423e92c/html5/thumbnails/87.jpg)
Observables? RX?
● Propuesto para agregar al standard● RxJS es una implementación
![Page 88: JavaScript Meetup - Diciembre 2016files.meetup.com/5844892/Promises+Observables - JS... · Promise A Promise represents a value which may be available now, or in the future, or never](https://reader030.vdocuments.net/reader030/viewer/2022040612/5edab5135d118654c423e92c/html5/thumbnails/88.jpg)
RxMarbles
http://reactivex.io/documentation/operators/debounce.html
![Page 89: JavaScript Meetup - Diciembre 2016files.meetup.com/5844892/Promises+Observables - JS... · Promise A Promise represents a value which may be available now, or in the future, or never](https://reader030.vdocuments.net/reader030/viewer/2022040612/5edab5135d118654c423e92c/html5/thumbnails/89.jpg)
![Page 90: JavaScript Meetup - Diciembre 2016files.meetup.com/5844892/Promises+Observables - JS... · Promise A Promise represents a value which may be available now, or in the future, or never](https://reader030.vdocuments.net/reader030/viewer/2022040612/5edab5135d118654c423e92c/html5/thumbnails/90.jpg)
![Page 91: JavaScript Meetup - Diciembre 2016files.meetup.com/5844892/Promises+Observables - JS... · Promise A Promise represents a value which may be available now, or in the future, or never](https://reader030.vdocuments.net/reader030/viewer/2022040612/5edab5135d118654c423e92c/html5/thumbnails/91.jpg)
+140 operadores
![Page 92: JavaScript Meetup - Diciembre 2016files.meetup.com/5844892/Promises+Observables - JS... · Promise A Promise represents a value which may be available now, or in the future, or never](https://reader030.vdocuments.net/reader030/viewer/2022040612/5edab5135d118654c423e92c/html5/thumbnails/92.jpg)
Demo Time!
![Page 93: JavaScript Meetup - Diciembre 2016files.meetup.com/5844892/Promises+Observables - JS... · Promise A Promise represents a value which may be available now, or in the future, or never](https://reader030.vdocuments.net/reader030/viewer/2022040612/5edab5135d118654c423e92c/html5/thumbnails/93.jpg)
Resumiendo...
● Es el patrón Observer bien hecho● Promises recargadas● Trabaja de streams● Unificación de modelos (ajax, eventos, workers)
![Page 94: JavaScript Meetup - Diciembre 2016files.meetup.com/5844892/Promises+Observables - JS... · Promise A Promise represents a value which may be available now, or in the future, or never](https://reader030.vdocuments.net/reader030/viewer/2022040612/5edab5135d118654c423e92c/html5/thumbnails/94.jpg)
¿Preguntas?
![Page 95: JavaScript Meetup - Diciembre 2016files.meetup.com/5844892/Promises+Observables - JS... · Promise A Promise represents a value which may be available now, or in the future, or never](https://reader030.vdocuments.net/reader030/viewer/2022040612/5edab5135d118654c423e92c/html5/thumbnails/95.jpg)
Enlaces (observables)
● https://medium.com/@benlesh/hot-vs-cold-observables-f8094ed53339#.e8e9uecgy
● http://reactivex.io/documentation/observable.html● https://github.com/tc39/proposal-observable● http://blog.thoughtram.io/angular/2016/06/16/cold-vs-hot-observab
les.html#hot-vs-cold-observables● https://github.com/Reactive-Extensions/RxJS/tree/master/doc/api/
core/operators● https://scotch.io/tutorials/angular-2-http-requests-with-observables● http://rxmarbles.com● https://gist.github.com/staltz/868e7e9bc2a7b8c1f754
![Page 96: JavaScript Meetup - Diciembre 2016files.meetup.com/5844892/Promises+Observables - JS... · Promise A Promise represents a value which may be available now, or in the future, or never](https://reader030.vdocuments.net/reader030/viewer/2022040612/5edab5135d118654c423e92c/html5/thumbnails/96.jpg)
Enlaces (promises)
● https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise
● https://github.com/tildeio/rsvp.js/● http://bluebirdjs.com/docs/getting-started.html● https://github.com/Avaq/Fluture● https://github.com/Avaq/Fluture/wiki/Comparison-to-Promises
![Page 97: JavaScript Meetup - Diciembre 2016files.meetup.com/5844892/Promises+Observables - JS... · Promise A Promise represents a value which may be available now, or in the future, or never](https://reader030.vdocuments.net/reader030/viewer/2022040612/5edab5135d118654c423e92c/html5/thumbnails/97.jpg)
Thanks!
![Page 98: JavaScript Meetup - Diciembre 2016files.meetup.com/5844892/Promises+Observables - JS... · Promise A Promise represents a value which may be available now, or in the future, or never](https://reader030.vdocuments.net/reader030/viewer/2022040612/5edab5135d118654c423e92c/html5/thumbnails/98.jpg)
![Page 99: JavaScript Meetup - Diciembre 2016files.meetup.com/5844892/Promises+Observables - JS... · Promise A Promise represents a value which may be available now, or in the future, or never](https://reader030.vdocuments.net/reader030/viewer/2022040612/5edab5135d118654c423e92c/html5/thumbnails/99.jpg)
![Page 100: JavaScript Meetup - Diciembre 2016files.meetup.com/5844892/Promises+Observables - JS... · Promise A Promise represents a value which may be available now, or in the future, or never](https://reader030.vdocuments.net/reader030/viewer/2022040612/5edab5135d118654c423e92c/html5/thumbnails/100.jpg)
![Page 101: JavaScript Meetup - Diciembre 2016files.meetup.com/5844892/Promises+Observables - JS... · Promise A Promise represents a value which may be available now, or in the future, or never](https://reader030.vdocuments.net/reader030/viewer/2022040612/5edab5135d118654c423e92c/html5/thumbnails/101.jpg)
@EmberMontevideo
![Page 102: JavaScript Meetup - Diciembre 2016files.meetup.com/5844892/Promises+Observables - JS... · Promise A Promise represents a value which may be available now, or in the future, or never](https://reader030.vdocuments.net/reader030/viewer/2022040612/5edab5135d118654c423e92c/html5/thumbnails/102.jpg)
@angularMVD