Netflix
Advanced Asynchronous JavaScript
3 hours, 34 minutes
CC
Course Description
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.
Preview
CloseCourse Details
Published: September 13, 2017
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
Advanced Asynchronous JavaScript
Section Duration: 7 minutes
Jafar Husain starts the workshop on Advanced Asynchronous JavaScript by outlining the course agenda and noting the syntax changes in Observables interface.
Minimal Observable Implemetation
Section Duration: 1 hour
With course participation, Jafar begins the initial steps of building a demonstration of Observable, Observer, and Subscription and how they fit together.
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.
Jafar codes a demonstration to answer students question about hot observables and timed events.
Jafar starts working to convert a hot data source such as a data stream into a hot observable. Jafar takes questions from students.
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.
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.
Jafar walks through the solution and takes questions from students.
Using student volunteers as examples, Jafar demonstrates the effect of passing a subscription from one observable to another observable.
After demonstrating map() function, Jafar uses the filter() function to show how to build operators over an observable.
"Animations Allowed" Problem
Section Duration: 59 minutes
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.
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.
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.
After reviewing the problem statement, JavaScript continues to examine helper functions including dinstctUntilChanged() and scan().
After reviewing the problem statement, Jafar takes questions from students about larger than two-dimensional observables and the difference between concatCall and switchLatest.
In this challenge, students try to convert two-dimensional observable into AnimationsAllowed solution.
Taking suggestions from students, Jafar starts to walk through the solution to Challenge 2.
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.
Inspired by a student suggestion, Jafar reviews error handling with observables.
After talking about cancellation of promises, Jafar gets into a discussion of benefits of coding with observables over promises.
Jafar discusses how to throw an error and catch specific errors with observables.
Reddit Image Viewer App
Section Duration: 49 minutes
In this challenge, students work on implementing an image viewer for Reddit subs.
Jafar reviews the challenge criteria describing how the image viewer application should work.
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.
Jafar works on bringing in images into the image viewer application.
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.
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.
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.
After reviews the criteria for completing the challenge, Jafar walks through the solution.
With the image viewer app prototype working, Jafar continues to debug and refine the capabilities. Jafar takes questions from students.
Q&A
Section Duration: 38 minutes
With the Reddit Image Viewer application completed, Jafar takes questions from students about using the preloading with a callback.
Jafar answers questions about defining unsubscribe methods and loading the next image when triggering onError.
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.
Jafar takes a question from a student about async iterator proposal and using them with observables.
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.
Jafar takes a questions from a students about time travel and redux and scheduler class.
Prompted by a student question, Jafar reviews standardization and JavaScript how and when observables can get into JavaScript specification.
After answering a question about debugging and testing observables, Jafar concludes the course.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops