RxJS von Grund auf: Stream-basierte Denkweise - am konkreten

RxJS unterstützt bei der Bewältigung asynchroner Probleme verschiedener Art, nicht nur bei AJAX-Requests. Allerdings erfordert das Stream-basierte Paradigma ein Umdenken für den Entwickler.

An einem konkreten Beispiel leiten wir eine Lösung ohne den Einsatz von RxJS her und stellen dieser eine elegante Lösung gegenüber, die sich den passenden Operatoren bedient.

Agenda
* Kurze Motivation
* Vorstellung des Problems: Synchronisiertes Scrollen zweier Textboxen
* Naiver Lösungsansatz
* Verbesserte Lösung
Stream-basierte Lösung mit RxJS

Transcript

1. RxJS: Stream-basierte Denkweise am konkreten Beispiel Yannick Baron @yannick_baron https://www.thinktecture.com/yannick-baron
2. Intro: Why Streams? P
3. • various forms of asynchronicity in modern web applications • WebSockets • DOM Events • AJAX Dealing with Asynchronicity
4. • programming paradigm • reacting to asynchronous events 
 (e.g. user input, data updates, asynchronous responses) • data streams and propagation of change Reactive programming
5. • library implementing the Observer pattern • API to describe data streams • shines when handling multiple reactive events • lots of useful operators 
 retrying, error handling, delaying, timing, fi ltering... → for more than just HTTP requests Rx - Reactive Extensions
6. Today's problem
7. • 2 containers: main and side • when scrolling one, the other needs to stay in sync • real world problem I have encountered 
 Goals: • solve problem • transition to stream based solution Problem de fi nition: synchronize scrolling
8. • when one container scrolls, set the scroll position of the other Naive solution
9. • when one container scrolls, set the scroll position of the other Caveats: • setting the scroll position results in emitting a scroll event • results in cyclic updates • will converge, causes fl ickering Naive solution
10. • determine which container scrolled fi rst • ignore events from second container • update scroll position of the other container • wait for 100ms with no scroll events • reset Advanced solution
11. • determine which container scrolled fi rst • ignore events from second container • update scroll position of the other container • wait for 100ms with no scroll events • reset Stream-based solution with RxJS P
12. • determine which container scrolled fi rst • ignore events from second container • update scroll position of the other container • wait for 100ms with no scroll events • reset Stream-based solution with RxJS
13. • determine which container scrolled fi rst • ignore events from second container • update scroll position of the other container • wait for 100ms with no scroll events • reset Stream-based solution with RxJS https://rxmarbles.com/#race race: The observable to emit fi rst is used.
14. • determine which container scrolled fi rst • ignore events from second container • update scroll position of the other container • wait for 100ms with no scroll events • reset Stream-based solution with RxJS tap: Transparently perform actions or side-effects, such as logging.
15. • determine which container scrolled fi rst • ignore events from second container • update scroll position of the other container • wait for 100ms with no scroll events • reset Stream-based solution with RxJS
16. • determine which container scrolled fi rst • ignore events from second container • update scroll position of the other container • wait for 100ms with no scroll events • reset Stream-based solution with RxJS https://rxmarbles.com/#debounceTime debounceTime: Discard emitted values that take less than the speci fi ed time between output.
17. • determine which container scrolled fi rst • ignore events from second container • update scroll position of the other container • wait for 100ms with no scroll events • reset Stream-based solution with RxJS
18. • determine which container scrolled fi rst • ignore events from second container • update scroll position of the other container • wait for 100ms with no scroll events • reset Stream-based solution with RxJS https://rxmarbles.com/#repeat repeat: Repeats an observable on completion.
19. • determine which container scrolled fi rst • ignore events from second container • update scroll position of the other container • wait for 100ms with no scroll events • reset Stream-based solution with RxJS https://rxmarbles.com/#repeat https://rxmarbles.com/#take repeat: Repeats an observable on completion. take: Emit provided number of values before completing.
20. It's a wrap! https://www.thinktecture.com/yannick-baron • Ask me your RxJS Questions in an Expert 1on1! • Did you enjoy this Webinar? Learn more in my 3-part article series: 
 https://www.thinktecture.com/en/angular/rxjs-antipattern-1-nested-subs/