RxJS from the ground up - Introduction to reactive JavaScript

RxJS is a very powerful tool and has been established in Angular as its central way of communication between Components and Services.

If you are not quite comfortable yet to use RxJS in all of its glory, then this Webinar is for you. Yannick is going to show you the basic concepts and ideas behind all of RxJS's moving parts, to make sure you can wield this powerful tool more confidently.

Agenda:
- Why streams?
- Asynchronicity and the observer pattern
- Working with RxJS
- Unsubscribing and completion
- Resources to help yourself

Transcript

1. RxJS from the ground up
   
   
   Introduction to reactive JavaScript
   Yannick Baron
   @yannick_baron
   https://www.thinktecture.com/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
   Promises
   
   
   

   View Slide

5. • software design pattern
   
   
   • a Subject noti
   fi
   es a list of Observers by calling a provided method
   
   
   • Observers register and unregister with the Subject
   
   
   • useful to be noti
   fi
   ed 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,
   fi
   ltering...
   
   
   → 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 de
   fi
   ne how data
   fl
   ows
   
   
   • many operators to help control the
   fl
   ow
   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,
    fi
    ltering, transformation, ...)
    

    replace your observables with a modi
    fi
    ed one
    Observable, Observer, Subscription & Operators
    

    View Slide

11. new Observable(observer => {

    observer.next('Value 1');

    observer.next('Value 2');

    observer.complete();

    

    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
    Subjects
    [Examples: 05, 06, 07, 08]
    

    View Slide

15. • Operators (combination,
    fi
    ltering, transformation, ...)
    

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

    View Slide

16. Unsubscribing and Completion
    Always unsubscribe?
    

    View Slide

17. • noti
    fi
    es 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
    Unsubscribing
    [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
    fi
    rst 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.
    fi
    rebaseapp.com/operator-decision-tree
    

    helps you
    fi
    nd the right operator, good in the beginning
    Great resources
    

    View Slide

21. It's a wrap!
    https://www.thinktecture.com/yannick-baron
    

    View Slide