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.

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