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.

1. LET IT FLOW
Introduction to Functional Reactive Programming
@ArturSkowronski

2. About Me
@ArturSkowronski

6. Functional
REACTIVE PROGRAMMING

7. DATAFLOW

8. PROPAGATION
OF CHANGE

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!

21. Creator: Juha Paananen

24. Observable
EventStreams
Properties

25. Talk is cheap. Show me the code
Linus Torvald

26. Examples

27. Example 1: ScoreBoard

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 })

34. var
.merge(minus.map(-1))
.

35. a
b
a.merge(b)
1 3
2
1 2 3
Merge

37. var
.
.scan(0, function(x, y){
return x + y })

38. Event Stream
Property

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)
})

54. Example III: Promises

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

63. search.flatMapLatest(ajaxCall)
.onValue(function(value){
doSomethingWithResult(value);
})

64. WHERE ?

68. Wrap Up

69. Filters
Bus
Combine
Templates
This Presentation

72. Thank You!
Questions?
@ArturSkowronski arturskowronski.com