top of page

Subscribe to get best practices, tutorials, and many other cool things directly to your email inbox

How to Use Observables with Vanilla JavaScript

Updated: Dec 24, 2023

No frameworks used, just pure vanilla JavaScript.


How to Use Observables and Subjects with Vanilla JavaScript (JS) without any frameworks or libraries. Best Practice Code Coding Programming Software Development Architecture Engineering

While working on a side project just for fun, I wanted to write a JavaScript script to call a REST API and eventually do some cool stuff on a webpage. It is purely vanilla JavaScript, with no fancy frameworks or even libraries being used.


First, I thought of using Promises for my calls and this was easy for me. I have done that a ton of times. However, it then hit me hard — why don’t I use Observables? I knew that vanilla JavaScript didn’t natively support Observables. But couldn’t I implement it myself? And that’s what I did.


 

This is how I thought things through

  1. The Observable itself would be of a new object type called Subject.

  2. This Subject object should expose the subscribe and next functions.

  3. subscribe should be called by observers to subscribe to the observable stream of data.

  4. next should be called by the Subject owner to push/publish new data whenever available.

  5. Additionally, I wanted the Subject owner to be able to know whenever no observers were interested in its data. This would enable the Subject owner to decide if he still wanted to get the data or not.

  6. Also, the Subject owner should be able to know whenever at least one observer started being interested in its data. This would give the Subject owner more control on its data flow and any related operations.

  7. Now back to the observer. He should be able to unsubscribe from the Subject at any time.

  8. This leads us to a new object type called Subscription.

  9. This Subscription object should expose an unsubscribe function.

  10. unsubscribe should be called by the observer whenever he wants to stop listening to the data stream coming from the Subject.


Following these rules, I came up with the following implementation.


 

Implementation


Subscription



Note that Subscription just notifies the Subject when the unsubscribe function is called.


Subject



Somewhere in the Subject Owner



Somewhere in the Observer



That’s it, everything worked like a charm and I was proud of what I achieved.

So, the punch line is that coding in vanilla JavaScript is not always equal to writing boring code, you can make it much more fun 😃




Recent Posts

See All

Subscribe to get best practices, tutorials, and many other cool things directly to your email inbox

bottom of page
Mastodon Mastodon