Synchronous and asynchronous sequences in RxJS

Question

I have a pretty simple, I think, question about the difference between synchronization and asynchronous statements and sequences.

Everything that we deal with programs can be represented as a sequence. This means that I can have both:

• array of numbers as a sequence. This is something that I would traditionally consider synchronously, for example. using the reduce function to calculate the sum or average. But I need to know all the elements in order to calculate them.
• array of click events. They arrive asynchronously (in the future, and I do not know how much and when they arrive).

Using the generic Observable data type, I can perform many operations with various elements such as merge , zip , etc.

The whole idea of ​​RxJS is to process sequences asynchronously, so my question is what is the point of all average , count , max , min , reduce , etc. operators who need a sequence that needs to be completed? If I cannot add any element to the sequence (asynchronously add the element to the array - why not?), So that it recounts - why should I use RxJS over Array.prototype.reduce?

In other words - initially I thought that a sequence should always be able to execute statements on it (without any statements) also when the sequence is not completed .

Answer 1

As you said, Rx will help you with asynchronous events. Of course, in the case of reduce you can also use the Array method. But you need to (a) perform the entire calculation from the very beginning, when a new value arrives or (b) save the accumulated value and make one reduction for the new value.

So, if you use RxJS, this will basically do (b) for you. This means that it will store the accumulated value in the observable created by the .reduce method. Whenever a new value (from the manufacturer) appears, it will again apply the methods.

In the case of count , max and min : they are actually filters. Of course, you can implement this with temporary values ​​and some Array methods. But, if you have already tried this on your own, it is really cumbersome to implement and process asynchronous events. You must store temporary values, ...

RxJS will abstract all asynchronous actions for you. The operators you mentioned are just great tools for converting / filtering / ... incoming things. I would suggest reading this Ben Lash article .

The big win with RxJS is that, especially if you are creating a user interface, you never know when your "asynchronous array" (= events) will be completed. So you need to do (a) or (b) which is really annoying. RxJS abstracts this behavior for you, so you can solve real problems.

About completion

I missed one point you made about the sequence that needs to be completed:

This is not true for all operators. If you subscribe to the chain of Observable + statements, you always get the current (= last) value created by the observable. If a new value is passed through the pipeline, the current value will be updated and all subscribers will be notified.

Example

Here's a very simple example, in my opinion, shows why RxJS is such a huge improvement over the “old way of doing things”: http://jsbin.com/suqila/1/edit?js,output

In non-RxJS, you should always maintain state and introduce a side effect into your method. With RxJS, you can remove a side effect that greatly simplifies code definition.

Sync vs async

In the above article, Ben Lesh says:

Observatories are usually asynchronous.

What he means by this is that you usually use observables to solve problems that are asynchronous, autocomplete is a very popular example. Rarely can you also use synchronous observables. Observable.of([1,2,3]) is synchronous, for example.

This may be confusing at first, but it doesn't really matter much. Observables are lazy / push -based. Meaning, they do nothing until they push a new meaning from their producer and / or someone who signs up for them (depending on whether it's hot or cold). But it depends on the manufacturer if the process is synchronous or asynchronous.

The same is true for operators. These are functions that take the source of the observable and return a new observable that will subscribe to this source, the observable when it is signed. This is pretty much the case. They are executed when a new value is passed through a chain of statements.