Learn how to build and manage asynchronous programs to become an effective JavaScript programmer. Join Jafar Husain - the Cross-Team Technical Lead for the Netflix UI and architect of its UI data platform as he takes you beyond the fundamentals of asynchronous JavaScript to introduce you to new features and techniques that will help you reduce code and create smarter applications. This class is for developers with an intermediate knowledge of JavaScript. At a minimum you must understand how to create functions, use loops, create JS Objects, and how function scope works. You should also have taken Jafar's Asynchronous JavaScript course.
This course and others like it are available as part of our Frontend Masters video subscription.
Published: September 13, 2017
Table of Contents
Advanced Asynchronous JavaScript
Minimal Observable Implemetation
Observable Interface Changes
With course participation, Jafar begins the initial steps of building a demonstration of Observable, Observer, and Subscription and how they fit together. - http://jsbin.com/nururar/edit?js,consoleMultiple Subscribes to One Observable
After examining what happens if one calls subscribe multiple times on one time observable, Jafar shows how a function can be lazy and introduce side effects.Q&A: Hot Observables
Jafar codes a demonstration to answer students question about hot observables and timed events.Data Stream into Hot Observable
Jafar starts working to convert a hot data source such as a data stream into a hot observable. Jafar takes questions from students.Events into the Observer
Before doing any work in an observerable until subscribe is called, Jafar reviews how to get events out of a DOM events out into the observer. Jafar takes questions from students.Challenge 1: Map() for Observables
Starting with the map() function, Jafar starts building common functions such as fiter() and reduce() with observables. After taking questions from the class, he prompts students to complete the challenge.Challenge 1: Solution
Jafar walks through the solution and takes questions from students.Passing Subscriptions
Using student volunteers as examples, Jafar demonstrates the effect of passing a subscription from one observable to another observable.Filter() for Observables
After demonstrating map() function, Jafar uses the filter() function to show how to build operators over an observable.
"Animations Allowed" Problem
Introducing the "Animations Allowed" Problem
Jafar discusses the real-world work problem his company faced of creating smooth animations on low-end devices to illustrate the techniques that solve the problem so that students can use those same methodologies in their work.Taking Stock of Resources
Jafar begins the first steps of walking through the "Animations Allowed" solution by focusing on what sources of data or streams are available and an overview of some helpful functions. Jafar takes questions from students.observables.shift() and Recursion
With prompting from the class, Jafar reviews whether or not mutable arrays with observables.shift() is a good idea or not. Next Jafar discusses how to use recursion instead of loops when working asynchronously. Jafar takes questions from students.Helper Functions
After reviewing the problem statement, JavaScript continues to examine helper functions including dinstctUntilChanged() and scan().Q&A: Multi-dimensional Observables
After reviewing the problem statement, Jafar takes questions from students about larger than two-dimensional observables and the difference between concatCall and switchLatest.Challenge 2: AnimationsAllowed
In this challenge, students try to convert two-dimensional observable into AnimationsAllowed solution.Challenge 2: Solution
Taking suggestions from students, Jafar starts to walk through the solution to Challenge 2.Challenge 2: Solution II
Continuing to take ideas from students, Jafar continues to walk through the solution to Challenge 2 to be able to count subscribes and completes by concatenating data to the front and back of the observable.Error Handling
Inspired by a student suggestion, Jafar reviews error handling with observables.Cancellation and Promises
After talking about cancellation of promises, Jafar gets into a discussion of benefits of coding with observables over promises.Catching Specific Errors
Jafar discusses how to throw an error and catch specific errors with observables. - https://gist.github.com/jhusain/d6007e9cce59ac6f173449cd6841f9fc
Reddit Image Viewer App
Challenge 3: Reddit Image Viewer App
In this challenge, students work on implementing an image viewer for Reddit subs. - https://github.com/jhusain/reddit-image-viewerChallenge 3: Solution
Jafar reviews the challenge criteria describing how the image viewer application should work.Image Viewer Streams
With prompting of the students, Jafar starts to define the direction of building the app by looking at the available streams and the ones that are needed to be created.Getting Images
Jafar works on bringing in images into the image viewer application.Picking an Image
With an observable array of images in place, Jafar works to pick an image to display in the viewer as well as selecting the next and back images.Debugging Observables
With an early version of the image viewer application not working, Jafar uses the moment to introduce the concept of how to debug observables. Next, Jafar continues to debug and build out the application focusing on indices, trying to pull the first value of out an array.Challenge 4: Preloading Images
While the application successfully displays a reference to an image, Jafar notices that the browser's broken image icon is displayed instead of a picture. In this challenge, students are asked how to work around future broken image icons by using observables to preload images successfully.Challenge 4: Solution
After reviews the criteria for completing the challenge, Jafar walks through the solution.Indices and Switching Subs
With the image viewer app prototype working, Jafar continues to debug and refine the capabilities. Jafar takes questions from students.
Q&A
Q&A: Preloading with Callback
With the Reddit Image Viewer application completed, Jafar takes questions from students about using the preloading with a callback.Q&A: Unsubscribe Methods, onError
Jafar answers questions about defining unsubscribe methods and loading the next image when triggering onError.Q&A: Subjects and Replays
Jafar answers questions about subjects, which are good examples of turning observables into hot observables. In answering the question, Jafar reviews Replay, which ensures that all observers see the same sequence of emitted items, even if they subscribe after the observable has begun emitting items.Q&A: Async Iterators
Jafar takes a question from a student about async iterator proposal and using them with observables.Redux
Jafar takes a moment to review redux and note that the operators taught in the workshop can be used to solve a number of problems.Q&A: Time Travel in Redux and Scheduler Class
Jafar takes a questions from a students about time travel and redux and scheduler class.Q&A: JavaScript Standardization
Prompted by a student question, Jafar reviews standardization and JavaScript how and when observables can get into JavaScript specification.Q&A: Testing Observables and Wrapping Up
After answering a question about debugging and testing observables, Jafar concludes the course.