Functional Reactive Programming with BaconJS

See https://speakerdeck.com/tomkr/functional-reactive-programming-in-bacon-dot-js for a slightly updated version

An introduction to the concepts of functional reactive programming, using BaconJS as a library. Given as a lightning talk at Brightin HQ. Includes a bunch of code samples.

Transcript

1. Functional reactive programming with Bacon.js Lightning Talk 2015-08-19 Tom Kruijsen
4. Functional Reactive Programming
5. Event Streams as first class citizens
6. Time
7. User input
8. AJAX
9. Websockets
10. 1 2 3 4 Event stream
11. 1 2 3 4 map() 3 6 9 12 stream.map(x => x * 3)
12. 1 3 merge() stream1.merge(stream2) 2 4 1 2 3 4
13. 1 3 concat() stream1.concat(stream2) 2 4 1 3 4
14. 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 });
15. $('#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();
16. Streams can have side effects
17. 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); });
18. AJAX
19. res AJAX
20. 1 2 3 map() AJAX? res res res res res res
21. 1 2 3 map() AJAX!!! res res res res res res
22. 1 2 3 4 flatmap() res res res res res
23. Functional reactive programming with Bacon.js Lightning Talk 2015-08-19 Tom Kruijsen