Monday, September 17, 2018

Observables and Subjects in Angular

Simply put ReactiveX (Reactive Extensions) is an API for asynchronous programming with observable streams. It mainly follows Observer pattern as well as the Iterator pattern with functional programming. ReactiveX has few implementations for main programming languages such as 

  • RxJava for Java
  • RxJS for JavaScript
  • Rx.NET for .NET
Here we'll focus on RxJS...

RxJS is a Reactive Extensions Library for JavaScript. It makes it easier to write asynchronous or callback based calls.

Observable
Invokable collection of future values or events. Subscribe to it to get the values. of returns an Observable. (check link for more details)



Observer is isolated from the logic. It just reacts to the details provided. Here you need to subscribe to it to get a value. You need to understand that Observables is not a angular specific feature. It's a standard for managing async data proposed to release with ES7.

Observables by default are “Cold” meaning they are lazy and won’t run any code until there is a subscriber.

Here there is no way to update the productIdList and run the subscription. You have to recreate the Observable. Still previous subscriptions won't get fired. 

Observer: Collection of callbacks that knows how to listen to values of Observables

Subscription: Execution of an Observable (see above example)

Operators: Pure functions that enables a functional programming style for dealing with observables. Above of is an operator which emit variable amount of values in a sequence and then emits a complete notification.

Subject: Same as EventEmitter. Way of multicasting a value or event to multiple Observables. Subject is another Observable type in rxjs. It can emit multiple event values.

Subject implements Observable. Unlike observables, anyone can listen and trigger events of Subject. 

Subject can emit events before subscriptions.


Outputs

An observable can be created from both Subject and BehaviorSubject using subject.asObservable().

Here you'll notice 1 is not printed because subscription started after value 1 is emitted. You can use ReplaySubject to emit previous values as well


BehaviorSubject is same as Subject but you can give it a default value. 



Notice that rack sensor values. Since we have not emitted any value initially. It'll print 1000 the default value. 

Scheduler: Centralized dispatchers to control concurrency. Using schedulers you can control when a notification from a rxjs method needs to be sent out. We don't use schedulers much in Angular

RxJS can be think of as Lodash for events.

Check following articles for more information

https://stackoverflow.com/questions/39494058/behaviorsubject-vs-observable
https://stackoverflow.com/search?q=%5Bangular%5D+observable

12 comments:

Powered by Blogger.


Software Architect at Surge Global/ Certified Scrum Master

Experienced in Product Design, Software Engineering, Team management and Practicing Agile methodologies.

Search This Blog

Facebook