Reactive Programming and RxJS🙀🤠

What is Reactive Programming ?

Reactive programming is programming with asynchronous data streams. You are given an amazing toolbox of functions to combine, create and filter any of those streams. A stream can be used as an input to another one. Even multiple streams can be used as inputs to another stream. You can merge two streams. You can filter a stream to get another one that has only those events you are interested in. You can map data values from one stream to another new one.

What are data Streams ?

Streams of data in which each data point can be associated with an Timestamp. Eg- When you click mouse , then the time when you clicked the mouse and the pixel coordinates where you clicked together can be called as a Data Stream. [ timestamp : 123456789 , {x : 12px, y : 13px} ]

ASCII way of representing Data Streams


--a---b-c---d---X---|->

a, b, c, d are emitted values
X is an error
| is the 'completed' signal
---> is the timeline

Let’s look at another example. Let’s make a counter stream that indicates how many times a button was clicked. In common Reactive libraries, each stream has many functions attached to it, such as map, filter, scan, etc. When you call one of these functions, such as clickStream.map(f), it returns a new stream based on the click stream. It does not modify the original click stream in any way. That allows us to chain functions like this clickStream.map(f).scan(g)

Let’s represent it using ASCII diagram as above.


clickStream: ---c----c--c----c------c-->
vvvvv map(c becomes 1) vvvv
---1----1--1----1------1-->
vvvvvvvvv scan(+) vvvvvvvvv
counterStream: ---1----2--3----4------5-->

The map(f)function replaces (into the new stream) each emitted value according to a function f() you provide. In our case, we mapped to the number 1 on each click. The scan(g)function aggregates all previous values on the stream, producing count of clicks as seen in the above diagram named as counterStream .

Let’s look into code

Detecting double click from multiple clicks

In this example, we will look into a case where we try to detect double and multiple clicks from multiple single clicks.

Let’s look into what different parts of code are doing.

Cmnt 1 : Set a handler for the UI element which we will be observing

Cmnt 2 : Rx.observable.fromEvent(button,'click') sets an observable on click event which will emit a stream of events referenced as Clickstream

Before moving to next line of code, let’s look at few examples which will explain some of the basic operators which will be helpful here.

Interval Operator

Code in the above JS bin will give you an idea about how Interval operator works. This operator will output a sequence of events(numbers) at the specified time Interval.

Throttle Operator

This operator selects the first event from number of events which happen within the specified time. For eg, in the above diagram, the second stream is the timeline and the first one is the original stream. Every first event which happens in that time period gets becomes the output stream.

[ a x y ] → a

[b x ] → b

[ c x x x ] → c

Code below will make it clear how it works.

Buffer Operator

Buffer Operator

Buffer Operator creates small buffers of data as and when notified to do so. For eg- In the above diagram, first is an Input stream and second stream notifies when buffer ends resulting in creation of buffers which can be seen below.

Look at the below code for better understanding. It starts a stream of events using Interval operator and uses mouse click as events which make buffer end and prints resulting array.

So, going back to our main code, since you have seen all the operators, it will be easy to understand the code now.

Cmnt 4. So here we are creating a buffer using another stream which throttles on clickstream for 250 ms

Cmnt 5 & 6. In this line we are processing the inputs using map and filter to output events which have more than 2 clicks

Cmnt 7. Here we subscribe to the multiClickStream and update number of clicks in the body .

Cmnt 8 & 9: Here we again throttle to multiClickStream for 1000ms and erase the content we added before.

I hope this article gives an Overview of what is Reactive Programming and how we can use with RxJS.

P.S. : I will be adding any important articles or links which I find useful as i learn more about Reactive Programming.

この記事が気に入ったら、お気に入りボタンを押して下さい。。🙇🏻🙇🏼‍🙇🏻

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade