Buenas practicas

Se recomienda utilizar camelcase, declarar las variables arriba del constructor, utilizar getters al final de la pagina, trabajar con linters.

Desuscribirse de los observables a los que te suscribiste, tratar de utilizar el async pipe, no ejecutes funciones dentro del template HTML sino dentro de pipes, no es necesario utilizar librerias que hacen ciertas cosas porque angular ya tiene algunas por defecto por ejemplo las fechas, etc.

Arquitectura LIFT

LIFT - lleva la escalabilidad desde las buenas prácticas que Angular propone para mantener un proyecto organizado y estandarizado.

  • Locate

    Expresa que debe haber una facilidad de encontrar los componentes, directivas, pipes, servicios, etc en la estructura del proyecto.

  • Identify

    Se trata de reconocer rápidamente el rol que cumple cada uno de los archivos, es decir, colocarle ‘apellido’ al archivo.

  • Flat

    Mantener la estructura de nuestro proyecto de forma plana, con máximo 3 niveles de profundidad en la estructura de carpetas del proyecto.

  • Try DRY

    Alienta la reutilización de código con el fin de tener un proyecto mantenible.

Rererencia: https://xcidic.github.io/coding-guidelines/angular1/application-structure-lift-principle/

Mejorar el performance en Angular

  • Utilizar el async pipe dentro de nuestros componentes para ya no suscribirnos manualmente y no tener que desuscribirnos.

  • Utilizar lazy loading.

  • Minimizar bundles y usar production mode.

  • Optimizacón de imágenes.

  • Strict Mode

  • Change detection onPush cuando sea necesario.

OnPush

En Angular, OnPush es una estrategia de detección de cambios que se puede aplicar a los componentes para optimizar el rendimiento de la aplicación. Esta estrategia se configura mediante la propiedad changeDetection del decorador @Component.

¿Qué es OnPush?

OnPush es una estrategia de detección de cambios que hace que Angular verifique los cambios en un componente solo bajo ciertas condiciones específicas, en lugar de verificar los cambios en cada ciclo de detección de cambios. Esto puede mejorar significativamente el rendimiento de la aplicación al reducir la cantidad de veces que Angular necesita verificar los cambios en un componente.

¿Para qué sirve OnPush?

  1. Optimización del Rendimiento: Al reducir la frecuencia con la que Angular verifica los cambios en un componente, OnPush puede mejorar el rendimiento de la aplicación, especialmente en aplicaciones grandes o complejas.

  2. Control Fino sobre la Detección de Cambios: Permite a los desarrolladores tener un control más preciso sobre cuándo y cómo se verifican los cambios en un componente, lo que puede ser útil en escenarios donde el rendimiento es crítico.

¿Cómo se usa OnPush?

Para usar la estrategia de detección de cambios OnPush, debes configurar la propiedad changeDetection del decorador @Component con el valor ChangeDetectionStrategy.OnPush. Aquí tienes un ejemplo:

import { Component, ChangeDetectionStrategy } from '@angular/core';

@Component({
  selector: 'app-example',
  template: `
    <div>{{ data }}</div>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class ExampleComponent {
  data: any;

  constructor() {
    this.data = { name: 'John Doe' };
  }

  updateData() {
    this.data = { name: 'Jane Doe' };
  }
}

¿Cuándo se verifican los cambios con OnPush?

Con la estrategia OnPush, Angular verificará los cambios en un componente solo en las siguientes situaciones:

  1. Cambios en las Entradas (Inputs): Si alguna de las entradas (@Input) del componente cambia.

  2. Eventos del Componente: Si el componente o alguno de sus hijos emite un evento.

  3. Observables y Promesas: Si el componente está suscrito a un observable o una promesa que emite un nuevo valor.

  4. Métodos Asíncronos: Si el componente utiliza métodos asíncronos como setTimeout o setInterval.

Ejemplo Práctico

Supongamos que tienes un componente que muestra una lista de elementos y quieres optimizar su rendimiento utilizando OnPush:

import { Component, Input, ChangeDetectionStrategy } from '@angular/core';

@Component({
  selector: 'app-item-list',
  template: `
    <ul>
      <li *ngFor="let item of items">{{ item }}</li>
    </ul>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class ItemListComponent {
  @Input() items: string[];
}

En este ejemplo, el componente ItemListComponent solo verificará los cambios cuando la entrada items cambie, lo que puede mejorar el rendimiento si la lista de elementos es grande o si el componente se utiliza en múltiples lugares de la aplicación.

Pros:

  • Estas evitando utilizar toda la llamada de toda la lectura de los componentes de arriba

Contras:

  • Si no lo manejas bien estas perdiendo la característica automatica de la detección de cambios y tendrás que hacer cambios manualmente y aveces no se disparara la detección de cambios ni manualmente.

Conclusión

OnPush es una herramienta poderosa para optimizar el rendimiento de las aplicaciones Angular al reducir la frecuencia con la que se verifican los cambios en los componentes. Sin embargo, es importante entender cuándo y cómo usar esta estrategia para aprovechar al máximo sus beneficios. componente por lo que puedes cambiar ciertas cosas y no disparar la detección de cambios.

Last updated