Introduction to RxJS – Extensions for JavaScript Reactive Streams
Tags: reactive, streams, javascript, rxjs
Published: 2021-05-22 14:32:14

https://grokonez.com/frontend/introduction-to-rxjs-javascript-reactive-stream

Introduction to RxJS – Extensions for JavaScript Reactive Streams

Reactive Extensions for JavaScript (RxJS) is a precise alternative for callback or Promise-based libraries. It treats any ubiquitous source of events in the exact same manner, whether it is reading a file, making an HTTP call, clicking a button, or moving the mouse. RxJS is built on top of the pillars of functional and reactive programming, as well as a few popular design patterns such as Observer and Iterator.

<!--more-->
<h2>Everything - just like a Stream</h2>
To work with RxJS, we should think in terms of streams. The image below shows a simple stream (or pipeline) approach to handling data:

<img src="https://grokonez.com/wp-content/uploads/2018/03/introduction-rxjs-pipeline-producer-consumer.png" alt="introduction-rxjs-pipeline-producer-consumer" width="630" height="257" class="alignnone size-full wp-image-10959" />

- <strong>Producer</strong> is data source that produces various forms of data to be consumed.
- <strong>Pipeline</strong> is series of logic blocks that will be executed in order when data becomes available. The data (stream of asynchronous data) are filtered and processed in different ways so that they can be more easily consumed by <strong>Consumer</strong>.
- <strong>Consumer</strong> subscribes to (or listen for) Producer's events and will do something with (consume) received data.

Any data point that holds one or more values, from a single integer to bytes of data, can be applied to the concept of a stream. Streams originate from a <strong>Producer</strong>, where data flows through a pipeline, arriving at a <strong>Consumer</strong>.

For example, we have set of operations (filter, map) that occurs between the creation of the Producer of the stream (the array) and the Consumer (the function that logs to the console):

<img src="https://grokonez.com/wp-content/uploads/2018/03/introduction-rxjs-pipeline-producer-consumer-sample.png" alt="introduction-rxjs-pipeline-producer-consumer-sample" width="605" height="160" class="alignnone size-full wp-image-10962" />

We can create streams from static data sources: numbers (or strings), sequences, or arrays. But the power of RxJS is that it can deal with dynamic data sources in exactly the same way.

<h2>Components of an Rx Stream</h2>
<h3>Producer</h3>
A stream must always have a Producer - source of data. It is the starting point for any logic performing in RxJS.

In practice, a Producer is created from something that generates events independently (a single value, an array, mouse clicks, a bytes stream from a file). In RxJS, we call it <strong>Observable</strong> (as it's able to be observed).

<strong>Observable</strong> is responsible for something like pushing notifications, which means that it only emits events and doesn't care about consuming them.
<h3>Consumer</h3>
We also need a Consumer to accept events from the Producer and process them in some specific ways. When Consumer begins listening (subscribing) to Producer for events, we now have a Stream. RxJS uses Consumer as an <strong>Observer</strong>.

With RxJS, streams travel only from the Producer to the Consumer, not the other way around. This means that streams always flow from an <strong>Observable</strong> to an <strong>Observer</strong>. In addition, both components are loosely coupled:

<img src="https://grokonez.com/wp-content/uploads/2018/03/introduction-rxjs-observable-observer.png" alt="introduction-rxjs-observable-observer" width="482" height="161" class="alignnone size-full wp-image-10966" />

Once the Observer begins receiving events from the Observable, what can we do with the data?
>> Within the Data Pipeline.
<h3>Data Pipeline</h3>
RxJS gives us ability to manipulate and edit data when it passes from Producer to Consumer by a list of methods (<strong>Observable <em>operators</em></strong>). It means that we can adapt the output of the Producer to match the expectations of the Consumer.

More at:

https://grokonez.com/frontend/introduction-to-rxjs-javascript-reactive-stream

Introduction to RxJS – Extensions for JavaScript Reactive Streams