RxJS and its importance on Angular project

RxJS and its importance on Angular project

April 10, 2019
3 min read
771 views
0

RxJS

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.

Was this article helpful?Vote to let the author know
0
Share this article

Loading comments...

Related Articles

Trading platforms compared: which one fits your style

Trading platforms compared: which one fits your style

That's the usual shape of the mistake. People compare platforms by feature count, the way you'd compare phones in a shop, when the useful question is narrower. What do you actually do in a normal week, and which software makes that loop faster and less error prone?

8 views
Read More
Read full article: Trading platforms compared: which one fits your style
Growing Your Business Through Better SEO

Growing Your Business Through Better SEO

SEO requires regular monitoring because search results are constantly changing. Competitors publish new content, websites are updated, search behavior changes, and search engines continue to improve how they evaluate pages.

5 views
Read More
Read full article: Growing Your Business Through Better SEO
DomDetailer: A Practical Guide to Domain Research, Backlink Metrics, and Bulk Analysis

DomDetailer: A Practical Guide to Domain Research, Backlink Metrics, and Bulk Analysis

Discover how DomDetailer simplifies domain research by bringing Moz, Majestic, and backlink data together in one place. Learn how to evaluate expired and auction domains using authority metrics, referring domains, Trust Flow, Citation Flow, topical signals, and a simple one-credit-per-domain pricing model.

7 views
Read More
Read full article: DomDetailer: A Practical Guide to Domain Research, Backlink Metrics, and Bulk Analysis