Table of Contents
Introduction
Observables
Basic Observables Overview
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.Creating Observables
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.Creating Observables Exercise
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.Creating Observables Solution
Steve walks through the solution to the creating Observables exercise.Creating Custom Logic Observables
Steve demonstrates how observables work under the hood by creating an observable with custom logic.Events
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.fromEvent Exercise
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.fromEvent Solution
Steve walks through the solution to the fromEvent exercise.
Intervals & Timers
Intervals & Timers
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.Intervals & Timers Exercise
Students are instructed to create a simple counter using timer, counter, and unsubscribe based on the provided JavaScript.Intervals & Timers Solution
Steve walks through the solution to the intervals and timers exercise.
Operators
Operators
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.Basic Operators Exercise
Students are instructed to try and get comfortable with basic operators by making the provided tests pass using basic operators.Basic Operators Solution
Steve walks through the solution to the basic operators exercise.Combining 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.Combining Operators Solution
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
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
Higher Order Observables
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.Mapping
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.switchMap Exercise
Students are instructed to use switchMap to switch between an interval timer and NEVER based on the "Start" and "Stop" buttons.switchMap Solution
Steve walks through the solution to the switchMap exercise.
Fetching from an API
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.