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.

17 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
  6. Hey, very nice site. I came across this on Google, and I am stoked that I did. I will definitely be coming back here more often. Wish I could add to the conversation and bring a bit more to the table, but am just taking in as much info as I can at the moment. Thanks .

    DedicatedHosting4u.com

    ReplyDelete
  7. Thanks for sharing nice information with us. I like your post and all you share with us is up to date and quite informative,

    Thanks
    Cpa offers

    ReplyDelete
  8. Your post is very good. I got to learn a lot from your post. Thank you for sharing your article for us. it is amazing post
    what is seo
    types of seo


    ReplyDelete
  9. This is a fantastic idea! I like it a lot because it's super easy for the audience to see the value of opting in. wonderful and amazing post very use full your post thanks for sharing your article
    Android Application development
    Web application

    ReplyDelete
  10. مكيف الهواء الخاص بك هو واحد من أهم الاجهزه الخاصة بك (ومكلفه) في منزلك. من الصعب تخيل الحياة بدون هذه في سياراتنا ومكاتبنا ومنازلنا... كنت اسمه! مع ذلك ، من المهم ان نبذل كل ما في وسعنا للتاكد من ان مكيفات الهواء لدينا تستمر لفتره طويلة وأداء فعال. بالطبع هناك أشياء يجب عليك القيام بها ، ولكن ماذا لا ينبغي ان تفعل ؟
    شركة تنظيف مكيفات فى رياض الخبراء
    شركة تنظيف مكيفات بالبكيرية
    شركة تنظيف مكيفات بعنيزة
    شركة تنظيف مكيفات ببريدة
    شركة تنظيف مكيفات بالقصيم

    وهنا أربعه أشياء يجب ان لا تفعل إذا كنت تريد مكيف الهواء الخاص بك للحفاظ علي تشغيل بسلاسة وكفاءه.

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

    أبدا محاولة لتشخيص مشاكل مع مكيف الهواء الخاص بك بنفسك. مكيفات الهواء ليست مناسبه أبدا للحلول DIY ، أبدا. اتصل دائما بالمقاول
    شيء واحد يجب ان تفعل دائما لمكيف الهواء الخاص بك هو جدول الصيانة الوقائية الربيع مع التدفئة المحلية الخاصة بك والمقاول تكييف الهواء.
    ما هي بعض النصائح لتكييف الهواء الخاص بك ؟ هل هناك أشياء أخرى تود معرفتها عن مكيفات الهواء ؟

    ReplyDelete
  11. thanks for sharing such a wonderful information from this post
    digital marketing

    ReplyDelete