Decoupling events and applications logic

Promises provide an efficient way to decouple the events and application logic. This makes the implementation of events and application logic easier to build and maintenance also saleable.

A simple way to show how promises decouple events and business logic

The significance of durability in promises is that it's not an "EventEmitter", but can be converted into one by intelligent implementation. But then again, it would be a crippled one.

Promises as event emitters

The problem in using promises as an event emitter is it's composition. It's the progression events in promises that cannot compose very well with EventEmitter. Promises chain and compose whereas events, on the other hand, are unable to do so. An implementation of Q library is discarding the progression in favor of estimation in v2. This is why progression was never included in ECMAScript 6. We will learn a great deal about a few of these emerging technologies in Chapter 9, JavaScript – The Future Is Now.

Coming back to our topic of how promises is decoupling events and applications logic, we can use events to trigger the resolution/failure of promises by passing the value at the same time, which allows us to decouple. Here is the code:

var def, getData, updateUI, resolvePromise;
// The Promise and handler
def = new $.Deferred();

updateUI = function (data) {
    $('p').html('I got the data!');
    $('p').html(data);
};
getData = $.ajax({
          url: '/echo/html/', 
          data: {
              html: 'testhtml', 
              delay: 3
          }, 
          type: 'post'
    })
    .done(function(resp) {
        return resp;
    })
    .fail(function (error) {
        throw new Error("Error getting the data");
    });


// Event Handler
resolvePromise = function (ev) {
    ev.preventDefault();
    def.resolve(ev.type, this);
    return def.promise();
};

// Bind the Event
$(document).on('click', 'button', resolvePromise);

def.then(function() {
    return getData;   
})
.then(function(data) {
    updateUI(data);
})
.done(function(promiseValue, el) {
    console.log('The promise was resolved by: ', promiseValue, ' on ', el);
});
// Console output: The promise was resolved by: click on <button> </button>

The reference of the following code is available at http://jsfiddle.net/cwebbdesign/NEssP/2.