Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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. RxJS: Stream-basierte Denkweise


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

    View full-size slide

  2. Intro: Why Streams?
    P

    View full-size slide

  3. • various forms of asynchronicity in modern web applications


    • WebSockets


    • DOM Events


    • AJAX
    Dealing with Asynchronicity

    View full-size slide

  4. • programming paradigm


    • reacting to asynchronous events

    (e.g. user input, data updates, asynchronous responses)


    • data streams and propagation of change
    Reactive programming

    View full-size slide

  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

    View full-size slide

  6. Today's problem


    View full-size slide

  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

    View full-size slide

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

    View full-size slide

  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


    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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.

    View full-size slide

  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.

    View full-size slide

  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

    View full-size slide

  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.

    View full-size slide

  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

    View full-size slide

  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.

    View full-size slide

  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.

    View full-size slide

  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/

    View full-size slide