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:
- New data is emitted or state has changed in an
Observable
object. - The
Observer
s of theObservable
are notified of the change.
Subscribing to events
In RxJS all Observables
have an internal subscribe
function, this function is how different Observers
throughout the application are notified of Observables
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 grasp the concepts required to use it. We would like to see the RxJS authors polish its 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
- In your main.js file import
RxJS
. - Create a list of clients.
- Convert the list of clients into an
Observable
using theof
function. - Import the
clientObs
variable to the subscription module, and connect to it using thesubscribe
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 its 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.
Learn more about how The Gnar builds React applications.
Top comments (0)