Steve Kinney
Temporal
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
CloseCourse Details
Published: January 25, 2022
Topics
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
Table of Contents
Introduction
Section Duration: 9 minutes
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
Steve discusses the utility methods of and from, when to use each of those methods, and provides a brief overview of the course website. Student questions regarding if any frameworks will be covered and how Rx.js knows when the event is completed are also covered in this segment.
Steve walks through the basic-Observables test in the course repo, how to implement an Observable using of, and how to complete an Observable when finished. A student's questions regarding if the standard method executes before the Observable results are also covered in this segment.
Students are instructed to unskip each test, collect the Observable values as their emitted, and only assert an expectation once the Observable has been completed.
Steve walks through the solution to the creating Observables exercise.
Steve demonstrates how observables work under the hood by creating an observable with custom logic.
Steve discusses the event helper function fromEvent, which creates an observable based on event listeners. A brief discussion regarding the bindCallback and fromFetch functions is also provided in this segment.
Students are instructed to use fromEvent to create an observable that streams click events, subscribe to that observable, and use addMessageToDOM to add a message to the DOM whenever the stream emits a value.
Steve walks through the solution to the fromEvent exercise.
Intervals & Timers
Section Duration: 9 minutes
Steve discusses creating Observables using the helper utility functions interval, timer, unsubscribing from an Observable, and answers a student's question regarding reusing the interval component. Interval creates an Observable stream that produces values at a user-defined number of milliseconds.
Students are instructed to create a simple counter using timer, counter, and unsubscribe based on the provided JavaScript.
Steve walks through the solution to the intervals and timers exercise.
Operators
Section Duration: 30 minutes
Steve discusses the .pipe method in Rx.js and brief overviews regarding the operators take, skip, takeWhile, skipWhile, filter, map, mapTo, reduce, scan, and tap. A student's question regarding whether .pipe is an args function or if it has a max limit is also covered in this segment.
Students are instructed to try and get comfortable with basic operators by making the provided tests pass using basic operators.
Steve walks through the solution to the basic operators exercise.
Students are instructed to edit the counter to skip values until a user hits the start button using takeUntil and skipUntil. Hitting the start button should start the counter, and hitting the stop should stop the counter.
Steve walks through the solution to the combining operators exercise. A student's question regarding if takeUntil is the best approach for subscription management is also covered in this segment.
Manipulating Time
Section Duration: 21 minutes
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.
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
Steve discusses higher-order Observables, returning Observables, and mapping operators, A student's question regarding if some of the operators could be used to implement an undo operation in the case of a UI update rollback is also covered in this segment.
Steve demonstrates how to map through an array of Observables using mergeMap and switchMap. The mergeMap operator projects each source value to an Observable, then merged in the output Observable. The switchMap operator projects each source value to an Observable, which is merged in the output Observable, emitting values only from the most recently projected Observable.
Students are instructed to use switchMap to switch between an interval timer and NEVER based on the "Start" and "Stop" buttons.
Steve walks through the solution to the switchMap exercise.
Fetching from an API
Section Duration: 1 hour, 30 minutes
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.
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.
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.
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.
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.
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.
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
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.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops