RxJS Fundamentals

RxJS 6 brings the concept of Observables and reactive programming to JavaScript and TypeScript. Rethink the way you manage state and asynchronous workflows, and set yourself up for all the benefits that come along with functional programming.

RxJS Fundamentals

Practical Reactive

After we have developed a reactive programming mental model, we can dive right into practical applications. We will build a series of apps and games that involve a high degree of asynchrony, and learn how to minimize state and side effects to improve reliability and robustness, the reactive way!

  • Practical ReactiveI’ve got a fever, and here’s the Rx

    At the heart of RxJS are a few new primitives: Observable, Observer, Subject and Schedulers. This library has “batteries included”, meaning it comes with a wide range of useful operators that we can compose together to create declarative, high-performance data pipelines. We will learn several ways to create and subscribe to observers.

  • Practical ReactiveEXERCISE 2: Creating and subscribing to observers

    In this exercise, we will create and subscribe to Observers in a variety of different situations. Through these exercises, we will explore the flexibility of RxJS and its capability to integrate easily with events, iterables, and Promises.

  • Practical ReactiveCancellation

    We can “stop” receiving information from an Observer, either through an explicit cancellation or through using operators like take() to implicitly limit how much data we receive. We will look at the differences between these two approaches, and valid use cases for each.

  • Practical ReactiveEXERCISE 3: Cancelling and Finishing Subscriptions

    Work through two examples involving cancellation of an observer: one where we know we only want a fixed number of values, and one where we need the ability to arbitrarily cancel at a set time.

  • Practical ReactiveLunch

    Break for lunch

  • Practical ReactiveError Handling

    Handling errors from Observables is both well-aligned with what we expect from Promises, and a bit more flexible. In particular, we will look at two useful Observable error-handling techniques that do not make sense in the context of Promises: retrying sequences and ignoring errors until the next successful response.

  • Practical ReactiveEXERCISE 4: Handling and recovering from errors

    We have an API endpoint for reading the current outdoor temperature, that can fail in a variety of ways (e.g. no internet connection, 500 server error, returning data in an unexpected format etc). Apply Observable error handling best practices to finish our thermometer app, optimizing for correctness and robustness.

  • Practical ReactiveCollection and Filtering Operators

    Operators are kind of like “arrays that push”, so it is no surprise that one of the easiest ways to work with them is through using higher order functions like map, filter and reduce. We will look at how these “lettable” operators can be composed to create a pipeline, ultimately allowing us to subscribe to a stream of values that have already been massaged, cleaned and processed.

  • Practical ReactiveEXERCISE 5: Build a "Simon" game

    Build a “Simon” game, making heavy use of Observables to handle events, keep score, and to ensure that the user presses the correct (matching) sequence of buttons.

  • Practical ReactiveAggregate Operators

    Aggregate operators allow us to iteratively build up a single value over an Observable’s sequence. We will explore the subset of these operators that come with RxJS, and highlight practical applications for each operator.

  • Practical ReactiveEXERCISE 6: TextArea With Stats

    Build a textarea that keeps track of various text statistics as the user types. All stats should be updated in “soft real time” as the user types.

  • Practical ReactiveSubjects

    Subjects are objects that implement both the Observer and Observable interfaces. Rx comes with three types of Subjects: BehaviorSubject, AsyncSubject and ReplaySubject. We will explore each Subject’s characteristics and highlight practical use cases.

  • Practical ReactiveEXERCISE 7: Chat App

    Finish implementing a chat application, making use of BehaviorSubject, AsyncSubject and ReplaySubject in the recommended ways.

  • Practical ReactiveTiming things right

    As we prepare to work with the idea of combining Observers, the passing of time is a factor we must examine closely. We will look at how the debounce and throttle operators can be used to clean up a “noisy” observable; how we can use an observable as a buffer for incoming data; and how we can apply Schedulers to control how elements of an observable are treated within the JavaScript runtime.

  • Practical ReactiveEXERCISE 8: Streaming Autocomplete

    Sign up for a themoviedb.org account and generate an API key. Build a movie search autocomplete, using debouncing and throttling best practices to avoid abusing the API and exceeding the API rate limit.

  • Practical ReactiveCombining Streams

    Despite what Ghostbusters advises us, we often need to combine Observables in various ways, so that we can subscribe to a single stream that emits a single sequence of values. There are many different pipeline operators that fit this description, and they produce a variety of different sequences. We will study our available options, using marble diagrams as visual aids, and begin to develop an intuition for selecting the right tool for the job.

  • Practical ReactiveEXERCISE 9: Pong

    We have the raw ingredients for a “Pong” game, but have no events, no motion on our ball, and no collision detection. Use Observables and the concept of combining streams to finish this game, taking care to minimize the number of un-necessary animation updates.

  • Practical ReactiveObservable Temperature

    We use the terms “hot” and “cold” to describe what a “late subscriber” will receive from an Observable. If a “late subscriber” starts listening to a “hot” Observable that’s already emitted some values, they will only get new items in the sequence. By contrast, “cold” observables start at the beginning of their sequence for each new subscriber. There are great use cases for both of these patterns, which we will explore in detail.

  • Practical ReactiveEXERCISE 10: Hot-To-Cold and Cold-To-Hot

    Create two functions: one that creates a “cold” observable from a “hot” one, and one that creates a “hot” observable from a cold one.

  • Practical ReactiveTesting

    The testing story for Rx observables and operators has come a long way over the past several years. We can use “marble diagrams” (the ASCII art equivalent) to declaratively assert that observables emit the expected sequence. We will look at how this is done, and how we can structure our Rx code to make testing easy.

  • Practical ReactiveEXERCISE 11: Writing Tests For Observers

    You will be provided with a variety of functions that return observables. Write a series of marble diagram tests for these functions, and fix any bugs you may discover along the way.