An Animated Intro to RxJS

You might have heard of RxJS, or ReactiveX, or reactive programming, or even just functional programming before. These are terms that are becoming more and more prominent when talking about the latest-and-greatest front-end technologies. And if you’re anything like me, you were completely bewildered when you first tried learning about it.

ReactiveX is a library for composing asynchronous and event-based programs by using observable sequences.

That’s a lot to digest in a single sentence. In this article, we’re going to take a different approach to learning about RxJS (the JavaScript implementation of ReactiveX) and Observables, by creating reactive animations.

Understanding Observables

An array is a collection of elements, such as [1, 2, 3, 4, 5]. You get all the elements immediately, and you can do things like map, filter and map them. This allows you to transform the collection of elements any way you’d like.

Now suppose that each element in the array occurred over time; that is, you don’t get all elements immediately, but rather one at a time. You might get the first element at 1 second, the next at 3 seconds, and so on. Here’s how that might be represented:

This can be described as a stream of values, or a sequence of events, or more relevantly, an observable.

An observable is a collection of values over time.

Just like with an array, you can map, filter, and more over these values to create and compose new observables. Finally, you can subscribe to these observables and do whatever you want with the final stream of values. This is where RxJS comes in.