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.

Watch User Created Playlist (18)

This playlist is user created.

pro-course-rss-logo

PRO RSS Feed

Starting a Stream with SwitchMap

Stopping a Stream with TakeUntil

P

Updating Data with Scan

P

Displaying Initial Data with StartWith

P

Changing Behavior with MapTo

P

Handling Multiple Streams with Merge

P

Refactoring Composable Streams in RxJS

P

Getting Input Text with Map

P

Combining Streams with CombineLatest

P

Adding Conditional Logic with Filter

P

Completing a Stream with TakeWhile

P

Handling a Complete Stream with Reduce

P

Logging a Stream with Do

P

Timer and Input Recap

P

Refactoring CombineLatest to WithLatestFrom

P

Resubscribing to a Stream with Repeat

P

Basic DOM Rendering with Subscribe

P

Sharing Streams with Share

P
rxjs tutorial about Starting a Stream with SwitchMap

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.

rxjs tutorial about Stopping a Stream with TakeUntil

Stopping a Stream with TakeUntil

4:10 rxjs PRO

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.

rxjs tutorial about Updating Data with Scan

Updating Data with Scan

2:10 rxjs PRO

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.

rxjs tutorial about Displaying Initial Data with StartWith

Displaying Initial Data with StartWith

1:06 rxjs PRO

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.

rxjs tutorial about Changing Behavior with MapTo

Changing Behavior with MapTo

2:32 rxjs PRO

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.

rxjs tutorial about Handling Multiple Streams with Merge

Handling Multiple Streams with Merge

2:59 rxjs PRO

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.

rxjs tutorial about Refactoring Composable Streams in RxJS

Refactoring Composable Streams in RxJS

4:44 rxjs PRO

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.

rxjs tutorial about Getting Input Text with Map

Getting Input Text with Map

1:46 rxjs PRO

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.

rxjs tutorial about Combining Streams with CombineLatest

Combining Streams with CombineLatest

3:08 rxjs PRO

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.

rxjs tutorial about Adding Conditional Logic with Filter

Adding Conditional Logic with Filter

1:01 rxjs PRO

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.

rxjs tutorial about Completing a Stream with TakeWhile

Completing a Stream with TakeWhile

1:19 rxjs PRO

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.

rxjs tutorial about Handling a Complete Stream with Reduce

Handling a Complete Stream with Reduce

1:21 rxjs PRO

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.

rxjs tutorial about Logging a Stream with Do

Logging a Stream with Do

1:34 rxjs PRO

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.

rxjs tutorial about Timer and Input Recap

Timer and Input Recap

2:54 rxjs PRO

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

rxjs tutorial about Refactoring CombineLatest to WithLatestFrom

Refactoring CombineLatest to WithLatestFrom

2:17 rxjs PRO

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

rxjs tutorial about Resubscribing to a Stream with Repeat

Resubscribing to a Stream with Repeat

2:04 rxjs PRO

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.

rxjs tutorial about Basic DOM Rendering with Subscribe

Basic DOM Rendering with Subscribe

1:06 rxjs PRO

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.

rxjs tutorial about Sharing Streams with Share

Sharing Streams with Share

4:00 rxjs PRO

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.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?