Functional reactive
programming with
Bacon.js
Tom Kruijsen – UtrechtJS
Lightning Talk 2016-01-14
Slide 2
Slide 2 text
Tom
@tomkr
Ruby/JS/Swift
Slide 3
Slide 3 text
Brightin
Slide 4
Slide 4 text
No content
Slide 5
Slide 5 text
No content
Slide 6
Slide 6 text
Functional Reactive
Programming
Slide 7
Slide 7 text
Event Streams as first
class citizens
Slide 8
Slide 8 text
Time
Slide 9
Slide 9 text
User input
Slide 10
Slide 10 text
AJAX
Slide 11
Slide 11 text
Websockets
Slide 12
Slide 12 text
1 2 3 4
Event stream
Slide 13
Slide 13 text
1 2 3 4
map()
3 6 9 12
stream.map(x => x * 3)
Slide 14
Slide 14 text
1 3
merge()
stream1.merge(stream2)
2 4
1 2 3 4
Slide 15
Slide 15 text
1 3
concat()
stream1.concat(stream2)
2 4
1 3 4
Slide 16
Slide 16 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 17
Slide 17 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 18
Slide 18 text
Properties
Slide 19
Slide 19 text
Side effects
Slide 20
Slide 20 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 21
Slide 21 text
AJAX
Slide 22
Slide 22 text
res
AJAX
Slide 23
Slide 23 text
1 2 3
map() AJAX?
res
res
res
Slide 24
Slide 24 text
1 3
flatMap() AJAX
res
res
res
2
res
res
res
Slide 25
Slide 25 text
1 2 3
flatMap() AJAX!!!
res
res
res
res
res
res
Slide 26
Slide 26 text
1 2 3
flatMapLatest()
res
res
res
res
res
Slide 27
Slide 27 text
baconjs.github.io
Slide 28
Slide 28 text
npm install baconjs
bower install bacon
Slide 29
Slide 29 text
Functional reactive
programming with
Bacon.js
Tom Kruijsen – UtrechtJS
Lightning Talk 2016-01-14