Introduction to RxJS – Extensions for JavaScript Reactive Streams
rxjs
6
Javascript
321
reactive
3
streams
2
Male avatar

loveprogramming viết ngày 22/05/2021

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.

Everything - just like a Stream

To work with RxJS, we should think in terms of streams. The image below shows a simple stream (or pipeline) approach to handling data:

introduction-rxjs-pipeline-producer-consumer

  • Producer is data source that produces various forms of data to be consumed.
  • Pipeline 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 Consumer.
  • Consumer 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 Producer, where data flows through a pipeline, arriving at a Consumer.

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):

introduction-rxjs-pipeline-producer-consumer-sample

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.

Components of an Rx Stream

Producer

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 Observable (as it's able to be observed).

Observable is responsible for something like pushing notifications, which means that it only emits events and doesn't care about consuming them.

Consumer

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 Observer.

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

introduction-rxjs-observable-observer

Once the Observer begins receiving events from the Observable, what can we do with the data?

Within the Data Pipeline.

Data Pipeline

RxJS gives us ability to manipulate and edit data when it passes from Producer to Consumer by a list of methods (Observable operators). 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

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

Male avatar

loveprogramming

545 bài viết.
98 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
Male avatar
1 0
Tutorial Link: (Link) (Ảnh) Django is a Pythonbased free and opensource web framework that follows the modeltemplateview architectural pattern. A...
loveprogramming viết 7 tháng trước
1 0
Male avatar
1 0
https://loizenai.com/angular11nodejspostgresqlcrudexample/ Angular 11 Node.js PostgreSQL Crud Example (Ảnh) Tutorial: “Angular 11 Node.js Postg...
loveprogramming viết 6 tháng trước
1 0
Male avatar
1 0
Angular Spring Boot jwt Authentication Example Github https://loizenai.com/angularspringbootjwt/ (Ảnh) Tutorial: ” Angular Spring Boot jwt Authe...
loveprogramming viết 6 tháng trước
1 0
Bài viết liên quan
White
69 8
Tăng sức mạnh cho javascript với lodash Lần này mình sẽ giới thiệu 1 thư viện javascript vô cùng bá đạo có tên là "lodash]1]", có thể nói nó là LI...
Huy Hoàng Phạm viết hơn 5 năm trước
69 8
Male avatar
0 0
https://grokonez.com/java/java9/java9flowapireactivestreams Java 9 Flow API – Reactive Streams Java 9 introduces Reactive Streams under java.util...
loveprogramming viết 2 tháng trước
0 0
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


Male avatar
{{userFollowed ? 'Following' : 'Follow'}}
545 bài viết.
98 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!