Asynchronous Programming in JavaScript (with Rx.js Observables)

9 hours, 38 minutes CC
Asynchronous Programming in JavaScript (with Rx.js Observables)

Course Description

Learning how to build and manage asynchronous programs is perhaps the most important part of becoming an effective JavaScript programmer. Unlike most programming languages, JavaScript is single-threaded. As a result, JavaScript programs must use async APIs to stay responsive to user input while performing long-running tasks like server requests and animations. You can't get very far in a JavaScript program without running across an asynchronous API. It is possible to build most asynchronous programs using a handful of simple functions. We will learn why most JavaScript developers approach asynchronous programming the wrong way, and how to avoid these common mistakes. By the end of these lessons you will know the tools, concepts, and libraries required to be an asynchronous programming ninja!

This course and others like it are available as part of our Frontend Masters video subscription.


Course Details

Published: September 21, 2015

Learning Paths

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
Get Unlimited Access Now

Table of Contents

Building Blocks

Section Duration: 33 minutes
  • Introduction
    Jafar Husain begins his course on Async Programming in JavaScript with a little background about himself and then talks about some of the complexities that arise with asynchronous programming. In this course, he will be demonstrating how to write complex async programs using just a few flexible functions.
  • JavaScript Tutorial
    Before diving into asynchronous programming, Jafar wants to spend some time going through an overview of some of the JavaScript functions he will be using. He covers ES6 arrow functions, forEach, map, filter, and concatAll.
  • Creating Collections
    Jafar demonstrates how to use the functions he introduced in the previous section to create useful collections from a data source. He then applies the same code to a mouse-drag scenario to illustrate that events can be handled in the same manner.
  • Iterators and Observers
    Events and Arrays are both collections, just with different interfaces. Arrays use an iterator pattern. Events use an observer pattern. Jafar explains why he believes these two patterns are similar and why Events and Arrays should be handled in the same way.


Section Duration: 1 hour, 47 minutes

Creating Array Functions

Section Duration: 1 hour, 41 minutes
  • Exercises 1-5
    Jafar introduces the exercises and guides the class through the first five which lead up to implementing a map function. Each exercise is written and run in the browser. If an exercise is completed correctly, it will reveal the next exercise.
  • Exercises 6-11
    The next set of exercises involve filtering and flattening. Jafar demonstrates how to implement the filter and concatAll functions which can be used in more complex chaining. This leads to exercise 11 which requires the use of both map and concatAll.
  • Exercise 12
    In exercise 12, you will retrieve the id, title, and box art URL for every video in the collection. Before beginning the exercise, Jafar gives a few instructions to ensure only asynchronous-compatible code will be used.
  • Exercises 13-14
    In exercise 13, you will create a concatMap function that can be used to simplify consecutive concat/map calls. Exercise 14 puts this new function to use.
  • Exercises 15-17
    In these exercises, you will begin working with a reduce function. The reduce function performs operations on array items at the same time as opposed to one item at a time.
  • Exercises 18-19
    Exercise 18 involves using both the reduce and map functions to reduce multiple boxart objects to a single value. Exercise 19 demonstrates how to have the reduce function return a different type than the accumulator. Jafar also talks briefly about prototypical inheritance.
  • Exercise 20
    Exercise 20 combines many of the functions implemented in earlier exercises including reduce, filter, and concatMap.
  • 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.
  • 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

Section Duration: 55 minutes

Handling Events with Observables

Section Duration: 1 hour, 16 minutes

Handling HTTP Requests with Observables

Section Duration: 1 hour, 48 minutes
  • 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.
  • 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.
  • 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.
  • 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.
  • 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.
  • 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.
  • 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.
  • 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
  • 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.
  • 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.
  • 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.
  • 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

Section Duration: 1 hour, 35 minutes
I just completed "Asynchronous Programming in JavaScript (with Rx.js Observables)" by Jafar Husain on Frontend Masters! The best introductory course on JavaScript Observables ... A truly masterpiece 👏



Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now