Observables como abstracción ideal para desarrollar aplicaciones asíncronas en JavaScript

eventos.js

window.addEventListener('click', function (e) {
  // Haz algo cuando se haga un click 
});

setInterval(function () {
  // Haz algo a cada segundo
}, 1000);

var ajax = new XMLHttpRequest();
ajax.addEventListener('load' function (e) {
  // Haz algo quando se termine de recivir la respuesta
})
ajax.open('GET', 'https://example.com/');
ajax.send();

var app = new App();
$(app).on('hello', function(e) {
  console.log(e.target.hello); // 'world!' 
});
$(app).trigger('hello');

function App () {
  this.hello = 'world!';
}

problemas-eventos.js

var list = [1,2,3];

// Ejecuta operaciones asíncronas en paralelo a lo Rambo
for (var counter = 0; counter < list.length; counter++) {
  setTimeout(function (count) {
    console.log(list[count]);
    if (count === list.length - 1) {
      // Sinaliza cuando todas las operaciones se han completado
      console.log('All async operations completed!'); 
    }
  }, 1000, counter);
}

var list = [1,2,3];

// Ejecuta operaciones asíncronas en serie a lo Rambo
function asyncOperation (counter) {
  setTimeout(function (count) {
    console.log(list[count]);
    if (count === list.length - 1) {
      // Sinaliza cuando todas las operaciones han completado.
      console.log('All async operations completed!'); 
    } else {
      asyncOperation(counter + 1);
    }
  }, 1000, counter);
}

asyncOperation(0);

problemas-promesas.js

var app = {};

$(app).on('event', eventHandler);

$(app).trigger('event', 'a'); // 'a'
$(app).trigger('event', 'b'); // 'b'
$(app).trigger('event', 'c'); // 'c' 

$(app).off('event', eventHandler);

// No hay handler registrado al evento
// asi que no produce ningún resultado.
$(app).trigger('event', 'd'); 

promiseEventHandler().then(function (result) {
  var element = createElement(result);
  document.body.appendChild(element);
});

$(app).trigger('event', 'a'); // 'a'
$(app).trigger('event', 'b'); // no tiene resultado
$(app).trigger('event', 'c'); // no tiene resultado

function promiseEventHandler() {
  return new Promise (function(resolve, reject) {
    $(app).on('event', function (event, payload) {
      // Se va a ejecutar cada vez que 'event' sea emitido
      // sin embargo la promesa se resolverá solamente una vez.
      resolve(payload);
    });
  });
}

function eventHandler (event, payload) {
  var element = createElement(payload);
  document.body.appendChild(element);
}

function createElement(content) {
  var element = document.createElement('div');
  element.innerText = content;
  return element;
}

promesas.js

const inTheFuture = (input) => new Promise((resolve, reject) => setTimeout(resolve, 1000, input));

// Ejecuta operaciones asíncronas en serie
inTheFuture('a')
  .then(result => { console.log(result); return inTheFuture('b'); }) // 'a'
  .then(result => { console.log(result); return inTheFuture('c'); }) // 'b'
  .then(console.log); // 'c'

// Ejecuta operaciones asíncronas en paralelo
Promise.all([
  inTheFuture('a'), 
  inTheFuture('b'), 
  inTheFuture('c')
]).then(console.log); // ['a', 'b', 'c']