Chapter 5. ReactiveX Observables

This chapter will cover the following recipes:

Basic utilization of Observables with HTTP
Implementing a Publish-Subscribe model using Subjects
Creating an Observable Authentication Service using BehaviorSubjects
Building a generalized Publish-Subscribe service to replace $broadcast, $emit, and $on
Using QueryLists and Observables to follow the changes in ViewChildren
Building a fully featured AutoComplete with Observables

Introduction

Before you get into the meat of Angular 2 Observables, it is important to first understand the problem you are trying to solve.

A frequently encountered scenario in software is where you are expecting some entity to broadcast that something happened; let's call this an "event" (distinct from a browser event). You would like to hook into this entity and attach behavior to it whenever an event occurs. You would also like to be able to detach from this entity when you no longer care about the events it is broadcasting.

There is more nuance and additional complexity to Observables that this chapter will cover, but this concept of events underscores the fundamental pattern that is useful to you as the developer.

The Observer Pattern

The Observer Pattern isn't a library or framework. It is just a software design pattern upon which ReactiveX Observables are built. Many languages and libraries implement this pattern, and ReactiveX is just one of these implementations; however, ReactiveX is the one that Angular 2 has formally incorporated into itself.

The Observer Pattern describes the relationship between subject, which was described as the "entity" earlier, and its observers. The subject is aware of any observers that are watching it. When an event is emitted, the subject is able to pass this event to each observer via methods that are provided when the observer begins to subscribe it.

ReactiveX and RxJS

The ReactiveX library is implemented in numerous languages, including Python, Java, and Ruby. RxJS, the JavaScript implementation of the ReactiveX library, is the dependency that Angular 2 utilizes to incorporate Observables into native framework behavior. Similar to Promises, you can create a standalone Observable instance through direct instantiation, but many Angular 2 methods and services will also utilize an Observable interface by default.

Observables in Angular 2

Angular 2 integrates Observables in a wide variety of ways. If you are new to them, you may initially feel odd using them. However, it is important you recognize that Observables provide a superior software development pattern.

Along with the bulk RxJS module rxjs/Rx, you are also provided with the stripped down Observable module rxjs/Observable. This minimal module allows individual pieces of non-essential behavior to be imported as required in order to reduce module bloat. For example, when using this lightweight Observable module, using operators or other such ReactiveX conventions necessitates that you explicitly incorporate these modules, in order to extend the available Observable interface.

Observables and Promises

Both Observables and Promises offer solutions to asynchronous constructs, but Observables are more robust, extensible, and useful. Although Promises are available by default in the ES6 specification, you will quickly realize that they become brittle when you attempt to apply them outside the realm of basic application behavior.

The ReactiveX library offers powerful tooling to which Promises cannot compare. Observables are composable, allowing you to transform and combine them into new Observables. They also encapsulate the concept of a continuous stream of events-a paradigm that is encountered in client-side programming extremely frequently and that Promises do not translate well to.