RxJS and its importance on Angular project

RxJS stands for Reactive Extensions for JavaScript. It's a reactive streams library that allows you to work with asynchronous data streams. RxJS can be used both in the browser or in the server-side using Node.js.

In RxJS, you represent asynchronous data streams using observable sequences or also just called observables. Observables are very flexible and can be used using push or pull patterns.

RxJS plays well with Angular but instead of writing your own helper functions to bridge the two you can use rx.angular.js, a dedicated library for RxJS and AngularJS interoperability.

RxJS provides an implementation of the Observable type, which is needed until the type becomes part of the language and until browsers support it. The library also provides utility functions for creating and working with observables.

Asynchronous, in JavaScript means we can call a function and register a callback to be notified when results are available, so we can continue with execution and avoid the Web Page from being unresponsive. This is used for ajax calls, DOM-events, Promises, WebWorkers and WebSockets.

Promises

Promises are very helpful for one-off asynchronous operations. Since version 2.2, RxJS integrates with Promises using Rx.Observable.fromPromise. This function returns an observable that will emit the result of the promise when available. Used with flatMapLatest results in an observable containing only the latest values ignoring the rest.

Operators

Operators are functions that build on the observables foundation to enable sophisticated manipulation of collections. For example, RxJS defines operators such as map(), filter(), concat(), and flatMap(). Operators take configuration options, and they return a function that takes a source Observable. When executing this returned function, the operator observes the source observable emitted values, transforms them, and returns a new observable of those transformed values.

DOM-events

Another common use case for RxJS is DOM-events. Rx.DOM must be included separately but includes event binding, Ajax requests, Web Sockets, Web Workers, Server-Sent Events and even Geolocation.

pipe() function

You can use pipes to link operators together. Pipes let you combine multiple functions into a single function. The pipe() function takes as its arguments the functions you want to combine, and returns a new function that, when executed, runs the composed functions in sequence.

Error handling

In addition to the error() handler that you provide on subscription, RxJS provides the catchError operator that lets you handle known errors in the observable recipe.

Retry failed observable

Use the retry operator before the catchError operator. It resubscribes to the original source observable, which can then re-run the full sequence of actions that resulted in the error. If this includes an HTTP request, it will retry that HTTP request.

Map

You probably know Array.prototype.map() already. The RxJs map operator does exactly the same. You provide it with a function, that gets applied to all elements that enter the stream before they reach the subscriber.

Filter

With the help of the filter operator, it is possible to filter the elements of a stream using a condition. Just like the map operator, the filter operator expects a function.

Throwing Errors

Throwing errors is so easy, that is actually not worth the headline. Just call the error function of the subject and pass any object as a parameter.

 

Angular exposes RxJS observables in a small but important number of places in Angular. RxJS also provides developers the ability to treat anything that needs to fire an event as a single shaped thing. When everything is the same shape, it becomes very easy to combine and merge and query those things resulting in a very powerful tool.