Foredrag holdt på Javascript Meetup i Trondheim; Bart.js. Kode fra live-koding kan finnes på https://github.com/mikaelbr/presentations/tree/gh-pages/bartjs/frp-livecode

2. Introduksjon til Funksjonell Reaktiv
Programmering (FRP)
Av @mikaelbrevik for første Bart.JS Meetup 4. februar.

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

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

5. Hva er Functional Reactive Programming?
Kombinasjonen mellom to paradigmer:
1. Funksjonell programmering
2. Reaktiv programmering

6. Funksjonell programmering

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

8. Deklarativ programmering forklarer hva som skjer.
Imperativ programmering forklarer hvordan det skal skje!

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

10. Vanlig med bruk av blant annet m pr d c og
a, eue
fle.
itr

11. [,2 3.a(ucin(){
1 , ]mpfnto i
rtr i*2
eun
;
};
)
/=[,4 6
/ 2 , ]

12. [,2 3.itrfnto (){
1 , ]fle(ucin i
rtr i%2==0
eun
= ;
};
)
/=[]
/ 2

13. [,2 3.euefnto (c,i {
1 , ]rdc(ucin ac )
rtr ac+i
eun c
;
};
)
/=6
/

14. Reaktiv programmering

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

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

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

18. 3
ADD
2
5

19. Funksjonell Reaktiv Programmering

20. To generelle konsepter
1. Behaviours (Adferd)
2. Events (Hendelse)

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

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

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

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

25. Praktisk FRP
Enter Bacon.js

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

27. I Bacon.js innkapsler vi datakilder som reaktive
datatyper.
foEetagt
rmvnTre
foPoie
rmrms
foClbc
rmalak
...med flere

28. Man bruker funksjonelle funksjoner over events
og properties.
BcnfoEetagt$'nu','eU'
ao.rmvnTre((ipt) kyp)
.a(.eCd'
mp'kyoe)
.itrfnto (oe {
fle(ucin cd)
rtr cd ==6;
eun oe = 6
};
)

29. Alt i Bacon.js er ren javascript.

30. Live-koding
Flerbrukers chatte-system

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