Functional Reactive Programming in Javascript

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 : )