6 consejos para mejorar el rendimiento de aplicaciones en Angular
Hoy en día, todo el mundo sabe que la creación y desarrollo de aplicaciones web de alto rendimiento es un pilar clave para retener a los usuarios y mantenerlos satisfechos. Sin embargo, con la constante aparición de errores que corregir y nuevas funciones que crear, es mucho más fácil decirlo que hacerlo. Afortunadamente, en la actualidad, con las últimas versiones de Angular se puede recurrir a diversos recursos para mejorar el rendimiento de una aplicación creada en este Framework, diversos aspectos hacen que una aplicación tenga tiempos de carga mejores y se establezcan de manera optima y vamos a verlos en el artículo de hoy.
¿Qué es Angular?
Como ya vimos en la comparativa entre Angular y React, Angular, la evolución de AngularJS, es un Framework de desarrollo basado en JavaScript y Google, muy utilizado para páginas web con una única página/ventana.
Angular separa completamente el Frontend y el Backend en la aplicación, evita escribir código repetitivo y mantiene todo más ordenado gracias a su patrón MVC (Modelo-Vista-Controlador) asegurando los desarrollos con rapidez, a la vez que posibilita modificaciones y actualizaciones.
Entre otras ventajas, este framework es modular y escalable adaptándose a nuestras necesidades y al estar basado en el estándar de componentes web, y con un conjunto de interfaz de programación de aplicaciones (API) nos permite crear nuevas etiquetas HTML personalizadas que pueden reutilizarse.
¿Cómo optimizar el rendimiento de mi aplicación en Angular?
Tras las ultimas actualizaciones de Angular, podemos recurrir a distintos recursos que nos permitirán mejorar el rendimiento de nuestra aplicación mejorando tiempos de carga.
¡Comencemos!
Lazy Loading
Lazy Loading o carga diferida, es sin duda una de las mejores características de Angular y una de la más utilizadas por los desarrolladores. Este mecanismo permite que la carga se divida en vez de cargar la aplicación completa al iniciar la aplicación.
Es decir, al implementar un script como LazyLoad, el navegador carga las imágenes y el resto de los datos solo cuando estos aparecen en la ventana gráfica o viewport (el área visible) del usuario, por ejemplo, al desplazarse por la ventana del navegador o maximizarla, ya que la mayoría de las aplicaciones contienen más de una página o módulos.
Gracias a Angular y esta característica nos permite cargar de manera sencilla solo lo que necesitemos, lo único que necesita es que cada página contenga su propio modulo y rutas.
Podemos realizar esta carga según a unas condiciones, por ejemplo, en base a roles, si implementamos un guard especifico y lo enlazamos a estos módulos y rutas especificas podremos realizar una tarea más completa.
TrackBy
Para Angular manipular el DOM siempre es una tarea compleja, y esto se puede comprobar gracias a la directiva estructural de *ngFor.
Al iterar un listado de elementos y mostrarlo en el DOM en una aplicación, lo que hace *ngFor es una validación de igualdad para comprobar si los elementos que están en la lista han cambiado, esta acción lo realiza mediante referencias.
En Angular, la función TrackBy permite al usuario seleccionar una clave específica que se utilizará para analizar cada elemento de la lista en función de esa clave. TrackBy es especialmente útil cuando disponemos de matrices y objetos anidados que desean proporcionar un identificador único para cada uno.
Gracias a la opción TrackBy, Angular detecta que elementos se añaden o no a la lista.
Es importante tener en cuenta que TrackBy solo se aplica a la iteración actual de un array u objeto, no a todas las iteraciones futuras.
Build para producción
Una técnica realmente sencilla para implementar en nuestro proyecto, simplemente, al realizar un build (comando para compilar los archivos de Angular) tenemos que agregar –prod –aot
Con este parámetro “—prod” indicamos a Angular que se optimice para que el tamaño de los archivos compilador sea mucho menor y por lo tanto la carga será más rápida.
Con el parámetro “—aot” indicamos que revise el código para optimizarlo, aunque en las últimas versiones este comando se ejecuta directamente con al anterior parámetro mencionado.
Gracias a estas características, podremos activar los siguientes parámetros en la aplicación:
- Compilacion AOT: Precompila los templates de los diversos componentes
- Bundling y Minification: Remueven excesos de caracteres opcionales y concatenan archivos en paquetes más pequeños
- Dead Code Elimination: Remueven código no referenciados y no usados
- Production mode: Despliega el modo de producción, por lo tanto, remueve procesos que solo se implementan en un modo de desarrollo
Server Side Render (SSR)
Server Side Render es otro de los recursos de Angular que nos permite ejecutar código por parte del servidor, optimizando y reduciendo los tiempos de carga.
Normalmente ejecutamos nuestro código del lado del navegador que tengamos predefinido, lo que nos permite el SSR es poder renderizar el contenido en el servidor como si fuera una aplicación hecha con el lenguaje del servidor, generando diversas paginas estáticas que se muestran al cliente, haciendo que la aplicación procese más rápido la información y esto ayuda enormemente al SEO y los metadatos de nuestra aplicación.
Facilita a los rastreadores web
La mayoría de las redes sociales dependen de distintos rastreadores webs para la indexación del contenido de sus aplicaciones y hacer que dicho contenido se pueda buscar en la web. Es posible que a través de estos rastreadores web no se pueda navegar en la aplicación de Angular como lo haría un usuario.
Pero Angular nos permite generar una versión estática de la App para buscar y enlazar fácilmente sin la necesidad de JavaScript.
Es posible que necesitemos una versión de la aplicación renderizada por parte del servidor y sin JavaScript, ya que esta versión, aunque sea limitada, podría ser la alternativa principal para las personas que de otro modo no puedan usar la aplicación.
Muestra la primera página más rápido que las demás
Mostrar la primera página rápidamente puede ser fundamental para el usuario promedio. Está comprobado que las páginas que cargan muchísimo más rápido funcionan mucho mejor, incluso con cambios muy pequeños. Por ello, es muy importante que la aplicación se inicie rápido para atraer a los usuarios antes de que tomen otra decisión y abandonen la página.
Con Angular podremos generar páginas de destino, estas son HTML puro y pueden mostrarse incluso cuando JavaScript esta deshabilitado. Una de sus limitaciones es que no manejan eventos del navegador, pero si admiten el uso de RouterLink. En la práctica, se ofrece una versión estática de esa página para mantener la atención del usuario, mientras que al mismo tiempo se carga la aplicación completa y el usuario percibe un rendimiento instantáneo.
Progressive Web Apps (PWA)
La Progressive web Apps o aplicación web progresiva es una solución basada en la web tradicional que todos conocemos, aunque incorpora particularidades que la hacen parecerse a una App nativa para teléfonos móviles y tabletas.
Y una de las ventajas más importantes de PWA es que el usuario puede seguir consultando tu web, aunque haya perdido la conexión a internet.
Al realizar una aplicación web progresiva nuestra aplicación cargará mucho más rápido ya que nos da la capacidad de trabajar de manera offline y con una interacción muy cercana a una aplicación nativa, mejorando enormemente el rendimiento percibido por el usuario, además utiliza la caché del navegador local para permitir una mejor experiencia y funcionalidad.
Valores de caché a través de pipes y funciones
Para comenzar, es necesario saber que los pipes son una herramienta de Angular que nos permite transformar visualmente la información, por ejemplo, cambiar un texto a mayúsculas o minúsculas, o darle formato de fecha y hora.
Incluso cuando usamos pipes, podemos optimizar el uso de nuestra aplicación aún más recordando o almacenando en caché los valores anteriores, lo que nos permite no necesitar volver a calcular si ya ejecutamos la tubería con la misma entrada en el pasado.
Las Pure Pipes no recuerdan los valores anteriores, pero solo se asegurarán de que, si la entrada no ha cambiado la referencia, no se volverá a calcular.
Por ello, para hacer el almacenamiento en caché del valor anterior, necesitamos combinarlo con algo más. Una manera fácil de hacerlo es usar el método de memorización de Lodash.
En este caso, esto no es muy práctico ya que la entrada es una matriz de objetos. Si la tubería estaba tomando un tipo de datos simple, como un número, como entrada, podría ser beneficioso usar esto como una clave para almacenar en caché los resultados y así evitar el recálculo, permitiendo una carga más rápida y eficiente.
Descubre más referencia y buenas prácticas de uso de Angular visitando la documentación oficial de Angular y la documentación oficial de Angular CLI.