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
?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
?
OnPush
?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.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
?
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:
¿Cuándo se verifican los cambios con OnPush
?
OnPush
?Con la estrategia OnPush
, Angular verificará los cambios en un componente solo en las siguientes situaciones:
Cambios en las Entradas (Inputs): Si alguna de las entradas (
@Input
) del componente cambia.Eventos del Componente: Si el componente o alguno de sus hijos emite un evento.
Observables y Promesas: Si el componente está suscrito a un observable o una promesa que emite un nuevo valor.
Métodos Asíncronos: Si el componente utiliza métodos asíncronos como
setTimeout
osetInterval
.
Ejemplo Práctico
Supongamos que tienes un componente que muestra una lista de elementos y quieres optimizar su rendimiento utilizando OnPush
:
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