Table of Contents
Minimal Observable Implemetation
Observable Interface ChangesWith course participation, Jafar begins the initial steps of building a demonstration of Observable, Observer, and Subscription and how they fit together.
Multiple Subscribes to One ObservableAfter 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 ObservablesJafar codes a demonstration to answer students question about hot observables and timed events.
Data Stream into Hot ObservableJafar 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 ObserverBefore 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 ObservablesStarting 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: SolutionJafar walks through the solution and takes questions from students.
Passing SubscriptionsUsing student volunteers as examples, Jafar demonstrates the effect of passing a subscription from one observable to another observable.
Filter() for ObservablesAfter demonstrating map() function, Jafar uses the filter() function to show how to build operators over an observable.
"Animations Allowed" Problem
Introducing the "Animations Allowed" ProblemJafar 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 ResourcesJafar 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 RecursionWith 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.
Q&A: Multi-dimensional ObservablesAfter reviewing the problem statement, Jafar takes questions from students about larger than two-dimensional observables and the difference between concatCall and switchLatest.
Challenge 2: AnimationsAllowedIn this challenge, students try to convert two-dimensional observable into AnimationsAllowed solution.
Challenge 2: SolutionTaking suggestions from students, Jafar starts to walk through the solution to Challenge 2.
Challenge 2: Solution IIContinuing 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 HandlingInspired by a student suggestion, Jafar reviews error handling with observables.
Cancellation and PromisesAfter talking about cancellation of promises, Jafar gets into a discussion of benefits of coding with observables over promises.
Catching Specific ErrorsJafar discusses how to throw an error and catch specific errors with observables.
Reddit Image Viewer App
Challenge 3: Reddit Image Viewer AppIn this challenge, students work on implementing an image viewer for Reddit subs.
Challenge 3: SolutionJafar reviews the challenge criteria describing how the image viewer application should work.
Image Viewer StreamsWith 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 ImagesJafar works on bringing in images into the image viewer application.
Picking an ImageWith 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 ObservablesWith 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 ImagesWhile 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: SolutionAfter reviews the criteria for completing the challenge, Jafar walks through the solution.
Indices and Switching SubsWith the image viewer app prototype working, Jafar continues to debug and refine the capabilities. Jafar takes questions from students.
Q&A: Preloading with CallbackWith the Reddit Image Viewer application completed, Jafar takes questions from students about using the preloading with a callback.
Q&A: Unsubscribe Methods, onErrorJafar answers questions about defining unsubscribe methods and loading the next image when triggering onError.
Q&A: Subjects and ReplaysJafar 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 IteratorsJafar takes a question from a student about async iterator proposal and using them with observables.
ReduxJafar 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 ClassJafar takes a questions from a students about time travel and redux and scheduler class.
Q&A: Testing Observables and Wrapping UpAfter answering a question about debugging and testing observables, Jafar concludes the course.