In learning RxJS, I found many concepts difficult to understand, such as responsive programming, observer mode, various operators, and multicast. These concepts often take a lot of time to understand and are difficult to grasp. So I wrote a short story about “college student entrepreneurship” to help you understand the core concept of RxJS.

The protagonist of the story is Wang, a college student majoring in computer science. Let’s first follow wang’s steps to understand imperative programming, declarative programming and responsive programming.

Imperative programming

After graduation, Xiao Wang returned to his hometown and opened a supermarket. Xiao Wang couldn’t do it alone, so he hired Uncle Li to help him in the store. In order to have a better understanding of the supermarket’s operation, Xiao Wang asked Li Shu to count up the total expenditure last week. But Uncle Li could not do this, so Xiao Wang had to explain every step clearly:

1. Track your daily expenses

2. Add up your expenses for each day of the week

3. Send the results to your boss

When dealing with problems, imperative programming needs to describe clearly How to do each step through programming language loop statements (for/while) or conditional statements (switch/if) to achieve the final result (What).

To calculate the total expenditure in an imperative manner, the code is as follows:

function getTotalCosts(costs) {
  let total = 0;
  for (let i = 0; i < 7; i++) {
    total = total + costs[i];
  }
  return total;
}
Copy the code

Li Shu calculated the total expenditure according to Xiao Wang’s instructions. But after xiao Wang learned, but a little distressed, because the expense is relatively high. So, let Li Shu quickly calculate: if every day to reduce 10% of the expenditure, see how much money can be saved a week? But Uncle Li still didn’t know how to calculate. Wang thought, this is almost the same as before? There is no way, or only hand to hand teaching:

1. Track your daily expenses

2. Multiply your daily expenses by 0.9

Add up your expenses for each day of the week

4. Send the results to your boss

To calculate the total cost of the reduction in an imperative manner, the code is as follows:

function getReducedCosts(costs) {
  let total = 0;
  for (let i = 0; i < 7; i++) {
    total = total + costs[i] * 0.9;
  }
  return total;
}
Copy the code

Does it feel repetitive? This is one of the problems with imperative programming. Many real-world problems have “similar patterns,” and if you abstract these patterns, you can reduce the amount of repetitive code.

Declarative programming

Xiao Wang thinks that only statistics expenditure is not enough, we also need to pay attention to the turnover of the store. But there were too many things in the store, and it was really tiring to teach Uncle Li to do it by hand. So he asked his cousin, who studies finance, to help. So Xiao Wang just told her cousin: Help me count the turnover of the store today. As for how to calculate the turnover, my cousin has her own way.

Declarative programming only describes What to do when dealing with a problem, rather than telling the machine How to do it.

To calculate the previous two problems declaratively, the code is as follows:

const getTotalCosts = (costs) = > costs.reduce((res, item) = > res + item);
const getReducedCosts = (costs) = > costs.reduce((res, item) = > res + item * 0.9);
Copy the code

As you can see, the code is much cleaner. Loop statements in imperative programming are encapsulated in reduce functions. This makes development more efficient. In addition, declarative programming is the foundation of functional programming.

Responsive programming

Although the arrival of his cousin eased wang’s burden, such a management model was not smart enough for him as a computer student. So he bought a business management system. As long as one item is sold, the system will automatically calculate the turnover, so that Wang can check the report anytime he wants. Because reports “respond” to changes in items.

Responsive programming is a programming paradigm for “data flow” and “change propagation” (wikipedia). A little hard to understand, isn’t it? But we can think of it this way:

A data stream can be thought of as a sequence of events at the supermarket checkout, such as:

-- -- -- -- -- -- -- chips x1 -- -- -- -- -- - bubble type x1 -- -- -- -- -- - diet coke x3 -- -- -- -- -- - biscuits x2 - -- -- -- -- -- - > time axisCopy the code

The change transmission can be understood by the changing total price at the cashier desk: as the cashier finishes drawing the TWO-DIMENSIONAL code of each commodity, the total price displayed on the screen is constantly changing.

Reactive programming is very different from the imperative and declarative programming we mentioned earlier. Both imperative and declarative programming describe an “instantaneous” process. Just like let the cousin to calculate the current turnover, and so on after the cousin calculation, even if there are new goods sold, the number will not change, unless recalculated.

Reactive programming is more about relationships. For example, turnover = the sum of the prices of the goods sold. As soon as new items are sold, the turnover will change accordingly.

For me, responsive programming is more about a shift in thinking, a shift from “pull” to “push.” Both “pull” and “push” are described from the perspective of “data consumers.” For example, if I want to get some data, I call a function. This is active “pull”. When I subscribe to a data source, the data will be pushed to me at the right time. This is “push” mode.

In responsive programming, “pre-piping” is very important. When we have a pipeline laid out, the data will flow along the pipeline, and everything will happen according to our preset logic.

summary

Through Wang’s entrepreneurial story, we learned about imperative programming, declarative programming and responsive programming. Here, let’s review their characteristics again:

  1. Imperative programming: You need to describe How to do each step in order to achieve the end result.

  2. Declarative programming: simply describe What to do, without telling the machine exactly How to do it.

  3. Responsive programming: Based on data flow and change propagation. It reflects the process of responding to change.

reference

zhuanlan.zhihu.com/p/34445114