Recommended
Recommended
More Related Content
Featured
Featured (20)
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!
- 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
- 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
- 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/