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

 

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.

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 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

 

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. Este cuenta con 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

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.

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.

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.

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 de reducción entre un 40% y el 50% menos. Como TestBed.get ha sido depreciado, hemos de reemplazarlo por TestBed.inject<any> en todos los casos.

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

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

Desde luego creemos que es una de las mejores actualizaciones y más valiosas 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

¿Te pareció interesante? Compártelo:
Share on Facebook
Facebook
Share on Google+
Google+
Tweet about this on Twitter
Twitter
Share on LinkedIn
Linkedin
Print this page
Print
Email this to someone
email

Marcos Sanz González

Desarrollador FrontEnd