RxJS: Stream-basierte Denkweise am konkreten Beispiel Yannick Baron @yannick_baron https://www.thinktecture.com/yannick-baron

Intro: Why Streams? P

• various forms of asynchronicity in modern web applications • WebSockets • DOM Events • AJAX Dealing with Asynchronicity

• programming paradigm • reacting to asynchronous events 
 (e.g. user input, data updates, asynchronous responses) • data streams and propagation of change Reactive programming

• 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

Today's problem

• 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

• when one container scrolls, set the scroll position of the other Naive solution

• 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

• 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

• 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

• 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

• Operator decision tree https://rxjs-dev. fi rebaseapp.com/operator-decision-tree Finding the right operator

• 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.

• 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

• 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.

• 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

• 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.

• 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

• 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.

• 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.

race: The observable to emit fi rst is used. tap: Transparently perform actions or side- effects, such as logging. debounceTime: Discard emitted values that take less than the speci fi ed time between output. take: Emit provided number of values before completing. repeat: Repeats an observable on completion. Stream-based solution with RxJS

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/