Functional Reactive Programming

Reactive?

Å reagere på asynkrone hendelser

Web applikasjon er reactive: Mouse clicks, key presses, async data fra server

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

Functional Reactive Programming to the

rescue!

Functional Reactive Programming

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

Datatypes som representerer en verdi over tid med verktøy fra funksjonell programmering.

• Composition • Event streams • Tools

Functional Reactive Programming

Functional

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

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

Event streams

Å lytte på en stream kalles subscribing. Fungerer som en asynkron callback akkurat som promises!

Observer Design Pattern• Subject: Event Stream • Observer: Subscriber

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

Reactive Extensions (Rx*): .NET, Java, Scala, Clojure, JavaScript, Ruby, Python, C++, Objective-C/Cocoa, Groovy

Bacon.js

Elm - A functional reactive language

Rammeverk (Tools)

Bacon.js

“Turns your event spaghetti into clean and declarative feng shui bacon"

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()

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

Transformere event streamsmap(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.

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

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

Slå sammen streams med funksjoner som

merge, zip og concat

Thinking reactive

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

Demo - click events

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

Demo - Konami Code

Alle nettsider med respekt for seg selv må ha innebygde easter eggs.

↑ ↑ ↓ ↓ ← → ← → B A

Fordeler med FRP

• Abstraherer bort implementasjonsdetaljer

• Mindre state

• Immutable event streams gjør det lett å gjenbruke

• Forutsigbar kode

Dette høres ut som noe hipster tøys

Hvem bruker FRP?

Facebook Flux/React

NetflixRxJava

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/