A brief talk about Rx responsive programming

1. Observable

Observable literally means "observable", in other words, it is a kind of "data source" or "event source". This data source has the ability to be observed, which is fundamentally different from actively collecting data. To use a vivid metaphor, Observable is like a faucet. You can turn on the faucet - subscribe to Observable, and then water - data will flow out continuously. This is the core idea of ​​responsive programming - changing from active to passive. However, this is not explained in detail in this article.

Observable is a concept that can be implemented in different ways. This article uses high-order functions to implement two commonly used Observables: fromEvent and Interval. By explaining the two behaviors of subscribing and unsubscribing to Observable, we can help readers truly understand what Observable is.

2. Higher-order functions

The concept of higher-order function comes from functional programming. A simple definition is that the input parameter or return value of a function is a function of a function. For example:

function foo(arg){
    return function(){
        console.log(arg)
    }
}
const bar = foo("hello world")
bar() // hello world

ps: There are many things that higher-order functions can do, and they are only used here for the situations required in this article.

The call to the foo function above does not print hello world directly, but only caches the hello world. Later, we call the returned bar function according to actual needs, and then actually execute the work of printing hello world.

Why do we need to do this step of packaging? In fact, the effect of doing this is to "delay" the call. And the essence of everything lies in the word "delay". We're essentially packaging a behavior to look like something consistent, like a delivery box.

Different things can be put inside, but for logistics it is a unified thing. Therefore, unified operations for express boxes can be formed, such as stacking, transporting, storing, and even the action of opening the box is consistent.

Going back to the previous example, calling the foo function is equivalent to packing a courier box. There is a fixed program in the courier box, which executes a printing operation when the courier box is opened (calling bar).

We can have foo1, foo2, foo3... there are various programs in it, but these foos have a common operation which is "open". (The premise is that foo will return a function, so that the "open" operation can be satisfied, that is, calling the returned function).

function foo1(arg){
    return function(){
       console.log(arg+"?")
    }
}
function foo2(arg){
      return function(){
         console.log(arg+"!")
     }
}
const bar1 = foo1("hello world")
const bar2 = foo2("yes")
bar1()+bar2() // hello world? yes!

3. Express Box Model

3.1. Express Box Model 1: fromEvent

With the above foundation, let's take a look at the most commonly used Observable in Rx programming—fromEvent(……). For beginners of Rx programming, it is difficult to understand the difference between fromEvent(...) and addEventListener(...) at first.

btn.addEventListener("click",callback)
rx.fromEvent(btn,"click").subscribe(callback)

If you execute this code directly, the effect is indeed the same. So what's the difference? The most direct difference is that the subscribe function acts on fromEvent(...) instead of btn, while addEventListener acts directly on btn. The subscribe function is some kind of "open" operation, and fromEvent(...) is some kind of express box.

fromEvent is actually a "delayed" call to addEventListener

function fromEvent(target,evtName){
    return function(callback){
        target.addEventListener(evtName,callback)
    }
}
const ob = fromEvent(btn,"click")
ob(console.log) // equivalent to subscribe

oh! fromEvent is essentially a high-order function

As for how to implement subscribe to complete the "open" operation, it is beyond the scope of this article. In Rx programming, this subscribe action is called "subscription". "Subscription" is a unified operation of all Observables. Once again, the "call" to Observable in this article is logically equivalent to subscribe.

Let's take another example, which will basically allow readers to draw N inferences from two examples.

3.2. Express Box Model 2: Interval

There is an interval in Rx. What is the difference between it and setInterval?

I guess someone has already started to answer, interval is a delayed call to setInterval! bingo!

function interval(period){
    let i = 0
    return function(callback){
        setInterval(period,()=>callback(i++))
    }
}
const ob = interval(1000)
ob(console.log) // equivalent to subscribe

From the above two examples, whether it is fromEvent(...) or Interval(...), although the internal logic is completely different, they belong to the same thing as "express box", which we call Observable.

fromEvent and Interval are just models for making "express boxes". Only what is returned after the call is the "express box", i.e. fromEvent(btn,"click"), interval(1000) etc...

4. High-end express box

With the above foundation, let's start to advance: now that we have so many express boxes, we can repackage them.

As mentioned at the beginning of the article, the express box unifies some operations, so we can stack many express boxes together to form a large express box! This large express box has the same "open" operation (i.e. subscribe) as the small express box. What happens when we open this big express box?

There are many different possibilities, such as opening the small boxes one by one (concat), opening all the small boxes at once (merge), or just opening the box that is easiest to open (race).

Here is a simplified version of the merge method:

function merge(...obs){
    return function(callback){
        obs.forEach(ob=>ob(callback)) // Open all express boxes}
}

Let’s take the previous fromEvent and interval as an example!

Use the merge method to combine two Observables:

const ob1 = fromEvent(btn,'click') // Make express box 1
const ob2 = interval(1000) // Make express box 2
const ob = merge(ob1,ob2) //Make a big express box ob(console.log) //Open the big express box

When we "open" (subscribe) the big express box ob, the two small express boxes will also be "opened" (subscribed), and the logic in any small express box will be executed. We merge the two Observables into one.

This is why we work so hard to encapsulate various asynchronous functions into Observables - to facilitate unified operations on them! Of course, simply “opening” (subscribing) is only the most basic function, and we will start to move on to advanced functions.

5. Destroy the courier box

5.1. Destroy the courier box - cancel subscription

Let's take fromEvent as an example. Previously, we wrote a simple high-order function as a wrapper for addEventListener:

function fromEvent(target,evtName){
    return function(callback){
        target.addEventListener(evtName,callback)
    }
}

When we call this function, a delivery box is generated (fromEvent(btn,'click')). When we call the function returned by this function, the express box is opened (fromEvent(btn,'click')(console.log)).

So how do we destroy this opened express box?

First we need to get an opened courier box. The result of the above function call is void, and we cannot do anything with it, so we need to construct an opened courier box. Still use the idea of ​​higher-order functions: return another function in the returned function for destruction operations.

function fromEvent(target,evtName){
    return function(callback){
        target.addEventListener(evtName,callback)
        return function(){
            target.removeEventListener(evtName,callback)
        }
    }
}
const ob = fromEvent(btn,'click') // Make a courier box const sub = ob(console.log) // Open the courier box and get a function that can be used to destroy it sub() // Destroy the courier box

Similarly, we can do the same for interval:

function interval(period){
    let i = 0
    return function(callback){
        let id = setInterval(period,()=>callback(i++))
        return function(){
            clearInterval(id)
        }
    }
}
const ob = interval(1000) // Make a courier box const sub = ob(console.log) // Open the courier box sub() // Destroy the courier box

5.2. Destroy high-end express boxes

Let's take merge as an example:

function merge(...obs){
    return function(callback){
        const subs = obs.map(ob=>ob(callback)) // Subscribe to all and collect all destruction functions return function(){
            subs.forEach(sub=>sub()) // Traverse the destruction function and execute it}
    }
}
 
const ob1 = fromEvent(btn,'click') // Make express box 1
const ob2 = interval(1000) // Make express box 2
const ob = merge(ob1,ob2) //Make a large express box const sub = ob(console.log) //Open the large express box sub() //Destroy the large express box

When we destroy the large express box, we will destroy all the small express boxes inside together.

6. Supplement

So far we have finished talking about the two important operations of Observable (subscription and unsubscription). It is worth noting that the unsubscription behavior does not act on Observable, but on the "opened" express box (what is returned after subscribing to Observable)!

In addition to this, Observable has two other important operations, namely emitting events and completion/exceptions (these two operations are callbacks initiated by Observable, which are in the opposite direction of the operation, so they cannot be called operations).

These two behaviors are not so vivid with the express box. We can compare Observable to a faucet. The original opening of the express box becomes turning on the faucet, and the callback function we passed in can be likened to a cup to collect water! Since everyone is already very familiar with callback functions, this article will not go into details.

VII. Postscript

To summarize what we have learned, we have "delayed" some operations through higher-order functions and given them unified behaviors. For example, "subscribe" delays the execution of asynchronous functions, and "unsubscribe" delays the execution of resource destruction functions based on the above.

These so-called "delayed" executions are the hardest to understand and the most core part of Rx programming behind the scenes. The essence of Rx is to encapsulate asynchronous functions and then abstract them into four major behaviors: subscription, unsubscription, event emission, and completion/exception.

There are many ways to actually implement the Rx library. This article only uses the idea of ​​higher-order functions to help everyone understand the essence of Observable. In the official version, the Observable box is not a higher-order function, but an object, but it is essentially the same.

The above is a brief discussion of the details of Rx responsive programming. For more information about Rx responsive programming, please pay attention to other related articles on 123WORDPRESS.COM!