Asynchronous Programming Using Observables

If we think about it, nothing is instantaneous. Real time is not a thing. Did I lose my mind for a second there? Now, you can push a button and feel like it's instantaneous, but, the programmer in you knows that it's not. Information has been transferred, code executed, databases fetched, and so on. During this time, as short or as long as it might be, you have waited. More precisely, your code has made your users wait. Wouldn't you rather have a code base built around this very notion of asynchronism and which can execute other things while it waits, or, at least, warn your users that we are waiting for something to happen? This is the idea on which this chapter is based. This chapter helps you to understand the concept of asynchronous programming and implementing the same using Observable in Angular.

In this chapter,...

Observer patterns

The Observable pattern is one that allows an object, called subject, to keep track of other objects, called observers, interested in the subject state. When the subject state changes, it notifies its observers about it. The mechanics behind this are really simple.

TypeScript Observable

Let's take a look at the following Observer/Subject implementation in pure TypeScript (that is no Angular or framework of any kind, just TypeScript).

First, I defined an Observer interface that any concrete implementation will have to implement:

export interface Observer{ 
  
   notify(); 
} 

This interface only defines the notify() method. This method will be called by the subject (that is the Object being observed by...

Observing HTTP responses

In this section, we will build a JSON API returning movies according to search parameters. Instead of simply waiting for the HTTP query to complete, we will leverage the power of the observer design pattern to let the user know we are waiting and, if need be, execute other processes.

First things first: we need a data source for our IMDB--like application. Building and deploying a server-side application able to interpret an HTTP query and send the result accordingly is relatively simple nowadays. However, this falls outside the scope of this book. Instead, what we will do is fetch a static JSON file hosted at http://bit.ly/mastering-angular2-marvel. This file contains some of the latest movies of the Marvel Cinematic Universe. It contains a JSON array describing fourteen movies as JSON objects. Here is the first movie:

{ 
     "movie_id" : 1...

Promises

Promises are another useful asynchronous concept available in Angular. Conceptually, promises implement a totally different pattern. A Promise is a value that will be resolved or rejected in the future. Like the Observer pattern, they can be used to manage async programming. So, why bother to have two concepts to do the same thing? Well, the verbosity of Observer allows one thing that Promise does not: unsubscribe. The main difference that may lead to a decision about which one to use is the ability of Observable to catch many subsequent asynchronous events, while Promise can manage a single asynchronous event. To emphasise the differences between Observer and Promise, we will take the same example as before, fetching movies from a JSON API.

The AngularObservableAppComponent component will make an asynchronous call to the IMDBAPIService and, upon the answer, will update...

Summary

In this chapter, we took advantage of asynchronous programming with Angular by using Observable and Promise.

More specifically, we learned how to implement the Observable pattern in typescript, and then took advantage of the Angular framework, while still using the Observable characteristics.

Also, we saw how to take advantage of Promises in Angular and built a basic, yet extensible JSON API for querying the Marvel Cinematic Universe.

In the next chapter, we will build upon this example to create advanced forms. Indeed, we will create what's required to add, remove, and update movies of the Marvel Cinematic Universe. In addition, we will also learn about FormBuilder, control groups, and custom validations.