Step-by-Step Async JavaScript with RxJS

RxJS is tremendously helpful in working with asynchronous code, but you’ve probably been stuck trying to use concepts you already know from Promises or Callbacks and applying them directly to RxJS. These lessons walk you through the step-by-step of building a simple game application with many asynchronous pieces. Each lesson focuses on a single operator or idea of how RxJS helps simplify your code as well as making you code flexible enough to easily add more asynchronous pieces as your codebase grows.

Starting a Stream with SwitchMap

5:48 rxjs

As developers, we tend to carry over ideas from past experience and try to reapply them to something new. This lesson teaches you about why you should usually favor switchMap over subscribe and why thinking about subscribe as an event handler can lead to problems.

Stopping a Stream with TakeUntil

4:10 rxjsPRO

Observables often need to be stopped before they are completed. This lesson shows how to use takeUntil to stop a running timer. Then we use the starting stream and the stopping stream together to create a simple stopwatch.

Updating Data with Scan

2:10 rxjsPRO

You often need to update the data flowing through the stream with custom logic based on what you need to output. This lesson covers how to use scan for collecting and updating the outputs as your stream progresses.

Displaying Initial Data with StartWith

1:06 rxjsPRO

You often need to render out data before you stream begins from a click or another user interaction. This lessons shows how to use startWith to set the initial output before you trigger your stream.

Changing Behavior with MapTo

2:32 rxjsPRO

You often need streams to trigger different behaviors on the data based on which streams triggers. This lessons shows how to use mapTo to pass functions into the scan operator and have completed control over you data.

Handling Multiple Streams with Merge

2:59 rxjsPRO

You often need to handle multiple user interactions set to different streams. This lesson shows hows Observable.merge behaves like a "logical OR" to have your stream handle one interaction OR another.

Refactoring Composable Streams in RxJS

4:44 rxjsPRO

Refactoring streams in RxJS is mostly moving pieces of smaller streams around. This lessons demonstrates a simple refactoring by requiring the StopWatch to be more configurable.

Getting Input Text with Map

1:46 rxjsPRO

By default, Inputs will push input events into the stream. This lesson shows you how to use map to convert the input event into the text you actually want.

Combining Streams with CombineLatest

3:08 rxjsPRO

Two streams often need to work together to produce the values you’ll need. This lesson shows how to use an input stream and an interval stream together and push an object with both values through the stream.

Adding Conditional Logic with Filter

1:01 rxjsPRO

Often you only want values to proceed through your stream if they meet certain criteria, just as if you were using an if statement in plain JavaScript. This lesson shows you how to use filter on your stream to only push the values that you need through your stream.

Completing a Stream with TakeWhile

1:19 rxjsPRO

When you need to total up everything that has happened in your stream, you need to a way to tell your stream that it is “done”. This lesson covers how to use takeWhile to complete a stream.

Handling a Complete Stream with Reduce

1:21 rxjsPRO

When a stream has completed, you often need to evaluate everything that has happened while the stream was running. This lesson covers how to use reduce to collect values and total up a “score” of this simple game.

Logging a Stream with Do

1:34 rxjsPRO

To help understand your stream, you’ll almost always want to log out some the intermediate values to see how it has progressed during its lifespan. This lesson teaches you how to use do to log values in the middle of the stream without having an impact on the rest of the stream.

Timer and Input Recap

2:54 rxjsPRO

This lesson recaps everything we’ve covered about building a timer stream, and input stream, and how we’ve combined all their parts together.

Refactoring CombineLatest to WithLatestFrom

2:17 rxjsPRO

This lesson shows why it’s preferable to using withLatestFrom instead of combineLatest in certain scenarios.

Resubscribing to a Stream with Repeat

2:04 rxjsPRO

When you complete a stream, there’s no way to restart it, you must resubscribe. This lesson shows how repeat comes in handy to resubscribe after a stream has completed.

Basic DOM Rendering with Subscribe

1:06 rxjsPRO

While frameworks like Angular 2 and CycleJS provides great ways to update the DOM and handle subscriptions for you, this lesson shows how you can still do basic subscribe blocks and manually update the DOM on your own.

Sharing Streams with Share

4:00 rxjsPRO

A stream will run with each new subscription added to it. This lesson shows the benefits of using share so that the same stream can be shared across multiple subscriptions.