What is Responsive programming and RxJS in 5 minutes


code
Report an error

Reactive Programming (Reactive Programming) is an asynchronous Programming paradigm for data flow and change propagation. Like a simple Click event that can be listened to to behave accordingly, reactive programming treats all variables, user input, asynchronous interface requests, etc., as an Observable stream and listens to it to respond.

Responsive programming

One of the hardest things about learning responsive programming is to think responsive programming. It also means abandoning our programming mindset and forcing our brains to think in a new way. Below, I’ll use a real and simple example to show how responsive programming thinking works.

Suppose our program needs to listen for the Double Clicks event on a user list so that it can pop up a dialog box for editing user information.

First we treat the user’s Click event as a chronological Stream of events (hereinafter referred to as a Stream) that can emit three different signals: Value, Error, and Completed, as shown in the figure below. In general, our main job is to define the event handler for the Value signal.

Reactive programming provides a series of functions, such as map, filter, and so on, to convert a Stream into a new Stream. In our example, we used a few simple functions to turn an ordinary Click flow into a Double Clicks flow.

The gray box is the function used to convert Stream. First, we accumulated clicks for 250 ms in a row into a list. The result is a Stream of lists, and then we use map() to map each list to an integer, its length. Finally, we use filter(x >= 2) to filter out the integer 1. In this way, the desired Stream is generated after these operations. We can then subscribe to the Stream and react the way we want.

Finally, let’s think about how you might implement these features the traditional way.

RxJS

RxJS (Responsive Extension JavaScript version) is a JavaScript library for responsive programming using observables that makes it easier to combine asynchronous and callback-based code. Angular, for example, introduced RxJS to make asynchronous programming more manageable and easier.

RxJS provides an implementation of the Observable type and utility functions for creating and using observables. These utility functions are as follows:

category operation
create from.fromPromise.fromEvent.of.range 等
combination combineAll.concat.merge.startWith.zip 等
filter debounceTime.throttleTime.filter.take.takeUntil 等
conversion buffer.groupBy.map.mergeMap.scan.switchMap 等
tool tap.repeat.delay.timeInterval 等
multicast share.publish 等

The following code is an RxJS implementation of the example in the first section of this article.

import { fromEvent } from 'rxjs';
import { buffer, map, filter, throttleTime } from 'rxjs/operators';

const userBox = document.getElementsByClass('user-box');
 
const doubleClicksStream = fromEvent(userBox, 'click').pipe(
  buffer(throttleTime(2500)),
  map(list => list.length),
  filter(x => x >= 2)
);
 
doubleClicksStream.subscribe(data => {
  // Handle the double clicks event
});
Copy the code

If you want to learn more about RxJS, check out the official RxJS Guide.