DEV Community

David Jensen
David Jensen

Posted on

RxJS code on a deeper level.

In my effort to learn how RxJS works on a deeper level I've started reading its github repo. I've loaded it up in VS Code and made a bunch of bookmarks all over the place, at the places that I think are important.

I've read so many monad tutorials from all types of sources. I thought it would give me more insight when attempting to understand the code better. It's fascinating to see how RxJS has taken the basic (if you can call Monads basic) idea and implemented it in Javascript. I've found that it's really helped me understand the trickier pieces of its code.

How does that function composition work so that it pipes the data through all of the operators? Looking at the code you can see how each Observable is 'new'ed up and connected to each other through their source member. Then, when the last in the line is subscribed to, it triggers a chain of calls to the operator's 'call' method, which calls the source's subscribe, which calls that source's operator's 'call' method, and so forth down the line. It's a bunch of calls. With those connections being made, the Observer's events can propagate through the composition. The 'next', 'error', and 'complete' events are triggered in the Observer provided when creating the Observable. Check out this post on custom Observables.

I would like to make another post on this subject. Something of a deep, deep, deep dive into the code. There is so much to be explored in this code. I really like this library and it's just so powerful.

I've even begun to make changes to the RxJS code to optimize it. I took a 30 line chunk and reduced it to 5 lines. Should I make a pull request for it? Perhaps that's too ambitious for now but I've always wanted to contribute to an open-source project. There are other places that I think the code can be improved. For instance, each of the operators that are in the repo has a bunch of boilerplate. They all have a generator function that does a lift that includes a 'new'ed up operator, which creates a custom observable, which creates a custom subscriber. They are all mostly the same. Perhaps that can be done in a shortcut. Who knows. Stay tuned.

Top comments (2)

Collapse
 
anduser96 profile image
Andrei Gatej

Thanks for sharing!

I also explored its source code a couple of months ago and I was fascinated. I supplemented my discoveries with giving in-depth answers on stack overflow, which is something I’d definitely recommend!
Here’s a question I learnt a lot from: the difference between auditTime and sampleTime.

Then, when the last in the line is subscribed to, it triggers a chain of calls to the operator's 'call' method

It felt great when I discovered this.

It's fascinating to see how RxJS has taken the basic (if you can call Monads basic)

I’ve only heard and used the “monad” term in the context of mathematics during my classes. If I were to summarize RxJS in a few words, I’d say: linked lists and OOP concepts.

One thing that I find interesting is that after getting a better understanding of how the internals work, I came to the conclusion that any sort of illustration/diagram is rather confusing than helpful, IMO.

I would like to make another post on this subject. Something of a deep, deep, deep dive into the code.

Looking forward to it! I’m also available if you’d like to share some ideas or opinions.

Best of luck!

Collapse
 
djjensen profile image
David Jensen

Thanks for the response!

Monads can be implemented in different ways. In this case it's OOP and linked lists. They really are useful but they've got a mystery about them. Perhaps their usefulness is not great enough to compensate for their strangeness. 😊

Your explanation of the difference between auditTime and sampleTime was great! People like you make Stack Overflow a great site!