Why Bacon is actually good for your health

JSConf.uy 2014 talk by Leonardo Garcia Crespo and Sergio Gianazza.

1. Why Bacon is BAD for your health
2. actually good Why Bacon is BAD for your health
3. Who we are Sergio Gianazza Leonardo Garcia Crespo leoasis gianu @leogcrespo @sgianazza
5. /meetup-js @Meetupjs_ar
7. DISCLAIMER
8. Functional Reactive Programming
9. Functional Reactive Programming “Functional Reactive Programming (FRP) integrates time flow and compositional events into functional programming. This provides an elegant way to express computation in domains such as interactive animations, robotics, computer vision, user interfaces and simulation.” - Extract from Haskell Wiki
10. What is an event stream?
11. Collection of events that happen over time
12. Like a pipe, where instead of water, you have events
13. stream t Event Stream
14. stream t ev Event Stream
15. stream t ev ev Event Stream
16. stream t ev ev ev Event Stream
17. stream t ev ev ev ev Event Stream
18. stream t ev ev ev ev Event Stream ev
19. stream t ev ev ev ev Event Stream ev ev
20. What is a property?
21. Value that changes over time
22. Why should I care?
23. Event composition
24. Functional programming ideas
25. Higher level of abstraction
26. High order functions
27. map
28. map numbers numbers.map(f) f(x) = x * 2 t
29. map numbers numbers.map(f) f(x) = x * 2 t 1
30. map numbers numbers.map(f) f(x) = x * 2 t 1 f(1)
31. map numbers numbers.map(f) f(x) = x * 2 t 2 1 f(1)
32. map numbers numbers.map(f) f(x) = x * 2 t 2 1 2 f(1)
33. map numbers numbers.map(f) f(x) = x * 2 t 2 1 2 f(1) f(2)
34. map numbers numbers.map(f) f(x) = x * 2 t 2 4 1 2 f(1) f(2)
35. map numbers numbers.map(f) f(x) = x * 2 t 2 4 6 1 2 3 f(1) f(2) f(3)
36. map numbers numbers.map(f) f(x) = x * 2 t 2 4 6 8 1 2 3 4 f(1) f(2) f(3) f(4)
37. filter
38. filter numbers numbers.filter(f) f(x) = even?(x) t
39. filter numbers numbers.filter(f) f(x) = even?(x) t 1
40. filter numbers numbers.filter(f) f(x) = even?(x) t 1 f(1)
41. filter numbers numbers.filter(f) f(x) = even?(x) t 1 f(1)
42. filter numbers numbers.filter(f) f(x) = even?(x) t 1 2 f(1)
43. filter numbers numbers.filter(f) f(x) = even?(x) t 1 2 f(1) f(2)
44. filter numbers numbers.filter(f) f(x) = even?(x) t 2 1 2 f(1) f(2)
45. filter numbers numbers.filter(f) f(x) = even?(x) t 2 1 2 3 f(1) f(2) f(3)
46. filter numbers numbers.filter(f) f(x) = even?(x) t 2 4 1 2 3 4 f(1) f(2) f(3) f(4)
47. merge
48. merge L1 L1.merge(L2) t L2
49. merge L1 L1.merge(L2) t ‘J’ L2
50. merge L1 L1.merge(L2) t ‘J’ L2 ‘J’
51. merge L1 L1.merge(L2) t ‘J’ L2 ‘J’ ‘S’
52. merge L1 L1.merge(L2) t ‘J’ L2 ‘S’ ‘J’ ‘S’
53. merge L1 L1.merge(L2) t ‘J’ ‘C’ L2 ‘S’ ‘J’ ‘S’
54. merge L1 L1.merge(L2) t ‘C’ ‘J’ ‘C’ L2 ‘S’ ‘J’ ‘S’
55. merge L1 L1.merge(L2) t ‘C’ ‘J’ ‘C’ L2 ‘O’ ‘O’ ‘S’ ‘J’ ‘S’
56. merge L1 L1.merge(L2) t ‘C’ ‘J’ ‘C’ L2 ‘O’ ’N' ‘O’ ‘S’ ‘J’ ‘S’ ’N'
57. merge L1 L1.merge(L2) t ‘C’ ‘F’ ‘J’ ‘C’ ‘F’ L2 ‘O’ ’N' ‘O’ ‘S’ ‘J’ ‘S’ ’N'
58. merge L1 L1.merge(L2) t ‘C’ ‘F’ ‘J’ ‘C’ ‘F’ L2 ‘O’ ’N' ‘O’ ‘S’ ‘J’ ‘.’ ‘S’ ’N' ‘.’
59. merge L1 L1.merge(L2) t ‘C’ ‘F’ ‘J’ ‘C’ ‘F’ L2 ‘O’ ’N' ‘O’ ‘S’ ‘J’ ‘.’ ‘U’ ‘S’ ’N' ‘.’ ‘U’
60. merge L1 L1.merge(L2) t ‘C’ ‘F’ ‘J’ ‘C’ ‘F’ L2 ‘O’ ’N' ‘O’ ‘S’ ‘J’ ‘.’ ‘U’ ‘Y’ ‘Y’ ‘S’ ’N' ‘.’ ‘U’
61. scan
62. scan chars chars.scan(‘’,f) f(x,y) = concat(x,y) t
63. scan chars chars.scan(‘’,f) f(x,y) = concat(x,y) t seed
64. scan chars chars.scan(‘’,f) f(x,y) = concat(x,y) t ‘’ seed
65. scan chars chars.scan(‘’,f) f(x,y) = concat(x,y) t ‘’ ‘h’ seed
66. scan chars chars.scan(‘’,f) f(x,y) = concat(x,y) t ‘’ ‘h’ seed f(‘’, ‘h’)
67. scan chars chars.scan(‘’,f) f(x,y) = concat(x,y) t ‘’ ‘h’ ‘h’ seed f(‘’, ‘h’)
68. scan chars chars.scan(‘’,f) f(x,y) = concat(x,y) t ‘’ ‘h’ ‘h’ ‘e’ seed f(‘’, ‘h’)
69. scan chars chars.scan(‘’,f) f(x,y) = concat(x,y) t ‘’ ‘h’ ‘h’ ‘e’ seed f(‘’, ‘h’) f(‘h’, ‘e’)
70. scan chars chars.scan(‘’,f) f(x,y) = concat(x,y) t ‘’ ‘h’ ‘he’ ‘h’ ‘e’ seed f(‘’, ‘h’) f(‘h’, ‘e’)
71. scan chars chars.scan(‘’,f) f(x,y) = concat(x,y) t ‘’ ‘h’ ‘he’ ‘hel’ ‘h’ ‘e’ ‘l’ seed f(‘’, ‘h’) f(‘h’, ‘e’) f(‘he’, ‘l’)
72. scan chars chars.scan(‘’,f) f(x,y) = concat(x,y) t ‘’ ‘h’ ‘he’ ‘hel’ ‘h’ ‘e’ ‘l’ seed f(‘’, ‘h’) f(‘h’, ‘e’) f(‘he’, ‘l’) ‘hell’ ‘l’ f(‘hel’, ‘l’)
73. scan chars chars.scan(‘’,f) f(x,y) = concat(x,y) t ‘’ ‘h’ ‘he’ ‘hel’ ‘h’ ‘e’ ‘l’ seed f(‘’, ‘h’) f(‘h’, ‘e’) f(‘he’, ‘l’) ‘hell’ ‘l’ f(‘hel’, ‘l’) ‘hello’ ‘o’ f(‘hell’, ‘o’)
74. Bacon.js
75. Functional reactive programming library for JS
76. Bacon.js 1 // From jQuery! 2 $('#myButtom').asEventStream('click');! 3 ! 4 // From callback! 5 Bacon.fromCallback(function(callback) {! 6 setTimeout(function() {! 7 callback("Bacon!");! 8 }, 1000)! 9 });! 10 ! 11 //From node callback! 12 var Bacon = require('baconjs').Bacon,! 13 fs = require('fs');! 14 var read = Bacon.fromNodeCallback(fs.readFile, 'input.txt');! 15 ! 16 // And many more!!! Event Stream example:
77. Bacon.js 1 var up = $('#up').asEventStream('click');! 2 var down = $('#down').asEventStream('click');! 3 ! 4 var upOcurrences = up.map(1);! 5 var downOcurrences = up.down(-1); map example:
78. Bacon.js 1 var up = $('#up').asEventStream('click');! 2 var down = $('#down').asEventStream('click');! 3 ! 4 var upOcurrences = up.map(1);! 5 var downOcurrences = up.down(-1);! 6 ! 7 var ocurrences = upOcurrences.merge(downOcurrences); merge example:
79. Bacon.js 1 var up = $('#up').asEventStream('click');! 2 var down = $('#down').asEventStream('click');! 3 ! 4 var upOcurrences = up.map(1);! 5 var downOcurrences = up.down(-1);! 6 ! 7 var ocurrences = upOcurrences.merge(downOcurrences);! 8 ! 9 var count = ocurrences.scan(0, function(accum, value) { return accum + value; });! 10 ! 11 count.assign($('#myCount'), 'text'); scan example:
80. Bacon.js 1 var up = $('#up').asEventStream('click');! 2 var down = $('#down').asEventStream('click');! 3 ! 4 var upOcurrences = up.map(1);! 5 var downOcurrences = up.down(-1);! 6 ! 7 var ocurrences = upOcurrences.merge(downOcurrences);! 8 ! 9 var count = ocurrences.scan(0, function(accum, value) { return accum + value; });! 10 ! 11 count.assign($('#myCount'), 'text');! 12 ! 13 var tens = count.filter(function(value) { return value % 10 == 0; })! 14 .map(function(value) { return value / 10; });! 15 ! 16 tens.assign($('#myTensCount'), 'text')); filter example:
81. Bacon.js 1 // With Scan! 2 var clicks = $('#myButton').asEventStream('click');! 3 var clickCount = clicks.scan(0, function(x, y) { return x + 1 });! 4 ! 5 // With toProperty! 6 var textValue = #('#input').asEventStream('keypress')! 7 .map('.target')! 8 .map('.value')! 9 .toProperty("default value"); property example:
82. Examples
83. Examples •No imperative event handling! •Define alarms to trigger in the future. •Hours, minutes and seconds are separate events. Timer:
84. Examples Timer - Setup: 1 // Set up timer seconds, minutes, and hours! 2 var seconds = Bacon.interval(1000, 'tick')! 3 .scan(0, function(seconds) {! 4 return seconds == 59 ? 0 : (seconds + 1);! 5 })! 6 .map(toTwoDigitsString);! 7 ! 8 var minutes = seconds! 9 .changes()! 10 .filter(isOClock)! 11 .scan(0, function(minutes) {! 12 return minutes == 59 ? 0 : (minutes + 1);! 13 })! 14 .map(toTwoDigitsString);! 15 ! 16 var hours = minutes! 17 .changes()! 18 .filter(isOClock)! 19 .scan(0, function(hours) {! 20 return hours == 23 ? 0 : (hours + 1);! 21 })! 22 .map(toTwoDigitsString);
85. Examples Timer - Combine: 1 // Build full hour from the 3 properties! 2 var fullHour = hours.map(Array)! 3 .combine(minutes.map(Array), '.concat')! 4 .combine(seconds.map(Array), '.concat')! 5 .map(function(arr) {! 6 return arr.join(':');! 7 });! 8
86. Examples 1 // Set up alarms! 2 var alarmTime = $('#alarmTime').asEventStream('keypress');! 3 var alarmSet = $('#setAlarm').asEventStream('click');! 4 ! 5 var currentAlarm = alarmTime.sampledBy(alarmSet)! 6 .map('.target').map('.value');! 7 ! 8 var alarmSignal = currentAlarm.flatMap(function(time) {! 9 return fullHour.filter(function(current) { return current == time; });! 10 });! 11 Timer - Setup alarm:
87. Examples 1 // Bind everything to the DOM! 2 seconds.assign($("#seconds"), 'text');! 3 minutes.assign($("#minutes"), 'text');! 4 hours.assign($("#hour"), 'text');! 5 ! 6 currentAlarm.assign(function(alarm) {! 7 $('#currentAlarm').append('<li>'+alarm+'</li>');! 8 });! 9 Timer - DOM Binding:
88. Examples 1 // Fire the alarm!!! 2 alarmSignal.onValue(function(time) {! 3 alert('Alarm sounds! It\'s ' + time);! 4 }); Timer - Fire the alarm:
89. Examples •Integrate backbone events as event streams. •Custom bacon binders. •How to use this. Backbone:
90. Examples Backbone - Event streams: 1 // Get an event stream for all add remove and reset events in the collection! 2 var reposProp = eventStream(repos, 'add remove reset').map(function(args) {! 3 return args[1];! 4 ! 5 // and make it a property!! 6 }).toProperty(repos);! 7 ! 8 // Results count is easy!! 9 var resultsCount = reposProp.map('.models').map('.length');
91. Examples Backbone - DOM Bindings: 1 // Render the repos! 2 reposProp.map(renderRepos).assign($('#list'), 'html');! 3 // Render the counts! 4 resultsCount.assign($('#resultsCount'), 'text');
92. Examples Backbone - Model search: 1 // Just for fun, we assign the input to a backbone property! 2 var filterSearches = $('#filter').asEventStream('input')! 3 .debounce(300)! 4 .map('.target').map('.value')! 5 .assign(filter, 'set', 'filter');! 6 ! 7 // Create a model for the filter input! 8 var filter = new Backbone.Model({ filter: '' });! 9 ! 10 // We make it a Bacon Property!! 11 modelProperty(filter, 'filter')! 12 .skipDuplicates()! 13 .filter(function(text) {! 14 return text.length >= 3 || text === '';! 15 })! 16 .onValue(function(text) { repos.search(text); });
93. Examples •Integrate Angular watches as event streams. •Simple user registration example. •How to use this. Angular:
94. Examples Angular - Event stream: 1 var passwordInput = $scope! 2 .$watchAsProperty('password');! 3 ! 4 var passwordsEqual = passwordInput! 5 .combine(! 6 $scope.$watchAsProperty('passwordConfirm'),! 7 function(pass, confirm) {! 8 return {! 9 password: pass,! 10 confirm: confirm! 11 };! 12 }! 13 )! 14 .map(function(it) {! 15 return it.password === it.confirm;! 16 })! 17 .toProperty();! 18 ! 19 var usernameInput = $scope! 20 .$watchAsProperty('username');
95. Examples Angular - Basic checks: 1 var passwordIsValid = passwordInput! 2 .map(longerThanOrEqual(5));! 3 ! 4 var usernameIsFree = usernameInput! 5 .changes()! 6 .filter(longerThan(2))! 7 .flatMapLatest(function(it) { return Bacon.later(2000, it === "user"); })! 8 .merge(usernameInput.map(false).changes())! 9 .toProperty(false);
96. Examples Angular - Check username: 1 usernameIsFree! 2 .and(passwordIsValid)! 3 .and(passwordsEqual)! 4 .digest($scope, 'formValid');! 5 ! 6 usernameIsFree! 7 .changes()! 8 .filter(identity)! 9 .map(Bacon.constant("free"))! 10 .merge(usernameIsFree.changes().not().filter(identity).map(Bacon.constant("taken")))! 11 .merge(usernameInput.map(Bacon.constant("loading")).changes())! 12 .merge(! 13 usernameInput! 14 .filter(shorterThan(2))! 15 .map(Bacon.constant("empty"))! 16 .changes()! 17 )! 18 .digest($scope, 'usernameState');
97. Examples Angular - Check password: 1 passwordIsValid! 2 .changes()! 3 .not()! 4 .digest($scope, 'passwordInvalid');! 5 ! 6 passwordsEqual! 7 .changes()! 8 .not()! 9 .digest($scope, 'passwordsDontMatch');
98. Recap
99. References http://www.github.com/baconjs/bacon.js http://bit.ly/stackFRP http://bit.ly/snakeBacon http://bit.ly/flowdock http://www.github.com/amplifiedapp/bacon-jsconf
100. Questions ?
101. Thanks! Sergio Gianazza Leonardo Garcia Crespo gianu @sgianazza leoasis @leogcrespo
102. Thanks! Sergio Gianazza Leonardo Garcia Crespo gianu @sgianazza leoasis @leogcrespo And don’t forget to check!