50:21
Exercises 21-23
When information is organized based on its position in an array, a zipping operation may be required to combine elements from equal positions in each array. Exercise 21 explains the need for zipping, exercise 22 implements a custom zip function, and exercise 23 puts this new function to work.
03:50:22 - 04:02:02
Exercise 24
In exercise 24, you will retrieve each video’s id, title, middle interesting moment time, and smallest box art. This will require using most of the function created throughout all the exercises.
Creating Trees
04:02:03 - 04:08:55
Debugging Async
Jafar spends a few minutes talking about debugging. When working with asynchronous code, step-into and step-over statements are not always as effective. Jafar suggests using the debugger directive and setting breakpoints.
04:08:56 - 04:17:58
SQL Comparison
Before continuing with more exercises, Jafar draws a few comparisons between Sequel code and the map/filter/concatAll functions written in earlier exercises. The JavaScript code is very similar to JOIN operations in Sequel.
04:17:59 - 04:24:00
Exercise 25
Exercise 25 puts all five of the operators created in earlier exercises to use. The task is to convert Array data into tree structures that possess parent-child relationships.
04:24:01 - 04:38:32
Exercise 26a
Jafar begins the lengthy 26th exercise by setting up the multiple levels of mapping required. He also gives a few tips about logging progress before running any concatenation. This makes it easier to verify all the desired data has been pulled into the collection correctly.
04:38:33 - 04:47:48
Exercise 26b
Jafar finishes exercise 26 by zipping the some of the nested datasets to form the final collection.
04:47:49 - 04:56:58
Exercise 27
Exercise 27 marks the first exercise where live, asynchronous data is queried. The stock ticker will continuously log the data as new packets arrive.
Handling Events with Observables
04:56:59 - 05:05:56
Exercises 28-30
These exercises demonstrate how to transition from using explicit DOM events to Observables. Jafar also introduces the take function which will automatically dispose the subscription to the Observable after it has completed.
05:05:57 - 05:13:14
Exercise 31
Exercise 31 introduces the takeUntil function which will continue to pull data from a stream until a stop observable is encountered. Similarly to the take function, takeUntil will also dispose once the stopping point is reached.
05:13:15 - 05:22:57
Observables and Events
Before starting exercise 32, Jafar spends some time explaining how to respond to UI events wrapped in Observables. Execution code is placed inside a forEach so it can be run each time a new event is added to the collection.
05:22:58 - 05:34:55
Anatomy of an Observable
Jafar reviews the anatomy of an Observable. An Observable is nothing more than an object with a forEach function. The observer referenced when creating the Observable will have onNext, onError, and onCompleted functions.
05:34:56 - 05:46:44
Creating a setTimeout Observable
To further demonstrate how Observables operate, Jafar converts the JavaScript setTimeout function into an Observable. He then compares this implementation to the Observable.fromEvent code in the Reactive Ex library.
05:46:45 - 05:59:53
Observables vs. Promises
Jafar describes the differences between Observables and Promises. He also spends a few minutes talking about how Observables compare to Node streams and what Observables may look like in ES7.
05:59:54 - 06:06:10
Exercise 32
In this exercise, you will create a mouse drag event using Observables. To do this, you will retrieve only the mouse down events that occur before the next mouse up event.
06:06:11 - 06:13:31
Exercise 33
Jafar points out the mouse drag code in the previous exercise has a couple issues. The mouse snaps to the upper left corner of the object whenever it is grabbed. Jafar uses the offsetX and offsetY properties to fix this issue.
Handling HTTP Requests with Observables
06:13:32 - 06:23:42
Exercise 34
Most HTTP requests are exposed through a callback API. This exercise demonstrates how to use the getJSON method in jQuery to load remote data and handle success/error events. Jafar also begins building a larger example that will wrap the getJSON method in an Observable. First, he needs to get input from the user.
06:23:43 - 06:31:38
Searching Wikipedia
Jafar uses JSONP to perform a search using the Wikipedia API because it will bypass any cross-origin issues. While his search function is still using callbacks, it demonstrates the API is working and allows him to them move it from a callback to an Observable.
06:31:39 - 06:37:52
JSONP as an Observable
Now that Jafar has a working JSONP call, he converts it into an Observable. This creates the forEach and dispose functions required for subscribing to the Observable. When JSON data is received, the Observable calls the onNext and onCompleted.
06:37:53 - 06:48:29
Composing a Stream
As the forEach function is called on the JSONP Observable, Jafar breaks down what the incoming data is going to look like to better explain which functions will be necessary to compose the stream.
06:48:30 - 06:58:52
Displaying Autocomplete Data
Jafar uses the map and switchLatest functions to compose the search results into a dataset that will populate the autocomplete box. The switchLatest function is the key for optimizing the behavior since it will dispose any of the previous requests.
06:58:53 - 07:06:07
distinctUntilChanged()
To further optimize the search suggestions, Jafar what only changed values to be sent to the server. While there are a number of ways to implement this, he chooses to introduce the RX.distinctUntilChanged function which will only update the stream when a change has occurred.
07:06:08 - 07:15:00
Catching Errors
Jafar demonstrates how to handle errors that may occur when making network requests. The error handler is passed as the second parameter to the forEach and the retry function can be used to designate the number of attempts the Observable should make. This error handler will get called if after the desired number of attempts has been reached.
07:15:01 - 07:21:55
Handling Empty Searches
After answering a few audience questions, Jafar further optimizes the code by only performing searches when the search text is not empty. He uses the filter function to check for values
07:21:56 - 07:30:07
Showing the Search Box
Jafar modifies the user interface so the search box is hidden by default and will be shown when the user clicks a Search button. This will allow him to demonstrate how to make the search subscription dependent on the search button being clicked.
07:30:08 - 07:42:51
Close Button Observable
After adding a close button to the search form, Jafar wants the click event from that button to dispose the current search stream and hide the form. To do this, he creates an observable from the click event and uses it in a takeUntil function.
07:42:52 - 07:55:26
Completing the Close Button
Jafar adds the correct functionality to the close button so it will hide the form, thus disposing the current stream of server request. He also talks for a few minutes about how to introduce side effects during the forEach cycle with the doAction function.
07:55:27 - 08:01:21
Audience Questions
Before moving on, Jafar spends takes some time to answer audience questions about the behavior of the form and some other general questions about Observables.
Observable In-Depth
08:01:22 - 08:12:31
Creating an Observable Class
Up to this point, Jafar has been using the Observable class from the RX library. To better explain how Observables work under the hood, he creates an Observable class from scratch and implements the forEach and fromEvent functions.
08:12:32 - 08:21:49
Observable Map Function
Jafar revisits the implementation for the map function. Only this time, instead of adding it to the Array class, he implements it on the Observable class. Since it is on the Observable class, map will call onNext and pass the appropriate projection function.
08:21:50 - 08:30:09
Observable Filter Function
The Observable filter function has a similar implementation to the map function. Jafar leads the group through adding this function and explains the public forEach function with a little more detail.
08:30:10 - 08:40:55
Using the Observable Class
Now that Jafar has created his own Observable class with a map and filter function, he builds a simple program to see it in action. When a button is clicked, he transforms the mouse position value with the map function and returns a filtered result.
08:40:56 - 08:54:08
Observable