The Best approach to use RxJS for clean code

When building angular apps, you will sooner or later get in contact with RxJS library. On angular’s official documentation, the library get praised with many examples how to use rx. In angular templates, the result of a subscription can be used directly. Many of angular’s core modules expose RxJS Observables through the API. For example the http module, that most angular developers use for loading additional data from the server.

What is RxJs used for?

With RxJS, you can write the same code, for an event stream as for a plain array. RxJS promote the use of functional programming. For that it provides very abstract primitives, that fit into almost any situation.

A already mentioned request response request to an API but also processing data, implementing user interactions or working with data streams, all can follow the same programming paradigm.

Due to the functional programming model, it should be easy to reason about the logic and to be easy to locate and repair bugs.

What is an observable and how do they work?

The main concept or class, to use the Library, is the Observable. Every event stream, data or process can be wrapped into an Observable.

An Observable is providing the most general API to work in your programs.

The .subscribe method works similar to the .then function on a Javascript Promise. With the difference, that the event can happen many times, not just once. When Processing data, Errors can happen, So the .subscribe method also accepts an error handler as second argument.

What are operators?

Operators are the second important concept when working with RxJS Observables. Operators are there to process data. The Rx library provides many helper functions, to do map, reduce, retry, scan (a different kind of reduce function) and more. These are basically higher order functions. and get passed into the observables .pipe method.

Is it worth learning RxJS?

To answer the question short, and you might already know: no, it is not worth it. I think the best about the RxJS library, is its documentation. It teaches about good programming concepts. However, then it seems in the docs, that the engineers of the RxJS library invent all the good concepts and they only work, when the developer uses Rx.

In my opinion it is making things difficult, mapping simple programming paradigms into the most complex form: an ‘async list operation’. I believe when requesting data from the server, it is guarantied, that there is one result, not many. Using observables does not allow in these situations to use JavaScripts Async/Await syntax.

In one of the first examples of the documentation, a click event listener get registered to button. That event get throttled. In Pure js with some extra variables and a timeout. In rx with a single pipe through a throttle helper function. However, when using the throttle helper utility from underscore js, I believe the pure js code is much simpler and also more easy to reason about.

It is a strong contradiction, to promote functional programming, but the most basic thing in RxJS is a class. The problem with this class, is its live time. In every project I work on that is using the library, I see the same kind of bugs. Some events are happening multiple times. I see that there is subscribed often to the same Observable and forgotten to unsubscribe. Some dialogs open twice on a single click, some API update calls get executed multiple times.

For a long time, I thought this is a problem with the angular framework, but found when working clean with angular components and services, making apps with angular feels much better, is easier to test and reason about.

I ask you, try it out, make an angular app without using RxJS. One Method of the observable, that will help you to make the transition is Observable.toPromise().

I don’t want to make ads here, but I learned a good way to work on angular apps from a pluralsight video course, shows very clear, how to use use services to share information between components.