A las puertas de la versión 9 de Angular: Ivy Compiler

Aunque en la sombra, este será la tercera versión del compilador de angular, es decir el encargado de traducir nuestro código TypeScript en algo que entienda el navegador y manejar los cambios en el DOM. En la versión 2 teníamos “Template Compiler”, en la 4 pasamos a “View Engine” y desde la 8 (opcional) y por defecto en la 9 tendremos “Ivy”. Veamos algunas de las novedades o mejoras.

Tamaño del bundle

Unos de los peros que la gente le achaca a Angular es el tamaño de los bundles generados, y más si los comparamos con otros generados por otras opciones como React o Vue (no olvidemos que Angular es un framework completo)

Teniendo esto en mente y si queremos mejorar la experiencia de apps en dispositivos móviles este punto era uno a mejorar. Estos datos solo realmente visibles en proyectos / medianos ya que el equipo de Google se ha centrado en la reducción del código generado y no en el Core.

Incremental DOM

Como hemos comentado una de las mejoras es Angular 9 es el uso por defecto del nuevo motor de renderizado que nos aporta 2 optimizaciones. Por un lado, tenemos un menor uso de memoria, ya que a diferencia del Virtual DOM de React, solo necesita reservar memoria si algun nodo del árbol cambia, y el tamaño de la reserva será en función del nodo en si.

Por otro lado, cada componente contiene referencias hacia un conjunto de instrucciones, que si no se usan serán eliminados del bundle final.

Compilación más rápida

Otra mejora y gracias a Ivy será la velocidad de compilación de nuestra aplicación. Ahora los cambios en componentes provocaran solo la compilación del componente en sí y no del módulo.

Lazy loading de componentes

Ahora Angular es mucho más dinámico. Desde la versión 8 podemos importar los módulos de forma dinámica con soporte ES6:

Ivy Compiler

Además, también podemos cargar un componente de esta misma forma aislada, es decir, sin importar un módulo contenedor.

Escrito por: Jose Fernando Almoguera, technical lead de Front-End en Bravent.