Sizzling with Bacon.js

Tired of callbacks? Is local state getting you down? Are you finding it difficult to combine asynchronous event streams? Bacon.js can help.

Apply Functional Reactive Programming techniques to your JavaScript and ship robust code with less bugs that delights your lovely users.

Transcript

1. 1 Maciej Matyjas Mobile Tech Lead - Hotels.com - @matyjas Sizzling with Bacon.js
2. 2 Sizzling with Bacon.js •  Why bother? •  Reactive •  Functional Reactive •  Let me see something •  Flavors of Bacon •  Under the microscope •  Wrapped in Bacon •  Questions?
3. 3 Why bother? •  Anyone seen my tool belt? •  Flattening callbacks •  Async updates •  Approaching ‘Peak of Inflated Expectations’ in Hype Cycle
4. 4 What is the point?
5. 5 Reactive •  Cells in a spreadsheet •  Basically data binding •  Like loads of JS frameworks •  Backbone •  Knockout •  Angular •  Technically, it’s a data flow
6. 6 Functional Reactive •  Think of data flows as a stream of events •  Or a list of events •  That can be transformed with map() •  Filtered, reduced, etc •  Composable
7. 7 Functional Reactive •  Let me tell you about Rx •  70s •  Microsoft •  Netflix •  Github •  Coursera •  Soundcloud
8. 8 Let me see something •  Raw •  Innovation Time •  Don’t check in (yet) •  Enough talk
9. 9 Flavors of Bacon •  Creating Bacon •  $("h1").asEventStream("click"); •  Bacon.fromPromise($.ajax("some/api")); •  Bacon.fromArray([0,1,2,3]); •  Bacon.sequentially(100, [0,1,2,3]);
10. 10 Flavors of Bacon •  EventStream and Property •  .map •  .filter •  .flatMap •  .flatMapLatest •  .throttle •  .zip
11. 11 .map() Bacon .fromArray([0, 1, 2, 3]) .map(function (item) { return item * 2 }).log(); [Log] 0 (Bacon.js, line 957) [Log] 2 (Bacon.js, line 957) [Log] 4 (Bacon.js, line 957) [Log] 6 (Bacon.js, line 957) [Log] <end> (Bacon.js, line 957)
12. 12 .filter() Bacon .fromArray([0,1,2,3]) .filter( function (item) { return item > 0 }).log(); [Log] 1 (Bacon.js, line 957) [Log] 2 (Bacon.js, line 957) [Log] 3 (Bacon.js, line 957) [Log] <end> (Bacon.js, line 957)
13. 13 .flatMap() Bacon .fromArray([1,2]) .flatMap(function(item) { return Bacon.sequentially(100/item, [item]); }).log(); [Log] 2 (Bacon.js, line 957) [Log] 1 (Bacon.js, line 957) [Log] <end> (Bacon.js, line 957)
14. 14 .flatMapLatest() Bacon .fromArray([1,2]) .flatMapLatest(function(item) { return Bacon.sequentially(100/item, [item]); }).log(); [Log] 2 (Bacon.js, line 957) [Log] <end> (Bacon.js, line 957)
15. 15 .throttle() Bacon .sequentially(100, [0,1,2,3]) .throttle(200) .log(); [Log] 1 (Bacon.js, line 957) [Log] 3 (Bacon.js, line 957) [Log] <end> (Bacon.js, line 957)
16. 16 .zip() Bacon .fromArray([0,1,2]) .zip(Bacon.fromArray([10,11,12]), function(left,right) { return left + " and " + right; }).log(); [Log] 0 and 10 (Bacon.js, line 957) [Log] 1 and 11 (Bacon.js, line 957) [Log] 2 and 12 (Bacon.js, line 957) [Log] <end> (Bacon.js, line 957)
17. 17 Flavors of Bacon •  EventStream •  .concat •  .merge •  .onValue •  .toProperty •  .scan •  Property •  .assign •  Bus •  .push •  .plug •  .end
18. 18 .concat() Bacon .fromArray([0,1,2]) .concat(Bacon.fromArray([10,11,12])) .log(); [Log] 0 (Bacon.js, line 957) [Log] 1 (Bacon.js, line 957) [Log] 2 (Bacon.js, line 957) [Log] 10 (Bacon.js, line 957) [Log] 11 (Bacon.js, line 957) [Log] 12 (Bacon.js, line 957) [Log] <end> (Bacon.js, line 957)
19. 19 .merge() Bacon .sequentially(100, [0,1,2]) .merge(Bacon.sequentially(100, [10,11,12])) .log(); [Log] 0 (Bacon.js, line 957) [Log] 10 (Bacon.js, line 957) [Log] 1 (Bacon.js, line 957) [Log] 11 (Bacon.js, line 957) [Log] 2 (Bacon.js, line 957) [Log] 12 (Bacon.js, line 957) [Log] <end> (Bacon.js, line 957)
20. 20 .onValue() var unsub = Bacon .fromArray([0,1,2]) .onValue(function (item) { console.log("=> " + item); }); [Log] => 0 [Log] => 1 [Log] => 2
21. 21 .toProperty() Bacon .fromArray([0,1,2]) .toProperty("initial value") .log(); [Log] initial value (Bacon.js, line 957) [Log] 0 (Bacon.js, line 957) [Log] 1 (Bacon.js, line 957) [Log] 2 (Bacon.js, line 957) [Log] <end> (Bacon.js, line 957)
22. 22 .scan() Bacon .fromArray([1,2,3]) .scan(0, function (seed, agg) { return seed + agg; }).log(); [Log] 0 (Bacon.js, line 957) [Log] 1 (Bacon.js, line 957) [Log] 3 (Bacon.js, line 957) [Log] 6 (Bacon.js, line 957) [Log] <end> (Bacon.js, line 957)
23. 23 .assign() Bacon .fromArray([0,1,2]) .toProperty("initial value") .assign($("h1"), "text");
24. 24 .push(), .plug(), .end() var bus = new Bacon.Bus(); bus.log(); bus.push(1); [Log] 1 (Bacon.js, line 957) < ["<more>"] bus.plug(Bacon.fromArray([0,1,2])); [Log] 0 (Bacon.js, line 957) [Log] 1 (Bacon.js, line 957) [Log] 2 (Bacon.js, line 957) bus.end(); [Log] <end> (Bacon.js, line 957) < ["<no-more>"]
25. 25 Lets look under the hood Code Cometh
26. 26 Wrapped in Bacon •  jQuery •  Events •  Promises •  Node.js •  Backbone •  There is a limited plugins repo! ( https://github.com/wolfflow/Bacon.Plugins ) •  Make your own with Bacon.fromBinder, Bacon.fromCallback, etc •  34k minified
27. 27 Maciej Matyjas Mobile Tech Lead - Hotels.com - @matyjas Questions?