Angular: Exploring the most effective strategies for optimizing code within the ".subscribe()" method

Question

Angular: Exploring the most effective strategies for optimizing code within the ".subscribe()" method

Imagine having a component structured like this

The Initial Code:

import { HttpClient } from '@angular/common/http';
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `<pre>{{ response | json }}</pre>`,
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  constructor(private _http: HttpClient) {
    this.fetchUsers();
  }

  response!: any;

  fetchUsers() {
    this._http.get(`https://jsonplaceholder.typicode.com/users`).subscribe(
      (resp) => {
        console.log(resp);
        this.response = resp;
      },
      (err) => {
        console.error(err);
        this.response = err;
      },
      () => {
        console.log('Subscription Complete');
      }
    );
  }
}

and now we have various methods to restructure the code...

Refactoring Method 1:

import { HttpClient } from '@angular/common/http';
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `<pre>{{ response | json }}</pre>`,
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  constructor(private _http: HttpClient) {
    this.fetchUsers();
  }

  response!: any;

  onSubscribe = (resp: any) => {
    console.log(resp);
    this.response = resp;
  };

  onError = (err: any) => {
    console.error(err);
    this.response = err;
  };

  onCompletion = () => {
    console.log('Subscription Complete');
  };

  fetchUsers() {
    this._http
      .get(`https://jsonplaceholder.typicode.com/users`)
      .subscribe(this.onSubscribe, this.onError, this.onCompletion);
  }
}

Refactoring Method 2:

import { HttpClient } from '@angular/common/http';
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `<pre>{{ response | json }}</pre>`,
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  constructor(private _http: HttpClient) {
    this.fetchUsers();
  }

  response!: any;

  onSubscribe(resp: any) {
    console.log(resp);
    this.response = resp;
  }

  onError(err: any) {
    console.error(err);
    this.response = err;
  }

  onCompletion() {
    console.log('Subscription Complete');
  }

  fetchUsers() {
    this._http.get(`https://jsonplaceholder.typicode.com/users`).subscribe(
      (resp) => this.onSubscribe(resp),
      (err) => this.onError(err),
      () => this.onCompletion()
    );
  }
}

Refactoring Method 3:

import { HttpClient } from '@angular/common/http';
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `<pre>{{ response | json }}</pre>`,
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  constructor(private _http: HttpClient) {
    this.fetchUsers();
  }

  response!: any;

  fetchUsers() {
    this._http.get(`https://jsonplaceholder.typicode.com/users`).subscribe({
      next: (resp: any) => {
        console.log(resp);
        this.response = resp;
      },
      error: (err: any) => {
        console.error(err);
        this.response = err;
      },
      complete: () => {
        console.log('Subscription Complete');
      },
    });
  }
}

Refactoring Method 4:

import { HttpClient } from '@angular/common/http';
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `<pre>{{ response | json }}</pre>`,
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  constructor(private _http: HttpClient) {
    this.fetchUsers();
  }

  response!: any;

  onSubscribe = (resp: any) => {
    console.log(resp);
    this.response = resp;
  };

  onError = (err: any) => {
    console.error(err);
    this.response = err;
  };

  onCompletion = () => {
    console.log('Subscription Complete');
  };

  fetchUsers() {
    this._http.get(`https://jsonplaceholder.typicode.com/users`).subscribe({
      next: this.onSubscribe,
      error: this.onError,
      complete: this.onCompletion,
    });
  }
}

Refactoring Method 5:

import { HttpClient } from '@angular/common/http';
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `<pre>{{ response | json }}</pre>`,
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  constructor(private _http: HttpClient) {
    this.fetchUsers();
  }

  response!: any;

  onSubscribe(resp: any) {
    console.log(resp);
    this.response = resp;
  }

  onError(err: any) {
    console.error(err);
    this.response = err;
  }

  onCompletion() {
    console.log('Subscription Complete');
  }

  fetchUsers() {
    this._http.get(`https://jsonplaceholder.typicode.com/users`).subscribe({
      next: (resp: any) => this.onSubscribe(resp),
      error: (err: any) => this.onError(err),
      complete: () => this.onCompletion(),
    });
  }
}

The question arises:

With performance as the top priority and readability following that - which refactoring approach would be most suitable?

Refactoring Method 1?

Refactoring Method 2?

Refactoring Method 3?

Refactoring Method 4?

Refactoring Method 5?

The Initial Code?

angular typescript performance rxjs refactoring

Answer 1

Answer №1

In my opinion, I would restructure the code to use a more declarative approach

Start by creating a service that handles all data access operations.
Within the service, define a variable (not a method) to handle the Observable returned from the HTTP GET request.
In the component, declare a variable (outside of the constructor or lifecycle hooks) to manage the Observable returned from the service.
Utilize the async pipe within the template.

Sample Service:

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { tap } from 'rxjs';

@Injectable({
  providedIn: 'root',
})
export class UserService {
  users$ = this.http
    .get(`https://jsonplaceholder.typicode.com/users`)
    .pipe(tap((response) => console.log(response)));

  constructor(private http: HttpClient) {}

  fetchUsers() {}
}

Sample Component/template

import { Component } from '@angular/core';
import { catchError } from 'rxjs';
import { UserService } from './user.service';

@Component({
  selector: 'my-app',
  template: `<pre>{{ users$ | async | json }}</pre>`,
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  errorMessage = '';

  users$ = this.userService.users$.pipe(
    catchError(err => this.errorMessage = err)
  )

  constructor(private userService: UserService) { }

}

For further insights on this declarative programming pattern, check out: https://youtu.be/0XPxUa8u-LY

Answer 2

In my opinion, I would restructure the code to use a more declarative approach

Start by creating a service that handles all data access operations.
Within the service, define a variable (not a method) to handle the Observable returned from the HTTP GET request.
In the component, declare a variable (outside of the constructor or lifecycle hooks) to manage the Observable returned from the service.
Utilize the async pipe within the template.

Sample Service:

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { tap } from 'rxjs';

@Injectable({
  providedIn: 'root',
})
export class UserService {
  users$ = this.http
    .get(`https://jsonplaceholder.typicode.com/users`)
    .pipe(tap((response) => console.log(response)));

  constructor(private http: HttpClient) {}

  fetchUsers() {}
}

Sample Component/template

import { Component } from '@angular/core';
import { catchError } from 'rxjs';
import { UserService } from './user.service';

@Component({
  selector: 'my-app',
  template: `<pre>{{ users$ | async | json }}</pre>`,
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  errorMessage = '';

  users$ = this.userService.users$.pipe(
    catchError(err => this.errorMessage = err)
  )

  constructor(private userService: UserService) { }

}

For further insights on this declarative programming pattern, check out: https://youtu.be/0XPxUa8u-LY

Answer 3

Answer №2

In my opinion, the most effective approach would be to go with number 4 for the following reasons:

When it comes to readability, passing three arguments in a subscription (next, error, complete) is considered outdated in RxJS as function arguments can lead to code that is difficult to understand. More information on this topic can be found here

Rather than using individual function arguments, RxJS suggests utilizing a JavaScript object where you can clearly define the callbacks.

({next: () =>{}, error: () =>{}, complete: () =>{})

Furthermore, breaking down the code into functions can significantly improve its readability.

In terms of performance, by passing a JS object as an argument to the subscription, RxJS automatically assigns empty functions to any callback that is not explicitly defined, saving you from having to do it manually.

Answer 4

In my opinion, the most effective approach would be to go with number 4 for the following reasons:

When it comes to readability, passing three arguments in a subscription (next, error, complete) is considered outdated in RxJS as function arguments can lead to code that is difficult to understand. More information on this topic can be found here

Rather than using individual function arguments, RxJS suggests utilizing a JavaScript object where you can clearly define the callbacks.

({next: () =>{}, error: () =>{}, complete: () =>{})

Furthermore, breaking down the code into functions can significantly improve its readability.

In terms of performance, by passing a JS object as an argument to the subscription, RxJS automatically assigns empty functions to any callback that is not explicitly defined, saving you from having to do it manually.

Angular: Exploring the most effective strategies for optimizing code within the ".subscribe()" method

Answer №1

Answer №2

Similar questions

Utilizing ngModel within a ngFor iteration

Using the novalidate attribute in Angular 4.0.0

Having trouble setting the default value of a select element with 'selected' in Angular's bootstrap?

Is it possible to indicate the base type for a generic function?

the value of properrty becomes undefined upon loading

The art of toggling an ion-item effortlessly through a simple click of a button

Typing in a number will always activate the change event

Understanding how to extract and utilize the display name of enums from a C# Web API within an Angular

Running `ng start angularProject` or `npm install` will generate additional files in the project's

Error in AWS Cloud Development Kit: Cannot access properties of undefined while trying to read 'Parameters'

Validate uniqueness of input in database using Angular's async validator

My goal is to eliminate the console error message "@ Angular: GET http://localhost:4200/assets/i18n/1/fr.json 404 (Not Found)" related to missing file

Creating number inputs in Ionic 2/3 using alerts

The dynamic fusion of Typescript and Angular 2 creates a powerful

Cannot upload the same file to both Spring and Angular twice

Angular 4: Automatically dismiss modal once form submission process is complete

Challenge with sharing an array from a different component in Angular using @Input()

Obtaining the correct information from an array using Ionic's Angular framework

Utilizing Typescript within Visual Studio Code alongside node_modules

RXJS - Trigger a function based on a specific condition being fulfilled by a value emitted from an observable