Step-by-Step Async JavaScript with RxJS

45 minutes

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.

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
rx tutorial about Starting a Stream with SwitchMap

Starting a Stream with SwitchMap

5:48 rx

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.

rx tutorial about Stopping a Stream with TakeUntil

Stopping a Stream with TakeUntil

4:10 rx 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.

rx tutorial about Updating Data with Scan

Updating Data with Scan

2:10 rx 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.

rx tutorial about Displaying Initial Data with StartWith

Displaying Initial Data with StartWith

1:06 rx 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.

rx tutorial about Changing Behavior with MapTo

Changing Behavior with MapTo

2:32 rx 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.

rx tutorial about Handling Multiple Streams with Merge

Handling Multiple Streams with Merge

2:59 rx 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.

rx tutorial about Refactoring Composable Streams in RxJS

Refactoring Composable Streams in RxJS

4:44 rx 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.

rx tutorial about Getting Input Text with Map

Getting Input Text with Map

1:46 rx 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.

rx tutorial about Combining Streams with CombineLatest

Combining Streams with CombineLatest

3:08 rx 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.

rx tutorial about Adding Conditional Logic with Filter

Adding Conditional Logic with Filter

1:01 rx 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.

rx tutorial about Completing a Stream with TakeWhile

Completing a Stream with TakeWhile

1:19 rx 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.

rx tutorial about Handling a Complete Stream with Reduce

Handling a Complete Stream with Reduce

1:21 rx 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.

rx tutorial about Logging a Stream with Do

Logging a Stream with Do

1:34 rx 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.

rx tutorial about Timer and Input Recap

Timer and Input Recap

2:54 rx 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.

rx tutorial about Refactoring CombineLatest to WithLatestFrom

Refactoring CombineLatest to WithLatestFrom

2:17 rx PRO

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

rx tutorial about Resubscribing to a Stream with Repeat

Resubscribing to a Stream with Repeat

2:04 rx 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.

rx tutorial about Basic DOM Rendering with Subscribe

Basic DOM Rendering with Subscribe

1:06 rx 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.

rx tutorial about Sharing Streams with Share

Sharing Streams with Share

4:00 rx 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.

Presented by:

John Lindquist

John Lindquist is a co-founder of egghead.io

John has spent the majority of his career developing Rich Web Applications. Before starting egghead.io, John worked at JetBrains as a WebStorm evangelist, and before that he was a Technical Architect at Isobar leading large teams in building the latest and greatest in web apps for the Air Force, HBO, and Bloomberg.

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