What are RxJS Observables

Simple Observer Pattern illustration

Observer Pattern

The observer pattern simply put is a software design pattern in which an object, named the subject, maintains a list of its dependents, called observers, and notifies them automatically of any state changes, usually by calling one of their methods.

It is mainly used for implementing distributed event handling systems, in “event driven” software. In those systems, the subject is usually named a “stream of events” or “stream source of events”, while the observers are called “sinks of events”. The observer pattern is the premise of the RxJS (Reactive Extensions for JavaScript).

Simply put this pattern defines a one-to-many dependency between objects so that when one object changes state, all its dependents are notified and updated automatically.

RxJS is a library for composing asynchronous and event-based programs by using observable sequences. It provides one core type, the Observable, satellite types (Observer, Schedulers, Subjects) and operators inspired by Array methods (map, filter, reduce, every, etc) to allow handling asynchronous events as collections.

Observables are an implementation of Reactive Extensions for JavaScript popularly known as RxJS which is concerned with data streams and propagation of change. With this in mind, Observables can be viewed as lazy push collections of multiple values. The push paradigm or protocol embodies the idea that the producer determines when to send data to the consumer who is unaware of when the data will arrive.

Observables can produce a single or multiple values and push them to the Observers that is the Consumers.

Anatomy of an Observable

Observables can be generalized as functions with no arguments but can produce multiple values synchronously or asynchronously. Observables can be said to be lazy computations, for example, if you don’t call a function, nothing happens. If you don’t subscribe to an observable, no values are emitted. But keep in mind (in the context of producers) unlike functions that produce a single values and complete, observables can produce multiple values.

Subscribing to an Observable can be viewed to be the same as calling a Function and also passing a callback to be executed with the result.

The essential concepts in RxJS which solve async event management are:

• Observable: represents the idea of an invokable collection of future values or events.
• Observer: is a collection of callbacks that knows how to listen to values delivered by the Observable.
• Subscription: represents the execution of an Observable, is primarily useful for cancelling the execution.
• Operators: are pure functions that enable a functional programming style of dealing with collections with operations like map, filter, concat, reduce, etc.
• Subject: is equivalent to an EventEmitter, and the only way of multicasting a value or event to multiple Observers.
• Schedulers: are centralized dispatchers to control concurrency, allowing us to coordinate when computation happens on e.g. setTimeout or requestAnimationFrame or others.

Also its important to note and understand that:

1. Subscribe the function that is called when the Observable is initially subscribed to. This function is given a Subscriber, to which new values can be `next`ed, or an `error` method can be called to raise an error, or `complete` can be called to notify of a successful completion.
2. next: () => {} is the handler for each value emitted by the observable
3. error: () => {} is the handler for error emitted by the observable
4. `subscribe` is not a regular operator, but a method that calls Observable’s internal `subscribe` function. It invokes an execution of an Observable and registers Observer handlers for notifications it will emit.
5. The Observer handlers aka next, error, and complete get converted to a Subscriber type (class that extends Subscription implements Observer<T>) to provide Subscription-like capabilities such as `unsubscribe`.
6. Don’t let the naming confuse you: Observable is basically a `producer` (i.e. class Observable<T> implements Subscribable<T>) and Observer is a `consumer` (i.e. class Subscriber<T> extends Subscription implements Observer<T>)
7. toPromise() waits for the observable to complete (or error) before actually resolving itself.

For more on Observables see this link: RxJS Observables, a gentle introduction.

Quick primer on toPromise: RxJS operator ‘toPromise’ waits for your observable to complete!