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