Functional Reactive Programming in Javascript

Das Problem

(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!

lösung:

REACTIVE

Functional

Event-Streams

Reactive

REACTIVE

B  =  D  +  E

E  ändert sich

⇒  B  neu berechnet

⇒  A  neu berechnet

Reactive

Functional

Pure  Functions

Functional

monaden

FUNCTIONAL

Functional

Functional

You know Monads!

FUNCTIONAL

YOU KNOW MONADS!

EVEnt StrEAms

Event Streams

EVENT STREAMs

Event Streams

Event Streams

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