let it flow - introduction to functional reactive programming

LET IT FLOWIntroduction to Functional Reactive Programming

@ArturSkowronski

About Me

@ArturSkowronski

REACTIVE PROGRAMMINGFunctional

DATAFLOW

PROPAGATION OF CHANGE

a = 1 b = 2

c = a + b

b = 3

c = ?

C

A

B

Properties or

Signals

or

Behaviours

Event Streams

Single Event

Events Stream

Dirty Checking!

Change Listeners!

Creator: Juha Paananen

EventStreamsProperties

Observable

Talk is cheap. Show me the codeLinus Torvald

Examples

Example 1: ScoreBoard

var score = 0

$('#plus').click(function(){ score = score + 1; $('#result').html(score); })

$('#minus').click(function(){ score = score - 1; $('#result').html(score); })

var plus = $('#plus') .asEventStream('click'); !

var minus = $('#minus') .asEventStream('click');

var score = plus.map(1)

.merge(minus.map(-1))

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

Map

var score = plus.map(1)

.merge(minus.map(-1))

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

var

.merge(minus.map(-1))

.

a

b

a.merge(b)

1 3

2

1 2 3

Merge

var

.

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

Event Stream

Property

a

a.scan('',sum)

"a"

"" "c" "ca"

"c" "t"

"cat"

Seed Value "" + "c"

"c" + "a"

"ca" + "t"

Scan

score.onValue(function(value){ $("#score").html(value); });

Side Effect

var favorite = $('#favorite') .asEventStream('click') .map(2);

var score = up .merge(down) .merge(favorite) .scan(0, sum)

Example 1I: Combining DataStreams

var username =

$('#username').asEventStream('keyup')

.map(inputVal)

function inputVal(ev) {

return $(ev.currentTarget).val() }

Username:

var password =

$('#password').asEventStream('keyup')

.map(inputVal)

Username:

Password:

uValid = username.map(isValid) !

!

pValid = password.map(isValid)

Custom

Funct

ion

uValid.combine(pValid, function(a, b){

return a && b

})

validForm

=

a

b

a.combine (b, plus)

1 3

2

3 5

Combine

validForm.onValue(function(value) {

$("#submit").attr("disabled", !enabled)

})

Submit

Example III: Promises

Bacon.fromPromise

var ajaxCall = Bacon.fromPromise( $.ajax({ url : "meetjs/users.json"}) )

var ajaxCall(query){ return Bacon.fromPromise( $.ajax({ url : "meetjs/?q=" + query})) }

Search:

var search =

$('#search').asEventStream('keyup')

.map(inputVal)

search.map(ajaxCall).onValue(function(value){

value.onValue(function(value){

doSomethingWithResult(value);

});

});

Search:

search.map(ajaxCall).onValue(function(value){

value.onValue(function(value){

doSomethingWithResult(value);

});

});

flatMap

a

f(1)

f(2)

~1 ~2

FlatMapa.flatMap(f) "a" "b"

"a"

"b"

a

f(1)

f(2)

~1 ~2

FlatMapLatest

a.flatMapLatest(f) "a"

"a"

"b"

search.flatMapLatest(ajaxCall)

.onValue(function(value){

doSomethingWithResult(value);

})

WHERE ?

Wrap Up

Filters

Bus

Combine Templates

This Presentation

Questions?

Thank You!

@ArturSkowronski arturskowronski.com