Desde la versión 8 de Angular podemos elegir la opción de trabajar (solo para testear, aún no es una solución estable) con Ivy, el nuevo motor de renderizado de Google, que ofrece novedades interesantes que mejoran de forma sustancial el sistema actual de renderizado de las vistas, aumentando la velocidad de compilación y, sobre todo, reduciendo el tamaño de los builds. Suena bien, ¿verdad?
Ivy trae un nuevo concepto para actualizar el DOM, llamado Incremental DOM, el cual se diferencia de su principal alternativa (Virtual DOM) en que reduce bastante el memory footprint (espacio total en memoria que ocupa la aplicación) y logra el tree shaking (los módulos no utilizados no se incluirán en el bundle durante el proceso de build de la aplicación).
Características de Ivy
Hemos dicho que iba a ser más rápido, más simple y de menor tamaño. El build de una aplicación “Hola mundo” con un framework como angular, con el sistema anterior, ocupaba casi 2MB. Con Ivy, conseguimos reducir el tamaño del build a apenas 3.5 kb. Pero, ¿cómo conseguimos esta mejora? Como hemos comentado anteriormente, todo lo que Angular detecte que no se está utilizando, será eliminado, evitando incluir trozos de código que no se usarán.
Otro motivo que justifica esta mejora es la manera en la que Angular compilará la aplicación. Para ello, necesitamos entender el proceso de compilación de una aplicación Angular. Este proceso consiste principalmente en que sus componentes, pipes, providers, plantillas, etc., antes de que el navegador ejecute la aplicación, todos estos artefactos pasan por el compilador de Angular para convertirse en Javascript ejecutable en el navegador. Por defecto, las aplicaciones en Angular son compiladas en tiempo de ejecución (JIT). Con Ivy, la manera por defecto de compilar la aplicación es mediante AoT (Ahead of Time), que reduce significativamente el tamaño del build y mejora la carga de la página.
Renderer 2 vs Ivy
Hemos dicho que la principal característica de Ivy es que introduce el concepto de DOM Incremental. Esta es la manera de introducir nuevos nodos en el DOM a través de instrucciones.
Renderer 2 es la forma en la que se hace el rendering de la aplicación desde Angular 4. El flujo que sigue Renderer 2 para actualizar el DOM, es el siguiente:
El template es transformado junto con las variables (template data) en código JS que se pasa al intérprete para procesar y generar (en runtime) el árbol DOM. Para procesar y generar el correspondiente árbol Renderer2 realiza un análisis de código estático y genera un fichero metadata.json con las instrucciones de compilación.
Este fichero metada.json transformará nuestra template en un código tal que:
Con Incremental DOM, el flujo se simplifica de la siguiente manera:
En vez de generar template data y pasárselo al intérprete que posteriormente tomará las decisiones de qué operaciones ejecutar, se genera un conjunto de instrucciones directamente que acabarán actualizando el DOM. Se simplifica por tanto el proceso, reduciendo el número de pasos y eliminando la necesidad de crear el fichero metadata.json.
Con Incremental DOM, no se crea un DOM alternativo o virtual ya que los cambios son aplicados al nodo HTML directamente y de forma incremental lo que reduce el consumo de memoria de forma notable.
Hay que decir que Ivy no incluye Incremental DOM como dependencia, sino que ha implementado su propia versión basada en ese concepto.
Y, ¿cómo puedo probar Angular Ivy?
Para utilizar Angular Ivy en nuestra aplicación, creamos un nuevo proyecto habilitando la opción de Ivy:
Lo cual configura el nuevo renderer modificando los siguientes ficheros:
- src/tsconfig.app.json: agregara enableIvy con el valor de true
- angular.json agregara la opción de aot y la marcara como true
Conclusión
Como podéis ver, Ivy tiene buena pinta, principalmente porque soluciona uno de los principales hándicaps de los que se acusaban a Angular, como es su rendimiento y tamaño de aplicación. Habrá que esperar a que se libere una versión definitiva. En este enlace, podéis seguir el estado en el que se encuentra.
