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/