Functional Reactive Programming in Bacon.js

Lightning talk on Functional Reactive Programming in Bacon.js: a short overview of some FRP concepts with some bacon.js code samples.

Transcript

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