How I reverse engineered RxJs and Learned Reactive Programming?

dev.to
6 min read
easy
Article URL: https://dev.to/shadid12/how-i-reverse-engineered-rxjs-and-learned-reactive-programming-83k Comments URL: https://news.ycombinator.com/item?id=21651146 Points: 1 # Comments: 0
Yes, the title is not a typo. We are actually going to reverse engineer RxJs (tons of code to come ;) ). But before we proceed let me tell you why I embarked on this crazy endeavor.

As programmers, we are curious by nature. I work with reactive libraries such as RxJs and React.js everyday. However, one bright morning I got curious about how these frameworks leveraging reactive programming under the hood.

Do I really understand what reactive programing is? How does it actually work? I asked myself.

After a weekend of digging through blog posts and reading books I sort of got the concept. However, I figured reverse engineering something would be a great way to actually nail down the concepts, so I decided to reverse engineer RxJs.

A Quick Intro:

Reactive programming is programming with asynchronous data streams.

The Data streams could be anything, it could be user inputs (i.e. position of your mouse, click events), it could be streams of data from a server (i.e. your twitter feed, or real time data from a socket server). Our Application will react according to these streams of data.

For example as you are receiving twitter feeds in realtime in your application state will change. Maybe you want to put the most popular tweets on top. So your application is subscribed to the incoming streams of data and it reacts to the data and puts the most popular tweet on top. In brief this concept of subscribing to data streams and changing the application accordingly is reactive programing.

Are you bored? Trust me this is not going to be one of those blog posts with lots of concepts. We will be diving into code now.

Let's build a class called Observable since it is the most fundamental building block of RxJs.

class Observable { constructor () { this . fnArray = []; } subscribe () {} emit () {} } const o = new Observable ();

Alright we just created a basic class called Observable with two methods. We initialized an empty list called fnArray. This array will hold all our…
Read full article