The Gnar Company
The Gnar Company

Understanding Observables in `RxJS`

by Iván Trujillo

Do you want a different way to handle state in your Javascript applications? Then I suggest giving Reactive Programming a try, and more specifically, RxJS. RxJS is a framework-agnostic library that provides tools for applying the "Observer" pattern. RxJS has extensive operators for handling state, and it is equipped with asynchronous event management functions. This means that no additional libraries are required to handle the asynchronous events for your application, which leads to a leaner dependency tree.

What is the Observer Pattern?

The Observer pattern is a sequence of the following events:

  1. New data is emitted or state has changed in an Observable object.
  2. The Observers of the Observable are notified of the change.

An in-depth look at RxJS here.

Subscribing to events

In RxJS all Observable's have an internal subscribe function, this function is how different Observers throughout the application use to be notified of Observable's updates.

Potential Snags

Here are some considerations before using this library.

RxJS requires time to learn, implement, and practice. Engineers, make sure that there is ample runway to get everyone in your team up to speed because the learning curve can get steep quickly.

The documentation is dense, it will most likely require more than one read through to graps the concepts required to use it. We would like to see the RxJS authors polish it's wording to make it more user friendly.

Below is a simple example to get started with Observables using RxJS.

How to Create an RxJS Observable

Install RxJS in your project.

npm install `RxJS`

In our main.js file.

import { of } from '`RxJS`'
import './subscriptions'

const clientList = ['clientOne', 'clientTwo', 'clientThree']
export const clientsObs = of(...clientList)

In our subscriptions.js file.

import { clientObs } from './main.js'

clientsObs.subscribe(client => `console.log`(client))

The result of our console.log.

clientOne
clientTwo
clientThree
  1. In your main.js file import RxJS.
  2. Create a list of clients.
  3. Convert the list of clients into an Observable using the of function.
  4. Import the clientObs variable to the subscription module, and connect to it using the subscribe method.

By using the subscribe function in our subscription file, you create an Observer of the clientObs. This Observer will be notified of new events emitted from the clientsObs, which is exported from the main.js file. In this example our events print to the console.log.

This pattern is useful because it allows us to write decoupled code, that is still aware of events and new data from other observed sources.

In our example we have defined an Observable from our clientList named clientsObs, we imported our clientObs to our subscription file, in our subscription file we subscribe to the clientObs, this action of subscribing makes the subscription file an Observer, then the clientObs emitted three different events at different times, and our subscription Observer printed those events to the console.

Congratulations, we have written our first Observable.

Summary

If you are considering using this library, just remember that RxJS has it's snags in the form of time and dense documentation. On the other hand, RxJS allows us to write applications using the Observer Pattern, which is powerful and useful, because out of the box we can write different Observable sources anywhere in our project. RxJS works well with established libraries, plays nice with Typescript, and addresses scalability issues through it's many operators.

Give RxJS and Observables a try if you are interested in exploring another way to manage state in Javascript.