Reactive programming
- 2. Programming Types Hardest part while learning Reactive Programming => THINKING IN REACTIVE Programming Types - Imperative (Stateful) - Declarative - Functional (Stateless) - Reactive
- 3. Programming Types IMPERATIVE Imperative programming is a programming paradigm that uses statements that change a program’s state.
- 4. Programming Types DECLARATIVE Declarative programming is a programming paradigm … that expresses the logic of a computation without describing its control flow.
- 5. Programming Types REACTIVE - Wikipedia => it is like a description in a CS book which is generic and theoretical - Reactive manifesto => it is so generic for a developer with dirty hands - Stackoverlow => Look at stackoverflow and never look back to reactive programming again. Morale killing explanations, hard and most advanced stuff without explaining its core. Reactive programming is programming with asynchronous data streams Nothing new just made easier! It is like dealing with event streams such as => - Event buses - Click events Streams are cheap, anything can be a stream: - Variables, - User inputs - Caches etc. YOU CAN LISTEN THESE STREAMS AND REACT ACCORDINGLY
- 6. Can use my regular mapping, filtering? YES RX Library provides amazing toolbox of functions to combine, create and filter those streams RX uses functional magic too! => - A stream can be used as an input to another one - Multiple streams can be used as inputs to another stream - Streams can be merged - Streams can be filtered - Data values in a particular stream can be mapped from one stream to another
- 7. What is at the center of Reactive Programming STREAMS Clicking on a button stream
- 8. Streams A stream is a sequence of ongoing events ordered in time. It can emit 3 things => - Value (of some type) - Error - Completed signal Consider that the “completed” takes place, for instance, when the current window or view containing that button is closed
- 9. Streams We capture these emitted values asynchronously => How? => - A function which will invoke after the value is emitted - A function which will invoke after an error is emitted - A function which will invoke after completed is emitted Listening a stream is called => SUBSCRIPTION / SUBSCRIBING Sometimes last 2 can be omitted. Only value emission is taken into account. • Functions we are defining are called OBSERVERS. • Stream is being observed by observers. Therefore it is the subject. That’s why we call it OBSERVABLE
- 10. Streams --a---b-c---d---X---|-> a, b, c, d are emitted values X is an error | is the 'completed' signal ---> is the timeline
- 11. Streams clickStream: ---c----c--c----c------c--> vvvvv map(c becomes 1) vvvv ---1----1--1----1------1--> vvvvvvvvv scan(+) vvvvvvvvv counterStream: ---1----2--3----4------5--> Each stream has many functions attached to it, such as map, filter, scan, etc. When you call one of these functions, such as clickStream.map(f), it returns a new stream based on the click stream. - Original stream is not modified. It is called immutability. - Non modified streams allows us to chain functions => clickStream.map(mapFn).scan(addFn)
- 12. Stream example • Lets make a stream of “double click” events. Or lets make “triple click” events! • Imagine how we would do that in a traditional imperative and stateful way. REACTIVE PROGRAMMING filters the implementation to 4 lines of code =>
- 13. - Grey boxes are functions transforming one stream into another. - We can then subscribe ("listen") to it to react accordingly how we wish * We can apply the same operations on different kinds of streams, on a stream of API responses
- 14. Why should we consider Reactive Programming • Raises the level of abstraction Focus on business logic, don’t think about implementation details Thinking in RP with examples => Rx library family is available for => (.NET, Java, Scala, Clojure, JavaScript, Ruby, Python, C++, Objective-C/Cocoa, Groovy, etc) http://reactivex.io/languages.html Through our presentation we will use RxJS
- 15. Implementing “Who to follow” suggestions box
- 16. RX Example 1. Doing the request 2. Getting the request 3. Rendering the response --a------|-> Where a is the string 'https://api.github.com/users'
- 17. RX Example • To create such stream with a single value is simple in RX. Official terminology for a stream is => Observable.
- 18. RX Example
- 19. RX Example Rx.Observable.create => Creates your own custom stream by explicitly informing each observer (or in other words, a "subscriber") about data events (onNext()) or errors (onError()). What we did was just wrap that jQuery Ajax Promise. PROMISE IS AN OBSERVABLE => YES! OBSERVABLE IS PROMISE ++
- 20. RX Example In RX we can easily convert Promise to an observable by using Rx.Observable.fromPromise(promise) What we have created is stream of streams (metastream)
- 22. RX Example • What we just wanted was a simple stream of users (an Array each time). A . Not a stream of streams. requestStream: --a-----b--c------------|-> responseStream: -----A--------B-----C---|-> (lowercase is a request, uppercase is its response)
- 23. RX Example
- 24. RX Example Refresh Button But something broke => A request doesn’t happen anymore on startup SOLUTION => Merging requestOnRefreshStream with startupRequestStream
- 25. RX Example stream A: ---a--------e-----o-----> stream B: -----B---C-----D--------> vvvvvvvvv merge vvvvvvvvv ---a-B---C--e--D--o----->
- 26. RX Example There is a cleaner way of writing it => Even cleaner
- 27. RX Example Even more cleaner Look at startWith from rxjs docs
- 28. RX Example We want ‘on Refresh’ => ‘Clear suggestions’ Modelling Suggestions
- 29. RX Example When rendering, we interpret null as “no-data”, hence hiding its UI element
- 30. RX Example We can empty suggestions during startup
- 31. RX Example Closing suggestions and using cached responses This DOES NOT WORK
- 32. RX Example Let’s think about it In RX there is combineLatest operator
- 33. RX Example
Editor's Notes
- #12: The map(f) function replaces (into the new stream) each emitted value according to a function f you provide. In our case, we mapped to the number 1 on each click. The scan(g) function aggregates all previous values on the stream, producing value x = g(accumulated, current), where g was simply the add function in this example. Then, counterStream emits the total number of clicks whenever a click happens.