Rx.js Fundamentals

Steve Kinney

Steve Kinney

Temporal
3 hours, 57 minutes CC
Rx.js Fundamentals

Course Description

Rx.js is a really useful JavaScript library for managing events that happen over time. You'll learn the foundation of Rx.js by creating an observable, which is the fundamental building block of Rx.js, from scratch. Then learn to manipulate data that arrives over time with operators. And build up to orchestrating multiple API requests to craft complex asynchronous experiences. By the end of the course, you'll be able to solve common UX patterns that would be otherwise tricky in vanilla JavaScript!

This course and others like it are available as part of our Frontend Masters video subscription.

Preview
Close

Course Details

Published: January 25, 2022

Learn Straight from the Experts Who Shape the Modern Web

Your Path to Senior Developer and Beyond
  • 200+ In-depth courses
  • 18 Learning Paths
  • Industry Leading Experts
  • Live Interactive Workshops
Get Unlimited Access Now

Table of Contents

Introduction

Section Duration: 9 minutes
  • Introduction
    Steve Kinney introduces the course by discussing a brief overview of the material to be covered in the course, what Rx.js is, and various reasons to learn Rx.js to handle events. Handling multiple APIs, loading indicators, and dragging and dropping are some of the events Rx.js can help improve.

Observables

Section Duration: 40 minutes

Intervals & Timers

Section Duration: 9 minutes

Operators

Section Duration: 30 minutes

Manipulating Time

Section Duration: 21 minutes
  • Manipulating Time
    Steve demonstrates using various operators in Rx.js that manipulate time, including throttleTime, debounceTime, delay, debounce, and throttle. A student's question regarding how Rx.js handles how much resource load will be placed when setting wait times is also covered in this segment.
  • Merging Timelines
    Steve discusses strategies for combining and merging multiple Observables. A demonstration of combining two streams using the merge, concat, and race operators is also provided in this segment.

Higher Order Observables

Section Duration: 21 minutes

Fetching from an API

Section Duration: 1 hour, 30 minutes
  • Fetching from an API
    Steve demonstrates fetching data from an API using mergeMap and exhaustMap to handle requests. A brief walkthrough of error handling and handling a delayed response with an Observable is also covered in this segment.
  • catchError Operator & Retry
    Steve walks through using the catchError operator to catch an Observable instead of letting it through. Errors must be caught in the same scope as the error is thrown.
  • Creating an API Data Stream
    Steve demonstrates creating an API data stream using exhaustMap, mapTo, switchMap, and merging fetch and stop events. The data stream will automatically refresh at regular intervals and fetch new data from the API.
  • Async UI
    Steve walks through creating an autocomplete function for a search input that utilizes switchMap to handle delayed API responses. The operator debounceTime is also used to delay sending the new fetch request until the user pauses.
  • Loading Data Over Time
    Steve live codes an improved search function that autocompletes, fetches, and displays the first value that matches the input search term. The enhanced function then makes a fetch request for the APIs expanded version of that matching value.
  • Loading States
    Steve discusses edge cases to account for when creating a loading indicator and walks through what is included in the base loading indicator. A demonstration of how to show a loading indicator after a set interval to account for a fast API response and then remove the indicator once the data is received is also covered in this segment.
  • Racing Data
    Steve live codes an improved loading indicator that displays based on how long the loading indicator has been displayed and how fast the fetched API data has been retrieved. The race operator will determine and use the Observable that emits first.

Wrapping Up

Section Duration: 13 minutes
  • Wrapping Up
    Steve wraps up the course by answering student questions regarding how often subjects are used, advice for using Rx.js outside of Angular, and improving a process manager to handle large amounts of data. Additional resources for everyday situations using Rx.js and if Rx.js is recommended over Redux-Saga in a React app for analytics are also covered in this segment.
This is very good course for Rx.js. It has great content with use case. I enjoy this course. Good job by Steve Kinney.
Ankur Mishra

Ankur Mishra

AnkurMishraDev

My biggest takeaway from this course is the two new operators for me: 'scan' and 'pluck'. Didn't use them before, but they definitely have a place in my day to day job. Thanks Steve Kinney
Eduard

Eduard

eduardbme

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now