¡Compártelo!

Todo lo que necesitas saber sobre Ivy, el nuevo motor de renderizado de Angular 9

En este artículo vamos a explicar qué es Ivy, el nuevo motor de renderizado de Google implantado en la versión 9 de Angular. Repasaremos los principales beneficios que supone. ¡Vamos allá!

¿Qué es Ivy?

Ivy es el nombre que el equipo de Google le ha dado a su nuevo motor de renderizado, sacado de forma beta en Angular 8 e implantado en la última versión 9 del framework. Este nuevo compilador nos genera un código más limpio, eficiente y escandalosamente menos pesado, teniendo en cuenta que Angular es una librería completa. Acallando así las peores críticas que recibía desde la comunidad Front-End.

Ivy vs. Renderer2

A diferencia del Renderer2, que sacó la versión 4, ya no es necesario crear el archivo metadata.json, que nos servía como archivo intermedio para compilar nuestro código. Reduciendo el número de pasos necesarios para el renderizado y agilizando el proceso como podemos ver en la siguiente imagen:

Angular 9
Gracias a este nuevo sistema podemos crear y manipular el DOM de una manera más amigable con el Tree Shaking. El equipo de desarrollo se fijó en todo momento en este proceso que nos sirve para hacer un análisis del código y ver qué se usa y qué no, eliminándolo del build y proporcionando así una mayor ligereza. El código que generará Ivy es muy similar al Incremental DOM de Google, a diferencia del Virtual DOM que venía utilizando. Esto significa que los cambios son aplicados directamente al HTML de forma incremental, reduciendo así el consumo de memoria.

Angular 9

Ventajas de Ivy

Como hemos comentado Ivy no es solo un nuevo render, es un compilador que nos ofrece tiempos de compilación y rendering más optimizados.

Dos nuevos entry points:

NGTSC

Aunque es el transpilador que usa habitualmente TypeScript, con Ivy han conseguido reducir su código reduciendo los pasos.

Este generará la definición del componente mediante propiedades estáticas ya resueltas por Typescript, estas son añadidas al componente, siendo notablemente más eficiente que hasta ahora. Además, el Template reducirá su tamaño en el build.

NGCC

El Ng Compatibility Compiler nos convertirá cualquier paquete externo que provenga de node_modules en compatibles con Ivy, transpilandoles al mismo formato generado por NGTSC. Para ello genera una versión propia del node_modules, llamada Ngcc node_modules. Esto permite la retrocompatibilidad hacia atrás de cualquier librería. Para ejecutar ngcc después de cada instalación que hagamos de node_modules hay que incluir un script de postinstall.Angular 9

Incorporar componentes creados en Angular

Otra de las posibilidades que ofrece este nuevo sistema es que con su renderizado nos facilita una posible incorporación de nuestros componentes creados en Angular. Digamos, por ejemplo, en un proyecto realizado en React. Para ello, crearemos nuestros componentes en una librería Angular y estos serán envueltos por un componente React. Esto nos abre un campo en el que se pueden crear aplicaciones híbridas sin ser web components como tal.

Mejor depuración

La mejora en la depuración es un hecho, Ivy nos ofrece mejores herramientas para ello. Al ejecutar el entorno de desarrollo con Ivy nos lo posibilita. Podemos pedirle a Angular que nos proporcione acceso a instancias de componente y directivas. Se puede llamar manualmente a los métodos y actualizar su estado. En el caso de querer ver los resultados de la detección de cambios, puede activar la detección de cambios mediante applyChanges.

Mejor internacionalización de los archivos i18n

También ha mejorado la internacionalización de los archivos i18n, parece haber agilizado el proceso de traducción hasta en diez veces respecto al anterior motor.

Pruebas más eficientes

En cuanto a las pruebas la nueva actualización, nos trae unas pruebas de TestBed más eficientes. En este caso, anteriormente cada vez que compilábamos se volvía a hacer todos los test, aunque los archivos no se hubiesen modificado desde la compilación anterior. Esto lo han solucionado y ya no pasará por esos archivos a no ser que se le solicite manualmente. Con esto nos ofrece un tiempo un 40%-50% menor. Como TestBed.get ha sido depreciado, hemos de reemplazarlo por TestBed.inject<any> en todos los casos.

Control de errores más sencillo

Por la parte del control de errores el motor Ivy nos da un mayor detalle y es más fácil de leer.

Rendimiento de Ivy en un ejemplo real

Hemos probado estos cambios en la aplicación Tour of Heroes que nos ofrece Angular. Y la mejora es más que evidente en el peso de la aplicación. En la versión 8 de Angular podemos ver como los polyfills pesan 416 kB y el vendor a su vez pesa 4.66 MB.

Angular 9
Sin embargo, actualizada la app y ya en la versión 9 observamos como los polyfills han bajado a 280 kB y el vendor ahora lo tendemos en 3.44 MB en los entornos de desarrollo.

Angular 9
En el caso de prepararlo para producción los resultados serían los siguientes para dicho proyecto según las versiones:

Angular 8:

Angular 9
Angular 9:

Angular 9
Conclusión

Desde luego, creemos que Ivy es una de las mejores y más valiosas actualizaciones que ha conseguido el equipo de Google respecto al framework. Os dejamos el enlace de Angular por si queréis profundizar más: https://angular.io/

Imagen de portada: Designed by upklyak / Freepik

Artículos relacionados

Apache Kafka

Qué es Apache Kafka y cómo dar los primeros pasos

En este artículo vamos a ver qué es Apache Kafka y cuáles son los primeros pasos para empezar a utilizar esta tecnología clave para realizar procesamiento de datos en tiempo real. ¿Qué es Apache Kafka? Apache Kafka es un sistema de mensajería distribuido y escalable

microfrontends

Microfrontends: qué son, ventajas y cuándo utilizarlos

En este post analizamos qué son los microfrontends, por qué y cuándo utilizarlos y cuáles son sus principales ventajas e inconvenientes. ¡Vamos allá! ¿Qué son los microfrontends? Los microfrontends extienden los conceptos de microservicios al ecosistema frontend. Esto surge ante la necesidad de dividir en

Desarrollador Full Stack

Desarrollador Full Stack: qué es, qué hace y qué necesita saber

Seguro que en los últimos tiempos has oído hablar de la figura del desarrollador Full Stack. Y no es extraño, ya que se ha convertido en uno de los profesionales más solicitados por las empresas en la actualidad. Si no tienes muy claro qué hace