Bart

Introduksjon til Funksjonell Reaktiv Programmering (FRP)

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

Mikael Brevik

  • Konsulent hos BEKK
  • Bachelor fra HIST (2011), Master fra NTNU (2013).

Tidvis open source utvikler og standhaftig surfer på internett. Er å finne på Github som @mikaelbr og Twitter @mikaelbrevik. Regelmessig googler og Stackoverflow-leser.

Mikael Brevik

Agenda

  1. Teoretisk perspektiv
  2. Bacon.js
  3. Livekoding og magi

Hva er Functional Reactive Programming?

Kombinasjonen mellom to paradigmer:

  1. Funksjonell programmering
  2. Reaktiv programmering

Funksjonell programmering

En deklarativ programmeringsparadigme med funksjoner 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 rene funksjoner

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

[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 å holde systemet kontinuerlig oppdatert med omgivelsene.

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

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

Funksjonell Reaktiv Programmering

To generelle konsepter

  1. Behaviours (Adferd)
  2. Events (Hendelse)

Adferder

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

Hendelser

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

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

Gevinst av FRP

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

Praktisk FRP

Enter 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 reaktive datatyper.

  • fromEventTarget
  • fromPromise
  • fromCallback
  • ...med flere

Man bruker funksjonelle funksjoner over events og properties.

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

Alt i Bacon.js er ren javascript.

Live-koding

Flerbrukers chatte-system

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

Chat client