Functional Reactive Programming in Javascript
by
Thomas Gorny
Das Problem
-
Komplexe,
asynchrone
Webanwendungen
- Callback Hell
(function($) {$(function(){$("button").click(function(e) {$.get("/test.json", function(data, textStatus, jqXHR) {$(".list").each(function() {$(this).click(function(e) {setTimeout(function() {alert("Hello World!");}, 1000);});});});});});})(jQuery);
Callbacks Sind böse!
Nur Seiten-Effekte!
- Synchronisierung
- Control Flow
- Error Handling
lösung:
REACTIVE
Functional
Event-Streams
Reactive
A = B + C
B = D + E
REACTIVE
A
=
B
+ C
B = D + E
E ändert sich
⇒ B neu berechnet
⇒ A neu berechnet
Reactive
Data-Binding
Variablen wie Zellen
in Excel-Tabellen
Functional
Pure Functions
f : A → B
Functional
monaden
Behälter für beliebigen Inhalt
![](https://s3.amazonaws.com/media-p.slid.es/uploads/trival/images/236577/monad.png)
FUNCTIONAL
M sind
First Class Values
M sind
Parameter
M sind Return-Werte
M sind Return-Werte
![](https://s3.amazonaws.com/media-p.slid.es/uploads/trival/images/236582/monad-fn.png)
Functional
M.map( f )
![](https://s3.amazonaws.com/media-p.slid.es/uploads/trival/images/236585/monad-map.png)
Functional
You know Monads!
Array (sequenziell)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/trival/images/236587/monad-array.png)
FUNCTIONAL
YOU KNOW MONADS!
Promise (asynchron)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/trival/images/236591/monad-promise.png)
EVEnt StrEAms
Container
für
sequenzielle,
asynchrone Werte
Veränderung über die Zeit
![](https://s3.amazonaws.com/media-p.slid.es/uploads/trival/images/236599/monad-es.png)
Event Streams
stream.map()
![](https://s3.amazonaws.com/media-p.slid.es/uploads/trival/images/236605/es-map.png)
EVENT STREAMs
stream.map()
stream.reduce()
stream.filter()
stream.merge()
stream.takeUntil()
stream.flatMap()
...
array.map()
array.reduce()
array.filter()
array.concat()
Event Streams
sind
reaktive,
funktionale
Datenstrukturen
funktionale
Datenstrukturen
![](https://s3.amazonaws.com/media-p.slid.es/uploads/trival/images/236608/es-graph.png)
Event Streams
Libraries
RxJS
Bacon.js
Achtung : 20 sek Code !
function xyFromEvent(v){ return {x: v.clientX, y: v.clientY} } function getDelta(t){ var a = t[1]; var b = t[0]; return {x: a.x-b.x, y: a.y-b.y}; } function add(p1, p2) { return {x: p1.x + p2.x, y: p1.y + p2.y}; } var startDrag = block.asEventStream('mousedown') var endDrag = block.asEventStream('mouseup') var draggingDeltas = startDrag.flatMap(function() { return html.asEventStream('mousemove') .map(xyFromEvent) .slidingWindow(2,2) .map(getDelta) .takeUntil(endDrag) }) var blockPosition = draggingDeltas.scan({x: 0, y: 0}, add); blockPosition.onValue(function(pos) { block.css({ top : pos.y + "px", left : pos.x + "px" }); });
Danke : )
Copy of Functional Reactive Programming in JavaScript
By Denis Stoyanov
Copy of Functional Reactive Programming in JavaScript
- 1,774