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

FUNCTIONAL

M sind First Class Values M  sind Parameter
M sind Return-Werte

Functional


M.map( f )

Functional


You know Monads!

Array (sequenziell)

FUNCTIONAL


YOU KNOW MONADS!

Promise (asynchron)

EVEnt StrEAms


Container 
für  sequenzielle,
asynchrone Werte
Veränderung über die Zeit

Event Streams


stream.map()

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

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,674