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 鍖ltreres, 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, 鍖atMap
- 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. 鍖atMap(f) Som map(f), men hvor f returnerer event streams. 鍖atMap vil 鍖ate 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 鍖lter, 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.鍖/ RxMarbles http://rxmarbles.com/