RxJs Under the Hood

A presentation aiming to demystify RxJs by implementing simplified versions of some commonly used Observables and Operators. Moreover, how to build our application business logic as composable custom Observables and Operators according to best practices.

Note: To access/run the examples referenced by the underlined words of the presentation you have to download the pdf to your computer.

Transcript

1. Under the hood of RxJs Managing our Reactive, Side Effected world
2. ...to better understand RxJs by implementing simplified versions of some commonly used Observables and Operators and... Scope of this Session is... 2
3. ...to present how to build our application business logic as composable custom Observables and Operators according to best practices ...and 3
4. Observables and Operators 4 { fromEvent(...) 1 2 3 4 5 6 7 8 2 3 4 5 6 7 8 9 { map(x => x + 1) { An Operator creates one output stream out of a given input stream. This new stream provides altered data or flow from the given one. An Observable is a producer of a stream of data that others consume (observe).
5. interval Let’s See Some widely used Observables 5
6. of Let’s See Some widely used Observables 6
7. zip Let’s See Some widely used Observables 7
8. ...all together to understand their concurrent nature Let’s See Some widely used Observables 8
9. ... let’s build an oversimplified version of the Observable class The class Observable 9
10. Let’s build some simplified version of the observables: • of • interval • zip - (or a more complete simplified zip) Let’s Build Some widely used Observables 10
11. ...observables can be merged 11 { fromEvent(..) 1 3 4 8 { from(...) A B C E D { B C E D 1 3 A 4 8 merge
12. ...observables of observables 12
13. ...observables can be chained 13 1 2 3 4 5 6 7 8 2 3 4 5 6 7 8 9 { map(x => x + 1) { 2 4 6 8 { filter(x => x % 2 === 0) { { scan((x, y) => x + y, 0) { 2 6 12 20
14. Streams 101 for List users :) 14 On streams we perform similar operations as in lists: List Stream forEach subscribe map map filter filter reduce reduce groupBy groupBy
15. Let’s build some simplified version of map Let’s build some known operators 15
17. Let’s build some simplified version of filter Let’s build some known operators 17
19. Let’s build some simplified version of reduce / scan Let’s build some known operators 19
21. Let’s build some simplified version of groupBy Let’s build some known operators 21
23. How these operators differ: • mergeMap • switchMap mergeMap and switchMap operators 23
24. switchMap operator 24
25. There are provided 3 scheduling strategies for observables: • queueScheduler • asapScheduler • asyncScheduler Let’s see some code that demonstrates their differences Schedulers in RxJs 25
26. Let’s build an operator that serializes the merged observable produced by a sequence of operators, First let’s define a problem… sequence operator Now Let’s Build a Custom Operator 26
27. Then let’s try three solutions: • A naive solution • A solution using the operators of RxJs • A better solution using the operators of RxJs • sequenceBy - an another similar operator Now Let’s Build a Custom Operator 27
28. Before we build one operator is good to study well the existing ones and be sure that the provided RxJs operators do not provide the functionality needed Custom Operators Lesson Learned 28
29. Some more indicative sample operators: • triplewise • previousCurrentNext • onOff and a more complete onOff • withLastFlag / withLastFlag using Notifications • tryOperatorsCatchError Some more Custom Operators 29
30. Side effects free observables and IO 30 DB AJAX ...IO in out in in out out Side effect free merged observables - Business Logic - merged observables with side effects - IO Management - controler Observable
31. www.agileactors.com | www.linkedin.com/company/agile-actors/ www.learningactors.com | www.linkedin.com/company/learning-actors/