Download as PDF, PPTX
![02 - [ASP.NET Core] ASP.NET Core MVC](https://cdn.slidesharecdn.com/ss_thumbnails/02-asp-170124120155-thumbnail.jpg?width=640&height=640&fit=bounds)
Functional Reactive Programming
- 1.
- 2. Reactive? Å reagere påasynkrone hendelser Web applikasjon er reactive: Mouse clicks, key presses, async data fra server
- 3. Hvordan være reactive? Statebrukes til å representere systemet på et gitt tidspunkt Vanskelig med feilhåndtering Bruk av mye state fører til kompleks spaghettikode
- 4. Functional Reactive Programming tothe rescue!
- 5.
- 6. Datatypes som representereren verdi over tid med verktøy fra funksjonell programmering. • Composition • Event streams • Tools Functional Reactive Programming
- 7. Functional Event streams erImmutable Operasjoner på en event stream returnerer alltid en ny event stream.
- 8. Event streams En sekvensav events sortert i tid En event stream kan sende ut: • Values • Errors • Completed signal Click Click Click Click X Time CompletedError
- 9. Event streams Å lyttepå en stream kalles subscribing. Fungerer som en asynkron callback akkurat som promises! Observer Design Pattern • Subject: Event Stream • Observer: Subscriber
- 10. Event streams ALT kanvæ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 eventspaghetti into clean and declarative feng shui bacon"
- 13. Lage en eventstream • $(“#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 eventstream ved å bruke funksjoner som map, scan, fold, flatMap
- 15. Transformere event streams map(f) Utføreren 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 verdierkommer ut av en event stream med funksjoner som debounce, debounceImmediate, throttle, bufferingThrottle, delay, slidingWindow
- 17. Filtrer event streamsmed funksjoner som filter, take, skip, takeWhile, skipWhile, takeUntil, skipUntil
- 18. Slå sammen streams medfunksjoner som merge, zip og concat
- 19.
- 20. Thinking reactive • Altkan representeres som en stream • Sett sammen og manipuler streams til bedre spesialiserte streams til formålet • GUI-rendring i subscribe-funksjon
- 21. Demo - clickevents
- 22. Demo - dragdrop 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 - KonamiCode 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 utsom noe hipster tøys
- 26.
- 27. Dette ble littmye å 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/