¡Compártelo!
Compartir en facebook
Compartir en twitter
Compartir en linkedin

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

Oh My ZSH

Vitamina tu terminal con Oh My ZSH

Para todos los que nos dedicamos al mundo del desarrollo software, una gran parte del tiempo de nuestro trabajo pasa al lado de nuestra querida terminal. En este post hablaremos de Oh My ZSH, un paquete de utilidades, plugins y plantillas para el shell ZSH que

sdkman

SDKMAN!: ¿qué es, cómo instalarlo y utilizarlo?

En este artículo vamos a hablar un poco sobre qué es SDKMAN!, cómo se instala y qué nos ofrece. Veremos también un ejemplo real de cómo instalar varias versiones de Java utilizando esta herramienta. ¡Sigue leyendo! ¿Qué es SDKMAN!? SDKMAN! es una herramienta que nos

DevToys

DevToys, o cómo facilitar el día a día de un desarrollador software

Microsoft nos presenta, de la mano de Etienne Baudoux, DevToys, una pequeña suite de utilidades de código abierto enfocada a facilitar el día a día de los desarrolladores de software. Su creador la define como una “navaja suiza para desarrolladores” y, desde hace pocos meses,