RxJS Introduction

Introduction

• Reactive Extension for JavaScript
• RxJs is a library for composing asynchronous and event-based programming.
• It provides Observables, satellite types (Observer, Scheduler, Subjects) and operators inspired by Array Methods like (Map, Filter, reduce, every etc.)

Feture of RxJS

• Observable: Represents the idea of an invokable collection of future values or events.
• Observer: Is a collection of callbacks that know how to listen values deliverd by the Observales.
• Subsciption: Represents the execution of an Observales, is primarily useful for cancelling the execution.
• Operators: Dealing with collections with opearators like map, filter, reduce, concat, etc.
• Subject: Is equivalent to an EventEmitter, and the only way of mutlicasting a value or event to mutliple Observers.
• Schedulers: Centerlized dispatchers to control concurrency, allowing us to coordinate when computaion happes on. e.g. setTimeout and requestAnimationFrame or othes.

Advantages and Disadvantages of RxJS

Advantages

• RxJS is growing rapidly
• RxJs is powerfull and functional tool integrated into wide a framework.
• Flexible to use
• RxJS can easily be used with other javascript libraris.
• Frame work Angular, Vue, React, Node
• A vast and helpful liibrary
• RxJS uses observables to work with reactive programming.
• It comes to handling aync tasks.
• Deals with asynchronous data calls, callbacks and event-based programs.
• High Quality API
• It is easy to describe a complex stream of data compact and precise.
• Hide the complexity of the process from a developer and allows him to focus more on the product
logic.
• It becomes possible for a developer to singnificantly simplify the workflow asynchronous data
flows.
• Plenty of time and effort for other tasks.
• Makes programming easy
• It provides vast collection of operators in mathematical, transformation, utility, filtering,
conditional, error handling, join categories.
• Provides good optimization and memory leaks protection.
• It is solid background that assures developer for high quality of optimization.
• Extensibility
• Small and concise footprint
• It provides high-quality optimization and has a modular architecture.
• The charcteristics make it small.
• No Third-party dependencies.

Disadvantages

• RxJS requires data immutibility
• Testing and Debugging is difficult
• Strict typing issues
• Use of Observables: It have to warp full code under the observables

Examples

Ex.1

import { Component } from '@angular/core';
import { fromEvent } from 'rxjs'
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  
  ngOnInit(){
    fromEvent(document, 'click').subscribe(() => console.log('Clicked!'));
  }
}
	

Ex.2 Purity

import { Component } from '@angular/core';
import { fromEvent, scan } from 'rxjs'
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  
  ngOnInit(){
   
    fromEvent(document, 'click')
    .pipe(scan((count) => count + 1, 0))
    .subscribe((count) => console.log(`Clicked ${count} times`));
  }
}
	

Ex.3 Flow

import { Component } from '@angular/core';
import { fromEvent, scan, throttleTime } from 'rxjs'
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  ngOnInit(){
    fromEvent(document, 'click')
    .pipe(
      throttleTime(1000),
      scan((count) => count + 1, 0)
    )
    .subscribe((count) => console.log(`Clicked ${count} times`));
  }
}
	

Ex.4 Values

import { Component } from '@angular/core';
import { fromEvent, map, scan, throttleTime } from 'rxjs'
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
  })
export class AppComponent {
  ngOnInit(){
      fromEvent(document, 'click')
      .pipe(
        throttleTime(1000),
        map((event:any) => event.clientX),
        scan((count, clientX) => count + clientX, 0)
      )
      .subscribe((count) => console.log(count));
  }
}