2012-11-02

Back from Callback Hell with Bacon.js


I've heard the words Callback Hell quite a many times lately. I'll take it that you know what I'm talking about. Just gonna briefly show how to get Back from Hell with bacon.js...
So, what about if you want to perform two independent AJAX calls and do something with the values of both? You might
$.ajax("/cats").done(function(cats) {
  $.ajax("/dogs").done(function(dogs) {
    doStuffWithCatsAndDogs(cats, dogs)
  })
})
That's a minor callback hell allready. How about
var cats = Bacon.fromPromise($.ajax("/cats")
var dogs = Bacon.fromPromise($.ajax("/dogs")
Bacon.combineAsArray(cats, dogs).onValues(doStuffWithCatsAndDogs)
Know what? Your AJAX just got parallel, too. Maybe we should refactor this too:
function ajax(url) { return Bacon.fromPromise($.ajax(url)) }
Bacon.combineAsArray(ajax("/cats"), ajax("/dogs")).onValues(doStuffWithCatsAndDogs)
That's it.
Now if you wanted both cats and dogs and then do something with both and something based on an AJAX query triggered by user input... You would do
$.ajax("/cats").done(function(cats) {
  $.ajax("/dogs").done(function(dogs) {
    $("input.name").onKeyUp(function() {
      $.ajax("/stuff/" + $("input.name").val()).done(function(stuff) {
        var allTheStuff = {
          cats: cats,
          dogs: dogs,
          stuff: stuff
        }
        doStuff(allTheStuff)
      })
    })
  })
})
That's some serious callback hell. See any problems? For one, the user input won't be captured until both AJAX calls (cats, dogs) are completed, and they are not done in parallel, either. Further, the AJAX calls triggered by user input do not necessarily return in the same order as they are issued, so the last call to "doStuff" might be based on stale data. That might prove hard to fix?
With Bacon, you could do
function ajax(url) { return Bacon.fromPromise($.ajax(url)) }
function urlForStuff(name) { return "/stuff/" + name }

var name = Bacon.UI.textFieldValue($("input.name"))

Bacon.combineTemplate({
  cats: ajax("/cats"),
  dogs: ajax("/dogs",
  stuff: name.map(urlForStuff).ajax()
}).onValue(doStuff)
Now you'll start capturing user input immediately. Your initial AJAX calls are executed in parallel and combined with the latest value returned by the "/stuff/*" AJAX when all values are available.
And the ".ajax()" call actually ensures that the results are based on latest user input.

4 comments:

  1. Could you provide the .ajax() implementation?

    ReplyDelete
    Replies
    1. Masse, https://github.com/raimohanska/Bacon.UI.js

      Sorry for the delay :( The amount of spam makes it a bit hard to monitor real comments on Blogspot.

      Delete
  2. I love bacon, but I don't think the comparison to promises are fair.

    In your example, you are using promises as if they are callbacks. Using promises that way defeats the purposes of promises.

    asyncOp1()
    .then(async2)
    .then(async3)
    .then(async4, logFailure);

    The other thing I think the post missed is how great promises are for dealing with parallel code. Here's an example:

    doStuff = $.when(getCats, getDogs, getStuff).then(getDoStuff);


    Both Bacon and promises offer similar control flow structures, so either way is okay by me, but I don't think you gave promises a fair shake.

    Btw, I love your blog, your earlier posts on Bacon convinced me to use it in my next application.

    ReplyDelete
    Replies
    1. You're absolutely right regarding Promises. Promises indeed provide a very similar interface to Bacon.js streams and allow you to compose data from asynchronous sources in a nice way.

      What I didn't know was that you can use $.when() to compose parallel promises like that.

      The main difference between Promises and EventStreams is that the latter may contain multiple values over time. For many applications (including AJAX), they provide roughly equivalent power of expression.

      And my apologies for the delay.

      Delete