Let it Flow - Introduction to Functional Reactive Programming
4 likes1,106 views
This document introduces functional reactive programming and dataflow concepts. It discusses how values can propagate and change over time using properties, signals, and behaviors. Examples are provided to demonstrate combining event streams, mapping and merging values, scanning over events, and using promises with asynchronous data. Functional reactive programming allows declarative specification of reactive systems that update based on changes over time.
Let it Flow - Introduction to Functional Reactive Programming
- 1. LET IT FLOW Introduction to Functional Reactive Programming @ArturSkowronski
- 7. DATAFLOW
- 9. a = 1 b = 2 c = a + b
- 10. b = 3 c = ?
- 11. C A B
- 12. Properties or Signals or Behaviours
- 14. Event Streams
- 15. Single Event
- 16. Events Stream
- 20. Dirty Checking! Change Listeners!
- 25. Talk is cheap. Show me the code Linus Torvald
- 26. Examples
- 28. var score = 0 $('#plus').click(function(){ score = score + 1; $('#result').html(score); }) $('#minus').click(function(){ score = score - 1; $('#result').html(score); })
- 29. var plus = $('#plus') .asEventStream('click'); ! var minus = $('#minus') .asEventStream('click');
- 31. var score = plus.map(1) .merge(minus.map(-1)) .scan(0, function(x, y){ return x + y })
- 32. Map
- 33. var score = plus.map(1) .merge(minus.map(-1)) .scan(0, function(x, y){ return x + y })
- 35. a b a.merge(b) 1 3 2 1 2 3 Merge
- 37. var . .scan(0, function(x, y){ return x + y })
- 39. a a.scan('',sum) "a" "c" "t" "" "c" "ca" "cat" Seed Value "" + "c" "c" + "a" "ca" + "t" Scan
- 40. score.onValue(function(value){ $("#score").html(value); }); Side Effect
- 42. var favorite = $('#favorite') .asEventStream('click') .map(2);
- 43. var score = up .merge(down) .merge(favorite) .scan(0, sum)
- 45. Example 1I: Combining DataStreams
- 46. function inputVal(ev) { return $(ev.currentTarget).val() } var username = $('#username').asEventStream('keyup') .map(inputVal) Username:
- 47. var password = $('#password').asEventStream('keyup') .map(inputVal) Username: Password:
- 49. Custom Function uValid = username.map(isValid) ! ! pValid = password.map(isValid)
- 50. validForm = uValid.combine(pValid, function(a, b){ return a && b })
- 51. a b a.combine (b, plus) 1 3 2 3 5 Combine
- 52. Submit validForm.onValue(function(value) { $("#submit").attr("disabled", !enabled) })
- 55. Bacon.fromPromise var ajaxCall = Bacon.fromPromise( $.ajax({ url : "meetjs/users.json"}) ) var ajaxCall(query){ return Bacon.fromPromise( $.ajax({ url : "meetjs/?q=" + query})) }
- 56. Search: var search = $('#search').asEventStream('keyup') .map(inputVal) search.map(ajaxCall).onValue(function(value){ value.onValue(function(value){ doSomethingWithResult(value); }); });
- 58. Search: search.map(ajaxCall).onValue(function(value){ value.onValue(function(value){ doSomethingWithResult(value); }); });
- 60. flatMap
- 61. a ~1 ~2 f(1) f(2) "a" a.flatMap(f) "a" "b" FlatMap "b"
- 62. a ~1 ~2 f(1) f(2) a.flatMapLatest "a" (f) "a" "b" FlatMapLatest
- 64. WHERE ?
- 68. Wrap Up
- 69. Filters Bus Combine Templates This Presentation
- 72. Thank You! Questions? @ArturSkowronski arturskowronski.com