Basic Concepts of Rxjs library Observables and Operators

Basic Concepts of Rxjs Library (Observables and Operators)

Reactive Extensions for JavaScript (RxJS) is a reactive streams library which allows you to work with asynchronous data streams. RxJS can be used both in the browser as well as for the server-side using Node.js.

In this blog, we are discussing Rxjs basic concepts.

Firstly we have to discuss what are Asynchronous Data Streams?

Let's Describe each word separately:-

Asynchronous:- In JavaScript, when we call a function at that time you don't need to wait for your turn it works parallelly like a multi-tasking. It doesn't mean that javascript has multi-thread it has the asynchronous code which works in the single thread, which is used by the event loops. This is often used for Ajax calls, DOM-events, Promises, WebWorkers and WebSockets.

Data:- It's a kind of raw info sort of JavaScript information sorts as variety, String, Objects, Arrays, and Maps.

Streams:- Stream is a sequence of information created accessible over time.

In Rxjs we represent asynchronous data streams with the observable sequences. It is also known as observables. Observables are very flexible and they can be used to push or pull the patterns.

push pattern is when we subscribed to the source and react to new data when it's available.
pull pattern is when we are using the same approach but synchronously. It happens when using arrays, Iterables.

Example:- Observable sequence within an Angular

$scope.counter = 0;
 rx.Observable;
 .interval(1000);
 .take(3);
 .safeApply($scope, function(x) {
    $scope.counter = x;
})
.subscribe(); // shows 0, 1, 2

In this example, we used an Observable with a chain of operators and ending with a call to subscribe. The first .interval() operator it waits for 1 second and emits values. The second .take() operator takes the first 3 items. The third .safeApply() operator, it's a helper method, Finally, a call to subscribe triggers the execution.

Lets Discuss Observables and what are its operators in more detail:-

RxJS combines Observables and Operators so we can subscribe to streams and react to changes using composable operations. Observables get their name from the Observer design pattern. The Observable sends notifications while the Observer receives them. You can pass operators in your observer when calling subscribe or with these callbacks onNext(), onError() and onCompleted(). 

onNext() is called for each element in the observable sequence.
onError() is called only once in case of an error.
onCompleted() is called once when the stream finishes.

If we want to stop listening to changes, we can unsubscribe by getting a reference and clean up on $destroy.

Operators:- we already have seen some Operators. there are some most common operators are as follow: merge @, concat @, defer, do, map @, flatMapLatest, fromPromise, fromEvent, takeUntil @, throttle, delay @, empty, catch, if, timer, filter, zip @

Thanks,