Skip to content

goodguydaniel.com

Awesome Resources for Reactive Programming

Reactive Series - Part 5

JavaScript, Reactive Programming1 min read


Here we are! Thanks for riding along in this journey. As promised, I'll compile in an organized manner a collection of resources that will help you sharping those reactive programming skills and built a better understanding of many of these concepts that are so abstract.

Visualization

These are some of the best websites/tools that I know.

  • Rx Visualizer Animated playground for Rx Observables - excellent code to animation playground. Suitable for limited complexity use cases, remarkable for learning.
  • Learn RxJS - because the official documentation can be a bit heavy and lacking examples for specific areas, this is a resource that I often utilize.
  • reactive.how - here you can find the most beautiful and clean animations for the different Rx operators. Refer to this one for good visual explanations for operators.
  • rx-marbles - my tool of choice to generate marble diagrams. I've used it to create the marble diagrams presented throughout this series. It has a nice DSL that allows you to generate marble diagrams programmatically, instead of dragging and dropping stuff around.
  • rxmarbles.com - more marble diagrams that depict the different Rx operators.
  • RxJS Fruits - play this interactive game to learn Rx. A more fun way of learning. It brings that bit of gamification into the learning process, making the learning experience much more enjoyable.

Talks

  • Complex Features Made Easy With RxJS - A demo of the power of RxJS. In this talk, the presenter builds complex features on top of an existing Angular application. The features comprehend things like animations, handling user events, and HTTP requests.
  • Creating an observable from scratch (live-coding session) - Ben Lesh - if you want to understand Observables' internals, this deep dive is the right resource. In this talk, you have the chance to see how to build an Observable (and even operators!) from scratch with interactive code examples.

Articles

These are loose articles that I read along the way, and they boost the understanding around those little details that are left out when you go through tutorials that cover the broad and most essential concepts. There are always those small bumps along the way, things we don't quite yet understand, but at some point their comprehension can play a pivotal role in the decisions that we make while we code!

  • A simple explanation of functional pipe in JavaScript - Ben Lesh, project lead of RxJS project, walks through the internal decision making and thought process that led RxJS to incorporate the function .pipe() into its API.
  • An Animated Intro to RxJS - don't be mistaken by the title. In this article, not only you'll get comprehensive code snippets to trigger some cool animations with RxJS, but you'll also get a fair introduction to some of the base concepts of reactive programming and RxJS.
  • Understanding Marble Diagrams for Reactive Streams - an extensive walkthrough on several operators of the Rx API. It can be somewhat redundant if you can pick up things by looking at the documentation, but we're all different. Sometimes all it takes is another explanation for us to pick up that hard concept.
  • Writing Marble Tests - you can approach unit testing with a similar pattern to procedural code. You can go with a "subscribe and assert way", but there's a fair amount of caveats that you need to be aware of when doing so, such as the lengthy transformation of streams or calling done to signal the end of asynchronous operations. Marble tests are stream-oriented and enable you to perform assertions on higher-level stream representations in a less boilerplate-ish fashion than the "subscribe and assert way".
  • RxJS: Don’t Unsubscribe - tl;dr leverage Rx itself to manage subscriptions instead of being worried about unsubscribing yourself and thinking about all the scenarios where you need to unsubscribe. You can think of it this way: "Can I code this in a way that streams will cleanup themselves?".
  • RxJS is great. So why have I moved on? - a distinct point of view on how an alternative path to progress when we get to a point where we become overwhelmed by massive amounts of entangled streams in our codebase.
  • 5 Things to Know About Reactive Programming - I've read this one more than once; beyond SPAs, reactive patterns have their advantages when applied to the server-side world - examples in this article are in Java.

That's all! I hope you've enjoyed this Reactive Series as much as I did.


If you liked this article, consider sharing (tweeting) it to your followers.