INTRODUKSJON TIL FUNCTIONAL REACTIVE PROGRAMMING

Kombinasjonen mellom funksjonell og reaktiv paradigme

Booster 2014 Mikael Brevik 12/03/2014

Fremad-stormende #ithipster teknologi

FUNKSJONELL PROGRAMMERING

En deklarativ programmeringsparadigme med funksjoner i fokus. Unngår tilstander og mutable objekter.

Unngår uønskede bieffekter med bruk av rene funksjoner

FUNKSJONELL PROGRAMMERING

Vanlig med bruk av blant annet funktorer som map, filter og reduce.

[1, 2, 3].map(function (i) { return i * 2; }); //= [2, 4, 6]

[1, 2, 3].filter(function (i) { return i % 2 === 0; }); //= [2]

FUNKSJONELL PROGRAMMERING

[1, 2, 3].reduce(function (acc, i) { return acc + i; }); //= 6

Reaktiv Programming

REAKTIV PROGRAMMERING

Kan beskrives som en metode for å holde systemet kontinuerlig oppdatert med omgivelsene.

En måte for data å reagere på endringer og oppdatere seg for å reflektere disse endringene.

REAKTIV PROGRAMMERING

9 5

4 ADD

Funksjonell Reaktiv

Programmering (FRP)

FRP

To generelle konsepter 1.  Behaviours (Adferd) : f(t) -> v 2.  Events (Hendelse) : [(t, v)]

FRP

Hendelser En diskret verdi. Eksempelvis museklikk eller en mengde.

I FRP blir adferder og hendelser behandlet som sekvenser og kan bli håndtert på en funksjonell måte.

Adferder En kontinuerlig verdi. Eksempelvis klokken, høyde eller vektorgrafikk.

FRP

Gevinst av FRP •  Reaktive datatyper for representasjon av tilstand. •  Sammensettbar data / komposisjoner •  GUI uten bi-effekter.

Praktisk bruk

FRP

Bacon.js Bacon er et bibliotek som kan brukes for å oppnå FRP i nettleseren

I Bacon kalles en adferd Property og hendelse kalles EventStream.

FRP

I Bacon.js innkapsler vi datakilder som reaktive datatyper. •  fromEventTarget •  fromPromise •  fromCallback •  ...med flere

Ren Javascript

FRP

Bacon.fromEventTarget($('input'), 'keyUp') .map('.keyCode') .filter(function (code) { return code === 66; }); //= En EventStream med verdi hver gang //= tasten B blir trykket

FRP

var getInputAsProperty = function (id) { var $el = $(id); return $el.asEventStream('change') .map('.currentTarget.value') // får inn jquery event obj. .toProperty($el.val()) // får inn tekst .map(Number); // gjør om til tall }; var $a = getInputAsProperty("#a"), $b = getInputAsProperty("#b"); $a.combine($b, _add).assign($("#sum"), "val");

FRP

mouseMove // isClickDown er en property som er true når mus er klikket .filter(isClickDown) // Spre utover per 50. ms .throttle(50) // Gjør om til et parsable objekt .map(function (e) { return { x: e.clientX, y: e.clientY, color: randomColor }; }) // Tegn en figur .onValue(drawCircle)

TAKK FOR MEG!

Mikael Brevik @mikaelbrevik