Table of Contents
Advanced Asynchronous JavaScript
Introducing Advanced Asynchronous JavaScript
00:00:00 - 00:02:19
Introducing Advanced Asynchronous JavaScript
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
Observable Interface Changes
00:02:20 - 00:11:50
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,console
Multiple Subscribes to One Observable
00:11:51 - 00:21:16
Multiple 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
00:21:17 - 00:24:51
Q&A: Hot Observables
Jafar codes a demonstration to answer students question about hot observables and timed events.
Data Stream into Hot Observable
00:24:52 - 00:35:05
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
00:35:06 - 00:46:06
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
00:46:07 - 00:58:22
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
00:58:23 - 01:11:21
Challenge 1: Solution
Jafar walks through the solution and takes questions from students.
Passing Subscriptions
01:11:22 - 01:16:48
Passing Subscriptions
Using student volunteers as examples, Jafar demonstrates the effect of passing a subscription from one observable to another observable.
Filter() for Observables
01:16:49 - 01:19:11
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
01:19:12 - 01:24:16
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
01:24:17 - 01:34:13
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
01:34:14 - 01:46:03
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
01:46:04 - 01:58:32
Helper Functions
After reviewing the problem statement, JavaScript continues to examine helper functions including dinstctUntilChanged() and scan().
Q&A: Multi-dimensional Observables
01:58:33 - 02:06:28
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
02:06:29 - 03:18:13
Challenge 2: AnimationsAllowed
In this challenge, students try to convert two-dimensional observable into AnimationsAllowed solution.
Challenge 2: Solution
03:18:14 - 03:27:37
Challenge 2: Solution
Taking suggestions from students, Jafar starts to walk through the solution to Challenge 2.
Challenge 2: Solution II
03:27:38 - 03:34:26
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
03:34:27 - 03:48:56
Error Handling
Inspired by a student suggestion, Jafar reviews error handling with observables.
Cancellation and Promises
03:48:57 - 03:54:47
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
03:54:48 - 04:01:13
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
04:01:14 - 04:02:06
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-viewer
Challenge 3: Solution
04:02:07 - 04:06:14
Challenge 3: Solution
Jafar reviews the challenge criteria describing how the image viewer application should work.
Image Viewer Streams
04:06:15 - 04:17:17
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
04:17:18 - 04:26:38
Getting Images
Jafar works on bringing in images into the image viewer application.
Picking an Image
04:26:39 - 04:34:57
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
04:34:58 - 04:46:14
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
04:46:15 - 04:48:06
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
04:48:07 - 05:06:38
Challenge 4: Solution
After reviews the criteria for completing the challenge, Jafar walks through the solution.
Indices and Switching Subs
05:06:39 - 05:25:35
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
05:25:36 - 05:30:32
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
05:30:33 - 05:35:46
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
05:35:47 - 05:51:50
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
05:51:51 - 05:55:20
Q&A: Async Iterators
Jafar takes a question from a student about async iterator proposal and using them with observables.
Redux
05:55:21 - 05:58:32
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
05:58:33 - 06:08:05
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
06:08:06 - 06:12:40
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
06:12:41 - 06:13:50
Q&A: Testing Observables and Wrapping Up
After answering a question about debugging and testing observables, Jafar concludes the course.
