Skip to main content

What is RxJS?

 

What is RxJS?

The full form of RxJS is Reactive Extension for Javascript.




As per the official website of RxJS - RxJS is a library for composing asynchronous and event-based programs by using observable sequences. It provides one core type, the Observable, satellite types (Observer, Schedulers, Subjects) and operators inspired by Array#extras (map, filter, reduce, every, etc) to allow handling asynchronous events as collections

To manage the sequence of events RxJS combines the Observer pattern with the Iterator pattern and functional programming with collections

 

Observer Pattern:

It is a software design pattern in which an object called Subject maintains a list of its dependents called Observers. It works well for applications that expect real-time updates.

It is one to many patterns which are one Subject Many Observers.

When the subject is updated it will automatically fire an event and notify the observers of the state changes and it carries some data along with it.

 

                                            

 

 

 

Essential concepts of RxJS:

Observable:  Function that creates an observer

Observer: is an object includes next(), error()  & complete() methods and it listen to values delivered by Observables.

Subscription: it will subscribe to the Observable to get execute it. It is also used to cancel the execution.

Operators: Pure functions that dealing with collections with operations like map, filter, concat, reduce, etc.

Subject: Is an Observable multicast value to many observers i.e. one to  many.

Schedulers: controls the execution that when the computation should happen.

Labels:

Comments

Post a Comment

Popular posts from this blog

React JS - Beginners

  React JS React is an open-source JavaScript library for building user interfaces or UI components. It was created at Facebook and open-sourced in March of 2013. It is used on social platforms like Instagram, Facebook, Twitter. And It is used on content delivery platforms like NetFlix, Spotify. Beyond Web applications, you can create native mobile applications using React Native. Check your system node and npm version. Node version should be greater than 8.10 and for npm, we need version 5.6.   Create a new React-app: Command to create a new react app: npx create-react-app new-app   To start the react app: npm start   Folder Structure: package.json – It contains all the project dependencies. src folder – It contains the files required to build the application public folder – when we ready to build the app for production all the built files will be placed in the public folder.   Create a React element: Elements are the building blocks of React apps
Post a Comment
Read more

Convert Base64 code to PDF file in Angular

Component.ts: import { DomSanitizer } from '@angular/platform-browser' ; base64Code = 'your base64 code ' ; byteCharacters : any ; pdfUrl : any ; constructor ( public sanitizer : DomSanitizer ) { } convertToPdf () { // tslint:disable-next-line:max-line-length this . byteCharacters = this . base64Code ; // atob() function decodes a string of data which has been encoded using base-64 encoding const byteCharacters = atob ( this . base64Code ); const byteNumbers = new Array ( byteCharacters . length ); for ( let i = 0 ; i < byteCharacters . length ; i ++) { byteNumbers [ i ] = byteCharacters . charCodeAt ( i ); } const byteArray = new Uint8Array ( byteNumbers ); const blob = new Blob ([ byteArray ], { 'type' : 'application/pdf' }); this . pdfUrl = URL . createObjectURL ( blob ); } Component.html: < embed [src] = "sanitizer.bypassSecurityTr
1 comment
Read more

Observable, Subject , Behavior Subject using RxJS:

  Create an Observable using RxJS:   Import the Observable                                    import  {  Observable  }  from   'rxjs' ; The Observable execution deliver three types of values: "Next" - sends a value such as a Number, a String, an Object, etc. "Error - sends the Error or exception. "Complete" - does not send a value after the Complete                                             ngOnInit ():  void  {                    this . observable$  =  new   Observable ( subscriber   =>  {                      subscriber . next ( 1 );                      subscriber . next ( 2 );                      subscriber . next ( 3 );                      subscriber . complete ();  //Complete the subscribing here                      subscriber . next ( 4 );   // Value not send after complete                   });                    this . observable$ . subscribe ( value   =>  {                      console . log ( value );   
Post a Comment
Read more