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.

7 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
  3. Nice looking sites and great work. Pretty nice information. it has a better understanding. thanks for spending time on it.


    Hadoop Training Institute in Noida

    Best Hadoop Training in Noida

    ReplyDelete
  4. It was excellent and really informative.I also like composing something if my downtime. So I could find out something from your write-up. Thanks.

    Best BCA Colleges in Noida

    ReplyDelete
  5. أفضل شركه نقل عفش بالرياض
    اليكم افضل النصائح شراء اثاث مستعمل التي تقدم لكم المساعدة في علي نقل العفش بأسهل الطرق المتبعة ودون اي خسائر او تلفيات لعفشك او اجهزتك كما ان تقوم شركات نقل الاثاث بالعديد من الطرق والتنوعة والتي لها اختلاف وطابع خاص عن باقي الشركات في نقل الاثاث فهناك العديد من الشركات التي تقوم بنقل الاثاث بطرق غير صحيحه وخاطئة تضر بالاثاث وتعرضة للتجريح والخدش فأن شراء اثاث مستعمل جدةتعد من افضل الشركات بالرياض التي تقوم بنقل الاثاث بأفضل الطرق المستخدمة والصحيحة في نقل الاثاث ومن تلك الطرق اننا نقوم بتغليف الاثاث اولا بالتغليف الحراري والذي له اهمية كبيرة وهو من افضل طرق التغليف علي الاطلاق ويتم استخدامه في العديد من الاستخدامات المتنوعة والعديدة ، وكما ان لدي اثاث مستعمل
    التغليف الذي يسمي التغليف بالمفرقعات الذي يتم استخدامة في تغليف الاطباق والاواني بأنواعها والزجاج واي شئ يمكن ان يكون قابل للكسر فاعتمادنا الاساسي في تأدية مهمتنا هي ان نقوم بتوصيل اثاثك من دون ان يحدث له اي تلفيات او خدوش او كسرفي نقل اثاث بالرياض كما اننا نعتمد علي اكبر السيارات في نقل العفش واحدث الرافعات التي تقوم برفع عفشك في الاماكن العالية .
    افضل الخطوات المتبعة بشركة نقل اثاث بالرياض
    - الخطوة الاولي التي تهتم بها محلات شراء الاثاث المستعمل بجدة عملية الفك بالرغم من انها تبدو سهلة الا انها تحتاج الي متخصصين وفريق مدرب ولة خبرة طويلة في كيفية الفك والتركيب للحفاظ علية من الخدش او الثني والحفاظ عليه بشكل تام .
    شركة شراء اثاث مستعمل بالرياض

    -الخطوة الثانية وهي تغليف الاثاث بشكل صحيح حتي يتم حمايتة من الاتربة والخدوش التي يتعرض لها اثناء عملية النقل وكذلك نستخدم ممتصات لاي نوع من انواع الصدمات المختلفة التي تؤدي الي تلف الاثاث بأستخدام قطع القماش مع الفلين او بلاستيك الفقاعات او النايلون لبعض من القطع
    شراء الاثاث المستعمل بالرياض
    -الخطوة الثالثة وهي تركيب الاثاث وهي خطوة هامة ايضا عندما يتم نقل الاثاث الي المنزل الجديد بشكل سليم نقوم بترتيب الاثاث داخل المنزل التسليمة الي عميلنا في ابهي صورة كما ان لدينا متخصصين في تركيب الاثاث دون تعرضة لاي تلفيات بأحدث ادوات الفك والتركيب فهم عمالة مدربة بتقنية عالية كما ان شركتنا لها اسعار تنافسية ليس لها مثيل عن باقي شركات نقل الاثاث بالرياض
    حقين شراء الاثاث المستعمل بالرياض


    ReplyDelete