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 erformance en Angular

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

• Utilizar lazy loading.

• Estrategia de prefetching, es decir, cargo lo que va a ver el usuario y despues por debajo voy a estar cargando uno por uno los modulos para no esperar a que el usuario vaya a dar click ahi sino que lo hago por debajo despues de cargar la página al inicio.

• Encapsulamiento de modulos (SCAM - Single Component Angular Module) donde cada componente es un modulo.

• Change detection onPush cuando sea necesario.

OnPush

Es una estrategia diferente al change detection en cuanto a detección de cambios. Es una estrategia propuesta por el angular team (viene dentro de angular) simplemente se cambia en el componente, hay un apartado de changeDetection strategy.

Básicamente evita que el componente dispare peticiones de observar todos los cambios a lo largo del arbol HTML a menos que el cambio sea de un input, o sea, de unos de los inputs que tiene ese componente por lo que puedes cambiar ciertas cosas y no disparar la detección de cambios.

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.