Angular: The Single Rule To Get Better At RxJS

A guideline that helps develop Angular applications and libraries in a reactive programming way with RxJS.

Even though there is no strict rule, combining imperative and declarative programming concepts with RxJS might be making the development harder and the code less clean.

Shifting mind from a (often) default way of programming (i.e. imperative) to a reactive (i.e. declarative) approach, takes time.

However, there is a single rule that can help you make the switch:

⚠️ Do not subscribe, period ⚠️

Confused about the difference between imperative and declarative? Have a look to the excellent article of Josh Morony that compares both.

Why?

The rule is not strict, it is a guideline, like the code of the pirates of the Caribbean 🏴‍☠️.

It does not mean that you should never ever subscribe to a stream but rather, that you should try to avoid it. In that way, according my experience, you are going to slowly transform the imperative way of programming into more declarative concepts.

Concretely, while developing features in components, trying to use mostly the Angular | async pipe that automatically unsubscribe when components are destroyed, can in addition to avoid memory leak, help improve the coding style.

To explore such modus operandi, let’s refactor an Angular application that mix imperative and declarative programming concepts.

Starting Point

The following demo uses the coinpaprika API to display a list of cryptocurrencies to its user.

The code source is available on GitHub. Each following chapters (steps 1, 2, 3 and 4) are separate branches.