Bacon.js for Functional Reactive Programming
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");