1.
Functional
Reactive
Programming

2.
Reactive?
Å reagere på asynkrone hendelser
Web applikasjon er reactive:
Mouse clicks, key presses, async data fra
server

3.
Hvordan være reactive?
State brukes til å representere systemet på et gitt
tidspunkt
Vanskelig med feilhåndtering
Bruk av mye state fører til kompleks spaghettikode

4.
Functional Reactive
Programming to the
rescue!

5.
Functional Reactive Programming
http://stackoverflow.com/questions/1028250/what-is-functional-reactive-programming/1030631#1030631

6.
Datatypes som representerer en verdi over tid
med verktøy fra funksjonell programmering.
• Composition
• Event streams
• Tools
Functional Reactive Programming

7.
Functional
Event streams er Immutable
Operasjoner på en event stream
returnerer alltid en ny event stream.

8.
Event streams
En sekvens av events sortert i tid
En event stream kan sende ut:
• Values
• Errors
• Completed signal
Click Click Click Click
X Time
CompletedError

9.
Event streams
Å lytte på en stream kalles subscribing.
Fungerer som en asynkron callback akkurat som
promises!
Observer Design Pattern
• Subject: Event Stream
• Observer: Subscriber

10.
Event streams
ALT kan være en stream!
DOM events, user input, properties, promises
Streams kan være input til andre streams
Streams kan filtreres, slås sammen og
manipuleres

11.
Reactive Extensions (Rx*):
.NET, Java, Scala, Clojure, JavaScript, Ruby,
Python, C++, Objective-C/Cocoa, Groovy
Bacon.js
Elm - A functional reactive language
Rammeverk (Tools)

12.
Bacon.js
“Turns your event spaghetti into clean
and declarative feng shui bacon"

13.
Lage en event stream
• $(“#myDiv").asEventStream("click")
• Bacon.fromPromise(…)
• Bacon.fromEventTarget(..)
• Bacon.fromCallback(…), Bacon.fromNodeCallback(…)
• Bacon.fromPoll(..)
• Bacon.once(…), Bacon.never(), Bacon.later(…)
• Bacon.fromArray(…)
• Bacon.interval(…)
• Bacon.sequentially(…)
• Bacon.repeatedly(…)
• new Bacon.EventStream()

14.
Transformere en event stream ved
å bruke funksjoner som
map, scan, fold, flatMap

15.
Transformere event streams
map(f)
Utfører en funksjon f på alle verdier i en event stream.
scan(seed, f)
Som map(f) men med en seed-verdi som sendes inn i neste
funksjon.
fold(seed, f) (reduce)
Som scan, men fold sender bare ut sluttverdien.
flatMap(f)
Som map(f), men hvor f returnerer event streams. flatMap vil flate
ut alle event streams returnert fra f og returnere disse som én event
stream.

16.
Påvirk når verdier kommer ut av en
event stream med funksjoner som
debounce, debounceImmediate, throttle,
bufferingThrottle, delay, slidingWindow

17.
Filtrer event streams med funksjoner som
filter, take, skip, takeWhile, skipWhile,
takeUntil, skipUntil

18.
Slå sammen streams
med funksjoner som
merge, zip og concat

19.
Thinking reactive

20.
Thinking reactive
• Alt kan representeres som en stream
• Sett sammen og manipuler streams til bedre
spesialiserte streams til formålet
• GUI-rendring i subscribe-funksjon

21.
Demo - click events

22.
Demo - drag drop
Hva er gjør man når man drar en ting rundt på
skjermen?
1. Start: Mouse down
2. Flytt: Mouse move
3. Stop: Mouse up

23.
Demo - Konami Code
Alle nettsider med respekt for seg selv må ha
innebygde easter eggs.
↑ ↑ ↓ ↓ ← → ← → B A

24.
Fordeler med FRP
• Abstraherer bort implementasjonsdetaljer
• Mindre state
• Immutable event streams gjør det lett å gjenbruke
• Forutsigbar kode

25.
Dette høres ut som
noe hipster tøys

26.
Hvem bruker FRP?
Facebook
Flux/React
Netflix
RxJava

27.
Dette ble litt mye å huske på
Koden fra demo
https://github.com/olavhaugen/fagkveld-frp
The introduction to Reactive Programming
you've been missing
https://gist.github.com/staltz/868e7e9bc2a7b8c1f754
(Bare google: “Reactive programming”)
Bacon.js
https://github.com/baconjs/bacon.js/
http://baconjs.blogspot.fi/
RxMarbles
http://rxmarbles.com/