Introduksjon til Funksjonell ReaktivProgrammering (FRP)

Av for første Meetup 4. februar.@mikaelbrevik Bart.JS

Mikael BrevikKonsulent hos BEKKBachelor fra HIST (2011), Master fra NTNU (2013).

Tidvis open source utvikler og standhaftig surfer påinternett. Er å finne på Github som ogTwitter . Regelmessig googler ogStackoverflow-leser.

@mikaelbr@mikaelbrevik

Agenda1. Teoretisk perspektiv2. Bacon.js3. Livekoding og magi

Hva er Functional Reactive Programming?Kombinasjonen mellom to paradigmer:

1. Funksjonell programmering2. Reaktiv programmering

Funksjonell programmering

En deklarativ programmeringsparadigme medfunksjoner i fokus.

Unngår tilstander og mutable objekter.

Deklarativ programmering forklarer hva som skjer.

Imperativ programmering forklarer hvordan det skal skje!

Unngår uønskede bieffekter med bruk av renefunksjoner

Vanlig med bruk av blant annet map, reduce ogfilter.

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

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

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

Reaktiv programmering

Kan beskrives som en metode for å holdesystemet kontinuerlig oppdatert med

omgivelsene.

En måte for data å reagere på endringer ogoppdatere for å reflektere disse endringene.

Et eksempel på reaktiv data kan være etregneark og summen av to tall.

ADD

3

2

5

Funksjonell Reaktiv Programmering

To generelle konsepter1. Behaviours (Adferd)2. Events (Hendelse)

AdferderEn kontinuerlig verdi. Eksemeplvis klokken, høyde eller vektorgrafikk.

HendelserEn diskret verdi. Eksempelvis muse-klikk eller en mengde.

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

Gevinst av FRP

Reaktive datatyper for representasjon av tilstand.Sammensettbar data / komposisjonerGUI uten bi-effekter.

Praktisk FRPEnter Bacon.js

I Bacon.js har adferd og hendelser andre navn.En adferd kalles en Property og hendelse en EventStream.

I Bacon.js innkapsler vi datakilder som reaktivedatatyper.fromEventTargetfromPromisefromCallback...med flere

Man bruker funksjonelle funksjoner over eventsog properties.

Bacon.fromEventTarget($('input'), 'keyUp') .map('.keyCode') .filter(function (code) { return code === 66; });

Alt i Bacon.js er ren javascript.

Live-kodingFlerbrukers chatte-system

Vi skal lage en enkel chat-klient basert påWebSockets