Functional reactive
programming with
Bacon.js
Lightning Talk 2015-08-19
Tom Kruijsen
Slide 2
Slide 2 text
No content
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
Functional Reactive
Programming
Slide 5
Slide 5 text
Event Streams as first
class citizens
Slide 6
Slide 6 text
Time
Slide 7
Slide 7 text
User input
Slide 8
Slide 8 text
AJAX
Slide 9
Slide 9 text
Websockets
Slide 10
Slide 10 text
1 2 3 4
Event stream
Slide 11
Slide 11 text
1 2 3 4
map()
3 6 9 12
stream.map(x => x * 3)
Slide 12
Slide 12 text
1 3
merge()
stream1.merge(stream2)
2 4
1 2 3 4
Slide 13
Slide 13 text
1 3
concat()
stream1.concat(stream2)
2 4
1 3 4
Slide 14
Slide 14 text
var up = $('#up').asEventStream('click');
var down = $('#down').asEventStream('click');
var counter =
// map up to 1, down to -1
up.map(1).merge(down.map(-1))
// accumulate sum
.scan(0, function(x,y) { return x + y });
Slide 15
Slide 15 text
$('#once').asEventStream('click')
.map('Clicked once.').first().log();
$('#twice').asEventStream('click')
.map('Clicked.').take(2).log();
var first = $(‘#first’).asEventStream('click')
.map('First.').first();
var second = $(‘#second’).asEventStream('click')
.map('Second.').first();
first.concat(second).log();
Slide 16
Slide 16 text
Streams can have
side effects
Slide 17
Slide 17 text
var firstname = $("#firstname").asEventStream("keyup")
.map(function(event) {
return $(event.target).val();
}).toProperty("");
var lastname = $("#lastname").asEventStream("keyup")
.map(function(event) {
return $(event.target).val();
}).toProperty("");
function nonEmpty(x) { return x.length > 0 };
var valid = firstname.map(nonEmpty).and(lastname.map(nonEmpty));
valid.onValue(function(enabled) {
$("#submit").attr("disabled", !enabled);
});
Slide 18
Slide 18 text
AJAX
Slide 19
Slide 19 text
res
AJAX
Slide 20
Slide 20 text
1 2 3
map() AJAX?
res
res
res
res
res
res
Slide 21
Slide 21 text
1 2 3
map() AJAX!!!
res
res
res
res
res
res
Slide 22
Slide 22 text
1 2 3 4
flatmap()
res
res
res
res
res
Slide 23
Slide 23 text
Functional reactive
programming with
Bacon.js
Lightning Talk 2015-08-19
Tom Kruijsen