bacon.js

FRP (functional reactive programming) library for
Javascript

functional reactive programming?

functional programming
focus on functions that take immutable values as
input and produce new values as output
reactive programming
based on data flows and the propagation of change

FRP allows us to combine the power from
both the functional and the reactive
paradigms

collection of events that happens over time
ev ev ev ev ev
time

events can be mouse clicks, keyboard
events or any other input
(ex. data from websocket)

var minusOnes = $('#minusOne').asEventStream('click')
var allKeyDowns = $(document).asEventStream('keydown')
var ws = new WebSocket('ws://someurl.com/');
var updateStream = Bacon.fromEventTarget(ws, 'message')

power of EventStreams is that
they are composable

1 2 3
time
myStream
3 6 9 f(x) = x * 3
myStream.map(f)

minusOnes = $('#minusOne').asEventStream('click')
.map(function(value) { return -1 });

1 4 3
myStream_2 5 2
time
myStream_1
1 4 3 myStream_1
.merge(myStream_2)
5 2

var minusOnes =
$('#minusOne').asEventStream('click').map(-1);
var plusOnes =
$('#plusOne').asEventStream('click').map(1);
var scores = minusOnes.merge(plusOnes);

b y e
time
myStream
'' 'by' 'bye'
f(x, y) = concat(x, y)
myStream.scan('', f)
'b'

var minusOnes =
var plusOnes =
var merged = minusOnes.merge(plusOnes);
var score = merged.scan(0, function(sum, value) {
return sum + value
});

2 3 4
time
myStream
f(x) = even?(x)
myStream.filter(f)
2 4

var minusOnes =
var plusOnes =
var merged = minusOnes.merge(plusOnes);
var score = merged.scan(0, function(sum, value) {
return sum + value
});
var scoreByTens = score.filter(function(value) {
return value % 10 == 0
});

value that changes over time
almost like an EventStream, but has a
current value

a property can be created from an
EventStream with scan or toProperty

a property can be used for assigning values
and attributes to DOM elements with
jQuery

flatMap maps each event in the stream to a
new stream of events

http://baconjs.github.io/api.html

collaborative piano
http://frppiano.herokuapp.com/
snake
http://philipnilsson.github.io/badness/
spreadsheet
http://latentflip.com/bacon_js_spreadsheet/
wikipedia updates
http://dangorst.github.io/frp-with-bacon/

bacon.js

More Related Content

Viewers also liked (20)

Similar to bacon.js (20)

bacon.js