> For the complete documentation index, see [llms.txt](https://shimozurdo.gitbook.io/frontend/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://shimozurdo.gitbook.io/frontend/angular/buenas-practicas.md).

# 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 p**erformance 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:

```typescript
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`:

```typescript
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.