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

RxJS von Grund auf: Einführung in reaktives JavaScript

Yannick Baron
November 11, 2020

RxJS von Grund auf: Einführung in reaktives JavaScript

RxJS ist sehr mächtig. So mächtig, dass es Angular als zentrales Denk- und Programmiermodell für die interne Kommunikation unter Komponenten und Services auserkoren hat.

Sie fühlen sich noch nicht sicher genug, RxJS in vollem Umfang einzusetzen? Dann zeigt Ihnen Yannick in diesem Webinar wie Sie mit den notwendigen Ideen, Konzepten und Grundlagen, RxJS im Handumdrehen verstehen.

* Warum Streams?
* Asynchronität und das Observer Pattern
* Arbeiten mit RxJS
* Unsubscriben und Completen
* Lernen, sich bei RxJS selbst zu helfen

Yannick Baron

November 11, 2020

More Decks by Yannick Baron

Other Decks in Technology


  1. RxJS von Grund auf
    Einführung in reaktives JavaScript
    Yannick Baron

    View Slide

  2. Intro: Why Streams?

    View Slide

  3. • various forms of asynchronicity in modern web applications
    • WebSockets
    • DOM Events
    • AJAX
    Dealing with Asynchronicity

    View Slide

  4. • designed to handle asynchronicity
    • start running the moment you create it
    • will always resolve or reject
    • handles a single event/value

    → can pretty much only cover AJAX
    • not cancellable

    View Slide

  5. • software design pattern
    • a Subject notifies a list of Observers by calling a provided method
    • Observers register and unregister with the Subject
    • useful to be notified of multiple events or actions
    The observer pattern

    View Slide

  6. • programming paradigm
    • reacting to asynchronous events

    (e.g. user input, data updates, asynchronous responses)
    • data streams and propagation of change
    Reactive programming

    View Slide

  7. • 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, filtering...
    → for more than just HTTP requests
    Rx - Reactive Extensions

    View Slide

  8. • designed to handle asynchronicity
    • will generally not run until there is a subscriber
    • handles sequence of 0..N asynchronous events over time

    → can handle multiple forms of asynchronicity
    • can be unsubscribed from (can notify producer)
    • communicate change or updates to subscribers
    • combine multiple streams and define how data flows
    • many operators to help control the flow
    Rx - On Observables and Streams

    View Slide

  9. Practical Introduction
    working with RxJS

    View Slide

  10. • Observable

    data stream or source emitting data over time
    • Observer

    function that will be called when new data is emitted
    • Subscription

    one-sided connection between Observer and Observable
    • Operators (combination, filtering, transformation, ...)

    replace your observables with a modified one
    Observable, Observer, Subscription & Operators

    View Slide

  11. new Observable(observer => {

    observer.next('Value 1');

    observer.next('Value 2');


    return () => {

    // observer unsubscribed



    from(['Value 1', 'Value 2']);

    of('Value 1');

    create, fromEvent, interval, ...

    creating Observables is easy!

    wrap asynchronous actions
    several (12) creation operators
    [Examples: 01]

    View Slide

  12. • three events we can react to
    • next

    receive the next value going through the stream
    • error

    react to the observable throwing - no more values will be emitted

    observers unsubscribe - observable does not complete
    • complete

    observable completes without error - no more values will be emitted

    observers unsubscribe

    next, error, complete
    [Examples: 02, 03]

    View Slide

  13. • Observable

    data stream or source emitting data over time

    is cold / unicast: start upon subscription with new execution context

    → single listener (subscriber)
    • Subject (AsyncSubject / BehaviorSubject / ReplaySubject)

    is an Observable that we can tell when to next / error / complete

    hot / multicast: run without subscription and keep execution context

    → multiple listeners (subscriber)
    Subject & Observable - Hot & Cold
    [Examples: 04, 05]

    View Slide

  14. • Subject

    emits values regularly - you can miss values
    • AsyncSubject

    only emits the last value once the subject completes
    • BehaviorSubject (stateful)

    emits default value or last emitted value upon subscription, then regularly
    • ReplaySubject

    emits the last N values upon subscription, then regularly
    [Examples: 05, 06, 07, 08]

    View Slide

  15. • Operators (combination, filtering, transformation, ...)

    replace your observables with a modified one
    • https://rxmarbles.com/
    Operators and marble diagrams
    Events over time
    Resulting Observable

    View Slide

  16. Unsubscribing and Completion
    Always unsubscribe?

    View Slide

  17. • notifies Subject to remove Observer
    • Observable can perform cleanup logic

    e.g. cancelling an http request, unsetting timers, closing connections, ...
    • will stop Subscription from executing

    if subscription is kept alive on a destroyed Component, it will still execute

    can cause memory leaks
    • possibility to unsubscribe via operators
    • Subject completion causes the Observers to unsubscribe
    [Examples: leak]

    View Slide

  18. • No... Well... Not directly...
    • ... if you know exactly what you are doing.
    • Always unsubscribing is the safest way to prevent leaks or side-effects

    good first step

    more comfortable with RxJS → easily identify when to unsubscribe
    • Unsubscribe cleverly. At the right moment. In the most elegant way.

    reason about it - make your app behave the way you need it to

    make use of operators

    (In Angular: async pipe unsubscribes for you!)

    Do we always have to unsubscribe?

    View Slide

  19. Getting Help
    learning to help yourself

    View Slide

  20. • https://www.learnrxjs.io/

    explains all operators with examples and more
    • https://rxmarbles.com/

    visual representation of some operators
    • https://stackblitz.com/

    quickly construct a demo for your use case
    • https://rxjs-dev.firebaseapp.com/operator-decision-tree

    helps you find the right operator, good in the beginning
    Great resources

    View Slide

  21. It's a wrap!

    View Slide