Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

RxJS - The Reactive Extensions for JavaScript


Published on

Slides from my talk (RxJS - The Reactive Extensions for JavaScript) at PragueJS / July 30th 2015

Published in: Engineering

RxJS - The Reactive Extensions for JavaScript

  1. 1. RxJS - The Reactive Extensions for JavaScript Viliam Elischer @vireliam
  2. 2. What is RxJS?
  3. 3. Reactive Extensions (Rx) is a library for composing asynchronous and event-based programs using observable sequences and LINQ-style query operators.
  4. 4. Reactive eXtensions offer a language neutral approach and polyglot implementation as well. JavaScript Java Scala Clojure Groovy C++ C# Ruby Python JRuby Kotlin Swift
  5. 5. Crafted by The Cloud Programmability Group at Microsoft
  6. 6. Why?
  7. 7. A Temporal dimension
  8. 8. Asynchronous programming tend to end up in callback hell
  9. 9. which is frustrating
  10. 10. Promises FTW but there are uses-cases when you need to: cancel or do bulk operations or get multiple values or do complex composition
  11. 11. RxJS is ideal for processing sequences that can contain any amount of values in any amount of time.
  12. 12. Core concepts
  13. 13. Design patterns Iterator ­ hasNext(), next() Observer ­ Subject, notify(), update()
  14. 14. Event | Stream | Sequence | Source Observable | Observer | Subscription | Disposable
  15. 15. An Event stream is a sequence of events. A Sequence is an observable Source. A Source can be observed and act as entry point.
  16. 16. An Observer registers its interest on an Observable through a Subscription. The Observable pushes data to the Observer. The Subscription returns a Disposable so the Observer can stop receive notifications before the sequence ends.
  17. 17. General theory of reactivity Single value Multiple values Pull / Sync / Interactive Object Iterables (Array / Set / Map) Push / Async / Reactive Promise Observable
  18. 18. Applied duality Array | Iterator - consumer synchronously pulls values from producer Observable | Observer - producer asynchronously pushes values to the consumer Enumerable collection interfaces IEnumerable<T>and IEnumerator<T>are dual to interfaces of observable collections IObservable<T>and IOberserver<T> Subject/Observer is Dual to Iterator by Erik Meijer
  19. 19. Stream endpoints Entry points / Sources: user input (click, mouseMove, keyUp), network (XHR, WS), setters, event listening Exit points / Subscribers: appState mutation, persistence, render, event emitting
  20. 20. Operators ~131
  21. 21. RP != FRP
  22. 22. Functional reactive programming How to build reactive systems using mathematical functions for describing the universe and it's components, keeping functional as the higher matter? The semantic model of FRP in side-effect free languages is typically in terms of continuous functions, and typically over time
  23. 23. FRP has well known and defined interfaces Values that vary over continuous (clock like) time (behaviors, signals) Events which have occurrences at discrete points in time. Originates from FRAN (Haskell's functional-reactive animation framework)
  24. 24. Reactive Programming aims onto handling of async sequences from multiple sources over time time isn't continuous but discrete, the universe is mutable (setters) and execution environment can be single-threaded (browser, node) Functional in RP is a quality of the implementation detail (HOF, map, filter, reduce) RX separates notion of time from reactivity and focuses more on concurrency
  25. 25. Reactive Programming compositional event processing
  26. 26. Examples
  27. 27. Observable creation from variables, arrays, promises, generators, events
  28. 28. Cancel async
  29. 29. Chaining
  30. 30. Map and FlatMap
  31. 31. TakeUntil
  32. 32. Scan vs Reduce
  33. 33. - withoutTransducing intermediary arrays
  34. 34. + +Subject State observable Global subject
  35. 35. Benefits of using RxJS?
  36. 36. Abstraction layer Composable Observables Clean Asynchronous Code Error handling Event processing Performance Client/Server
  37. 37. Less mutation of global state Set operations (Sync / Async) Improved WebSocket Support
  38. 38. Interoperability
  39. 39. Advanced topics
  40. 40. Schedulers as Concurrency providers Hot and Cold Observables Backpressure async function*- Reactive Webworkers Transducers async generators (ES7)
  41. 41. Alternatives
  42. 42. Bacon.js
  43. 43. Kefir.js
  44. 44. Resources
  45. 45. Gitter - Reactive-Extensions/RxJS
  46. 46. People Matthew Podwysocki - @mattpodwysocki Jafar Husain - @jhusain Ben Lesh - @BenLesh André Staltz - @andrestaltz
  47. 47. Q & A
  48. 48. Tank you!