Functional Reactive Programming

(FUNCTIONAL)
REACTIVE PROGRAMMING
Christopher Meiklejohn
@cmeik
Thursday, May 16, 13

View Slide


View Slide

MOTIVATIONS

View Slide

VOID CALLBACKS
FORCE MUTATION

View Slide

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function handleClick(ev) {
return computed = compute(ev.context);
}

View Slide

MULTIPLE ASSIGNMENT
FOR VARIABLES

View Slide

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// jQuery call to change background color
}
function handleMouseOver(ev) {
}

View Slide

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
changeBackgroundColor(...);
}
function handleMouseOver(ev) {
changeBackgroundColor(...);
}
function changeBackgroundColor(color) {
}

View Slide


View Slide

A = B + C

View Slide

A = B + C
C = D + E

View Slide

DATAFLOW LANGUAGES
LUSTRE
LUCID
VERILOG

View Slide

LUSTRE

View Slide

FUNCTIONAL

View Slide

EVENT STREAMS

View Slide

KP

View Slide

KP
EKP
ﬁlter()

View Slide

KP
EKP
ﬁlter()
SKP
ﬁlter()

View Slide

KP
EKP
ﬁlter()
1
map()

View Slide

MK
ME
merge()
KP

View Slide

SIGNALS (BEHAVIORS)

View Slide

I

View Slide

I
I2
lift()

View Slide

I
I2
lift()
C
changes()

View Slide

I
I2
lift()
C
changes()
1
map()

View Slide

I3
I2
lift2()
I1

View Slide

SWITCHING

View Slide

KP
BKP
AKP
switch()

View Slide

KP
AKP
switch()

View Slide

KP
BKP
switch()

View Slide

GLITCH FREE PROPAGATION

View Slide

A = B + C
A
B C

View Slide

A = B + C
C = D + E
A
B C
D E

View Slide

A = B + C
C = LIFT2 + D, E
A
B C
D E

View Slide

var a = y + 0;
var b = y + a;
var c = b + 1;
var d = c % 2;
var e = 5 / d;
A
B
C
Y
D
E

View Slide

COMMON OPERATIONS

View Slide

SEND HOLD MERGE CONSTANT
CHANGES BIND SWITCH MAP NOT
DELAY COLLECT FILTER SEND ONCE LIFT
SKIP-FIRST FILTER-REPEATS SNAPSHOT

View Slide

IMPLEMENTATIONS

View Slide

FLAPJAX

View Slide

• Language and Framework
• Compiler in Haskell
• Brown University 2009 (OOPSLA 2009)
• First major implementation in JavaScript
FLAPJAX

View Slide

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var tenthB = timerB(100);

View Slide

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var secondB = Math.floor(tenthB / 1000);

View Slide

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var hashE = timerE(50).mapE(function() {
return window.location.hash; });

View Slide

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var routeE = hashE.mapE(function(h) {
return h ? h.slice(1) : defaultRoute });

View Slide

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var routeE = hashE.mapE(function(h) {
return h ? h.slice(1) : defaultRoute });
var routeB = startsWith(filterRepeatsE(routeE), defaultRoute);

View Slide

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var startEditEe = extractEventE(label, 'dblclick').
mapE(function() {
li.className = 'editing';
edit.focus();
return extractValueE(edit);
});
var stopEditEe = mergeE(returnPressE(edit), blurE(edit)).
mapE(function() {
li.className = todo.completed ? 'completed' : '';
return oneE(sentinel);
});
var eventsE = switchE(mergeE(startEditEe, stopEditEe));

View Slide

RXJS

View Slide

RXJS (Reactive Extensions)
• Authored by the Cloud Programmability Group at Microsoft
• Set of libraries
• Bindings in various languages providing “reactivity”
• Observables and observers
• Provides scheduling and LINQ for querying

View Slide

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/* Only get the value from each key up */
var keyups = Rx.Observable.fromEvent(input, 'keyup')
.select(function (e) {
return e.target.value;
})
.where(function (text) {
return text.length > 2;
});

View Slide

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
})
});
/* Now throttle/debounce the input for 500ms */
var throttled = keyups
.throttle(500 /* ms */);

View Slide

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
})
});
/* Now throttle/debounce the input for 500ms */
var throttled = keyups
.throttle(500 /* ms */);
/* Now get only distinct values, so we eliminate the arrows */
var distinct = keyups
.distinctUntilChanged();

View Slide

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function searchWikipedia(term) {
var url = 'http://en.wikipedia.org/w/api.php?action=opensearch'
+ '&format=json'
+ '&search=' + encodeURI(term);
return Rx.Observable.getJSONPRequest(url);
}

View Slide

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function searchWikipedia(term) {
var url = 'http://en.wikipedia.org/w/api.php?action=opensearch'
+ '&format=json'
+ '&search=' + encodeURI(term);
return Rx.Observable.getJSONPRequest(url);
}
var suggestions = distinct
.select(function (text) {
return searchWikipedia(text);
})
.switchLatest()
.where(function (data) {
return data.length == 2 && data[1].length > 0;
});

View Slide

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var suggestions = distinct
.select(function (text) {
return searchWikipedia(text);
})
.switchLatest()
.where(function (data) {
return data.length == 2 && data[1].length > 0;
});
suggestions.subscribe( function (data) {
var results = data[1];
/* Do something with the data like binding */
}, function (e) {
/* handle any errors */
});

View Slide

BACON.JS

View Slide

BACON.JS
• Inspired by Reactive Banana and RxJS
• Flowdock, open sourced in 2013

View Slide

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var clicks = $("h1").asEventStream("click");
clicks.onValue(function() { alert("you clicked the h1 element") });

View Slide

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var plus = $("#plus").asEventStream("click").map(1);
var minus = $("#minus").asEventStream("click").map(-1);
var both = plus.merge(minus);

View Slide

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function add(x, y) { return x + y };
var counter = both.scan(0, add);
counter.onValue(function(sum) { $("#sum").text(sum) });

View Slide

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function add(x, y) { return x + y };
var counter = both.scan(0, add);
counter.onValue(function(sum) { $("#sum").text(sum) });
function f(a, b) { console.log(a + b) }
Bacon.onValues(Bacon.constant(1), Bacon.constant(2), f)

View Slide

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var activity = $(window).asEventStream('mousemove keydown')
var active = activity.flatMapLatest(function(event) {
return Bacon.once(true).merge(Bacon.later(30000, false));
}).toProperty(true);

View Slide

SO, NODE?

View Slide

NPM INSTALL RX

View Slide

RXJS-NODE
• Reified interfaces
• Creates asynchronous objects for receiving events
• node, child_process, dns, events, fs, http, https, net, path,
process, sys

View Slide

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
exports.get = function (options) {
var subject = new Rx.AsyncSubject(),
handler = handler = function (response) {
subject.onNext(response);
subject.onCompleted();
},
errHandler = function (err) {
subject.onError(err);
};
http.get(options, handler).on('error', errHandler);
return subject;
};

View Slide

FLAPJAX, ETC.

View Slide

Functional Reactive Programming

Functional Reactive Programming

Christopher Meiklejohn

More Decks by Christopher Meiklejohn

Other Decks in Programming

Featured

Transcript