On norwegian: Lyntale på Booster Conf i 2014. Functional Reactive Programming i Javascript. Bruk av korte kodeeksempler i Bacon.js

1. INTRODUKSJON TIL
FUNCTIONAL REACTIVE PROGRAMMING
Kombinasjonen mellom funksjonell og reaktiv
paradigme
Booster 2014
Mikael Brevik
12/03/2014

2. Fremad-
stormende
#ithipster
teknologi

3. 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

4. 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]

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

6. Reaktiv
Programming

7. 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.

8. REAKTIV PROGRAMMERING
9
5
4
ADD

9. Funksjonell
Reaktiv
Programmering
(FRP)

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

11. 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.

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

13. 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.

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

15. Ren
Javascript

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

17. 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");

18. 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)

19. TAKK FOR MEG!
Mikael Brevik
@mikaelbrevik