The Observable Pipeline

Alexa Welch
Mar 31 · 2 min read

About the fantastic functionality exposed by RxJS v6.

Photo by Samuel Sianipar on Unsplash

Caveat: I did not use RxJS < v6, so I am strictly discussing v6 rather than previous iterations.

RxJS (or ReactiveX) is a JavaScript library dedicated to handling asynchronous streams. It is intimately tied to the mechanics of Angular 2+; however, its functionality is not limited to one front-end framework. RxJS, once one climbs over the initial learning curve, is incredibly useful, but that learning curve is steep.

The utility of RxJS comes from a powerful toolkit of operators to act on asynchronous events in a functional reactive way — “functional” as in preserving purity of functions, and “reactive” as in treating everything as a stream. This basic definition of functional reactive programming can go a long way to understanding exactly what RxJS is meant to do.

The fundamental object in RxJS is the Observable: a representation of an asynchronous stream that, well, can be observed by “subscribing” to it. Anything asynchronous will do, be it a setTimeout, an HTTP request, or whatever your heart is set on. What happens to that stream depends on the callback function supplied to a Subscription and the pipe the stream is directed through (there’s a powerful didactic element to the nomenclature of RxJS methods and operators dealing with the term “stream”, as we will see.)

A pipe carries the value of an Observable and executes some operations on it. Each operator itself returns an Observable. It’s directly comparable to Promise.then in that regard, while exposing a tremendous level of functionality beside that. My personal favorite is the tap operator because its simple purpose is to take the value of an Observable, perform some side effects, and pass that value down the pipeline. As a side note, tap and do are functionally identical keywords in RxJS, which might hint at something about its relationship with traditional functional programming…

There is a wealth of operators that can be used in the gorgeously functional pipeline of RxJS. Feel free to browse through the resources at https://www.learnrxjs.io/ , because whatever you may wish to do asynchronously, there is almost undoubtedly an elegant way to accomplish it in this library. Make sure to give it a try, or to check out alternatives like the bombastically documented Bacon.js. Feel free to let me know your thoughts in the comments and keep looking for creative solutions to your problems!