Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

RxJS von Grund auf: Stream-basierte Denkweise -...

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

Yannick Baron

March 17, 2021
Tweet

More Decks by Yannick Baron

Other Decks in Technology

Transcript

  1. • various forms of asynchronicity in modern web applications •

    WebSockets • DOM Events • AJAX Dealing with Asynchronicity
  2. • programming paradigm • reacting to asynchronous events 
 (e.g.

    user input, data updates, asynchronous responses) • data streams and propagation of change Reactive programming
  3. • 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
  4. • 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
  5. • 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
  6. • 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
  7. • 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
  8. • 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
  9. • 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.
  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 Stream-based solution with RxJS tap: Transparently perform actions or side-effects, such as logging.
  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
  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 https://rxmarbles.com/#debounceTime debounceTime: Discard emitted values that take less than the speci fi ed time between output.
  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
  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 https://rxmarbles.com/#repeat repeat: Repeats an observable on completion.
  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 https://rxmarbles.com/#repeat https://rxmarbles.com/#take repeat: Repeats an observable on completion. take: Emit provided number of values before completing.
  16. 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/