Ivy, el nuevo Motor de Render de Angular 6 ¿qué tan eficiente es?

Hace poco más de un mes, quienes desarrollamos en Angular, nos encontramos en condiciones de utilizar las primeras estables de Angular 6. La misma trae una cantidad considerable de novedades (no solo Bug Fixes), a tal punto de merecer la pena un artículo íntegramente dedicado a describir las nuevas funcionalidades. Para aquellos que deseen eso, les dejamos uno de nuestros videos al final de este artículo, ya que en esta oportunidad vamos a concentrarnos simplemente en una de las características que más da que hablar: el nuevo motor de render Ivy.

En rigor, Ivy no está activado por defecto en Angular 6 -parece que lo estará en Angular 7- por lo tanto, todo lo que podamos decir debe limitarse a un sistema aún en fase beta. Sin embargo, es posible activarlo en un proyecto nuevo de Angular, mediante la modificación del archivo tsconfig.app.json añadir la siguiente instrucción: "enableIvy": true. De esta forma, al hacer un ng build, lo hará usando el motor Ivy. La pregunta que aparece en los desarrolladores, por lo tanto, es la siguiente: ¿vale la pena?

Hay dos formas de encarar la respuesta, la primera es la más evidente: no merece la pena utilizar nada en fase de desarrollo si lo que se busca es estabilidad en un sistema informático. Ivy aún no es un desarrollo oficial de Angular, no debe ser usado en proyectos que busquen cierta predictibilidad. Pero entonces, ¿qué ocurre si estamos desarrollando algo experimental? ¿O qué pasa si solo queremos saber que tan eficiente es sin necesidad de utilizarlo en un proyecto? Esa es la segunda respuesta y no es fácil responderla sin datos. Para empezar, entender que Ivy aplica con un sistema llamado Tree Shaking lo cual "limpia" el código muerto de nuestra aplicación. Esto incluye desde imports/exports inutilizados hasta funciones que no son llamadas. Por otro lado, el render producido por Ivy es más parecido a un código escrito por una persona y no a un conjunto críptico de grifos, como en versiones pasadas. Esto convence a muchos pero no es tan convincente para otros, después de todo ¿dónde se garantiza que un render legible va a ser más eficiente?

Angular promete que, en las pruebas, lograron un bundle de 3.2Kb, el cual superaba con comodidad los 35Kb en versiones pasadas. No nos engañemos, en la primer estable de Angular 2 los bundles eran insólitamente pesados, hasta que comenzaron a ser más selectivos en sus producciones. La versiones actuales mejoran mucho el rendimiento, pero esa reducción de 35Kb a 3.2Kb es solo para una demo en concreto (y además estaba gzip). No implicado que veremos ese tipo de reducción reflejada en nuestros proyectos. Si nuestro bundle es de 300Kb no se reducirá a 30Kb con Ivy. Del mismo modo, si llamamos una cantidad insana de CSS en nuestros componentes, nuestro bundle va a tender a pesar cada vez más (un buen punto de ataque para futuras versiones es la optimización en CSS).

Pero somos desarrolladores empíricos, ¿qué tenemos para aportar nosotros? Podemos hablar desde lo concreto. Al migrar uno de los sitios webs de nuestros clientes, de Angular 5 a Angular 6 (con Ivy activado), y utilizando las mismas configuraciones de compilación (prod y build-optimizer) nuestro archivo main.js pasó de 571Kb a 334 Kb. Parece ser que si es eficiente, pero necesitamos aclarar que hay otros cambios afectando el rendimiento de la versión 5 a la 6. El más importante es la introducción de RxJS 6 y de TypeScript 2.7, lo que ya de por sí prometía reducir el peso de los bundles en los casos más comunes. Otra razón es la nueva jerarquía de archivos de Angular, más ordenado. Pero ¿qué pasa si compilamos sin Ivy y luego con Ivy y comparamos resultados? En nuestro caso, el peso fue idéntico, pero se debe principalmente a nuestra forma de programar, solemos acostumbrarnos a eliminar código muerto antes de solicitar la compilación. Es una buena práctica, pero no está de más que el motor de render pueda darnos una mano con eso, ante los posibles descuidos.

¿Conclusión? Ivy es el nuevo motor de render de Angular, es lógico que será el más eficiente, pero requiere un tiempo de maduración antes de que pueda ser usado.