Bacon.js for Functional Reactive Programming

Posted by Josh on October 12, 2014

I’m at a presentation by Pete Hodgson on functional reactive programming at Silicon Valley Code Camp, and he’s covering Bacon.js.

Bacon.js:

A small functional reactive programming lib for JavaScript. Turns your event spaghetti into clean and declarative feng shui bacon, by switching from imperative to functional. It's like replacing nested for-loops with functional programming concepts like map and filter. Stop working on individual events and work with event-streams instead. Transform your data with map and filter. Combine your data with merge and combine. Then switch to the heavier weapons and wield flatMap and combineTemplate like a boss. It's the _ of Events. Too bad the symbol ~ is not allowed in Javascript.

Here are some more explanations:
http://raimohanska.github.io/bacon.js-slides/index.html
http://philipnilsson.github.io/badness/

Here’s a code example from the talk — streams vs. variables:

$(function () {
    var $slider = $('.slider input'),
        $label = $('.slider .label');

    $slider.asEventStream("input", inputEventToVal)
        .map(parseFloat)
        .map(function (x) {
            return Math.round(x*100);
        })
        .map(function (x) {
            return ""+x+"%";
        })
        .assign($label, "text");
});

Here’s another partial example that sums the values from the two sliders:

var summer = function (a, b) {
    return a + b;
};

var floatsFromSlider = function ($slider) {
    return $slider
        .asEventStream("input", inputEventToVal)
        .debounce(200) // not sure of the value here
        .map(parseFloat);
};

var streamA = floatsFromSlider($sliderA);
var streamB = floatsFromSlider($sliderA);
streamA.visualize("stream A");
streamB.visualize("stream B");
streamA.assign($labelA, "text");
streamB.assign($labelB, "text");
var combined = Bacon.combineWith(summer, streamA, streamB);
combined.visualize("combined");
combined.assign($summedLabel, "text");