$30 off During Our Annual Pro Sale. View Details »

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

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

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.

Nachdem wir uns im ersten Teil intensiv mit den Grundbausteinen von RxJS beschäftigt haben und dann im zweiten Teil sehr intensiv auf Operatoren und Operatorenketten eingegangen sind, nehmen wir uns in diesem Webinar einen Anwendungsfall aus der Realität vor. 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.

Yannick Baron

June 30, 2021
Tweet

More Decks by Yannick Baron

Other Decks in Programming

Transcript

  1. RxJS: Stream-basierte Denkweise


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

    View Slide

  2. Intro: Why Streams?
    P

    View Slide

  3. • various forms of asynchronicity in modern web applications


    • WebSockets


    • DOM Events


    • AJAX
    Dealing with Asynchronicity

    View 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 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 Slide

  6. Today's problem


    View 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 Slide

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

    View 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 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 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 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 Slide

  13. • Operator decision tree


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

    View 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
    https://rxmarbles.com/#race
    race:


    The observable to emit
    fi
    rst is used.

    View 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 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
    tap:


    Transparently perform actions or
    side-effects, such as logging.

    View 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 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/#debounceTime
    debounceTime:


    Discard emitted values that take less
    than the speci
    fi
    ed time between output.

    View 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

    View Slide

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

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

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

    View Slide

  23. 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 Slide