Analizando el Change Detection

Contenido del curso

Introducción

1
Angular 8 Performace
00:47 min

Analizando el tamaño del Bundle

Aumenta la velocidad de navegación

Rendimiento en tiempo de ejecución

Conclusiones

23
Conclusiones
00:37 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0011:11

Analizando el Change Detection

Curso de Rendimiento en Angular

Clase 18 de 23

Clase 18 / 23

Recursos

¿Cómo mejorar visualmente nuestra lista con estilos?

Para hacer que nuestra lista sea visualmente más atractiva, podemos aplicar algunos estilos CSS. Colocaremos estos estilos al costado de los archivos para que nuestra lista se vea mejor. Esto no solo embellece la interfaz, sino que también facilita la visualización de los elementos.

<div class="cto">
  <!-- Aquí colocaremos los elementos de la lista -->
</div>

Recuerda que estos estilos estarán disponibles al costado, por lo que no tendrás que preocuparte por encontrarlos en otro lugar.

¿Cómo gestionamos los datos aleatorios en nuestros componentes?

Vamos a utilizar un servicio que genera datos aleatorios. Este servicio nos facilitará la creación de listas con nombres y rangos de números aleatorios, lo cual es esencial para evaluar la detección de cambios en nuestra aplicación.

Importaremos el servicio en nuestro componente padre.
Utilizaremos una interfaz para manejar los datos y prevenir errores.
Generaremos listas distintas para diferentes departamentos como ventas y recursos humanos.

¿Cómo inyectamos un servicio en Angular?

Para inyectar un servicio en Angular, sigue estos pasos:

Asegúrate de importar el servicio en el componente donde lo necesitas.
Declara el servicio en el constructor del componente para que Angular lo inyecte automáticamente.
Usa el servicio según tu necesidad para obtener o manipular datos.

import { AleatoriaService } from 'path/to/service';

@Component({/* ... */})
export class MiComponente {
  constructor(private aleatoriaService: AleatoriaService) {
    // Podemos usar aleatoriaService aquí
  }
}

¿Cómo utilizamos patrones para gestionar el estado y eventos?

El patrón "Smart/Dumb Components" ayuda a dividir tareas entre el componente que procesa los datos y el que los muestra. De esta manera, se optimiza el rendimiento y la eficiencia en la detección de cambios.

Componente inteligente: Encargado de manejar la lógica de la aplicación y montar los datos.
Componente tonto: La función principal es recibir datos y renderizarlos sin preocuparse por la lógica.

Implementación del patrón usando eventos

Para manejar eventos entre componentes y separar las responsabilidades de manera clara:

Usa @Output para emitir eventos desde el componente hijo al padre.
Define métodos en el componente padre que respondan a estos eventos.

@Output() agregarElemento = new EventEmitter<string>();

agregarItem(item: string) {
  this.agregarElemento.emit(item);
}

En el componente padre, escucharemos este evento y haremos la modificación necesaria, lo que permite mantener el código modular y más fácil de gestionar.

Ejemplos de métodos de Angular para optimizar el rendimiento

trackBy: Usa este método en listas para optimizar el rendimiento de tu aplicación.
OnPush Strategy: Utiliza esta estrategia de detección de cambios para mejorar el rendimiento al evitar actualizaciones innecesarias.

Con estas prácticas, garantizamos que nuestra aplicación de Angular sea robusta y eficiente, optimizando tanto la forma de manejar datos como su representación visual. Esto, unido al uso correcto de servicios y eventos, forma la base de aplicaciones bien estructuradas y mantenibles. ¡Continúa explorando y mejorando tus conocimientos en Angular!

Introducción

Angular 8 Performace

Analizando el tamaño del Bundle

¿Qué es un bundle size? Tree shaking y su importancia

Implementando Webpack Bundle Analyzer

Moment vs date-fns

Aplicando un Performance Budget desde el Angular CLI

Aumenta la velocidad de navegación

Code splitting a nivel de rutas

Implementando una propia estrategia de precarga

Implementando QuicklinkStrategy

Usando Machine Learning para predecir rutas

Google Analytics y Angular

Implementando GuessJs

Precarga con Service workers

¿Qué es Server Side Render?

Implementando Angular Universal

Cuidados con SSR y Angular

Rendimiento en tiempo de ejecución

¿Qué es el Change Detection?

Preparando módulo para Change Detection

Analizando el Change Detection

Optimización de componentes con OnPush

Usando pipes puros

subscribe

Async

Conclusiones

Conclusiones

Analizando el Change Detection

Progreso del curso

Introducción

Analizando el tamaño del Bundle

Aumenta la velocidad de navegación

Rendimiento en tiempo de ejecución

Conclusiones

Recursos

Recursos