Menu

Angular Ivy

architectureangular - February 04, 2019 por Carlos Rojas

Una de las ventajas de utilizar un framework como Angular es no tener que lidiar con la actualizacion de estados en el DOM de la vista, esto es conocido en Angular como el renderer. Probablemente en Angular 8 este nuevo sistema de rendereer llamado por ahora Angular Ivy sea liberado pero en este post vamos a tratar de entender un poco sus ventajas.

¿ Que es Angular Ivy ?

Angular Ivy es el nuevo rendeer de Angular el cual ha sido socializado en eventos y en Post por el equipo de Angular puedes ver su avance aqui.

¿ Que novedad trae Angular Ivy ?

Angular Ivy viene con un concepto para actualizar el DOM que se llama incremental DOM el cual difiere de su alternativa principal Virtual DOM en un bajo memory footprint y logra el Tree shakable.

¿ Como trabaja el Virtual DOM ?

Cada componente crea un nuevo Virtual DOM tree cada vez que este es renderizado. El javascript que lo utiliza compara el nuevo arbol con el viejo y aplica una nueva serie de transformaciones a el DOM del navegador para asemejarse al nuevo Virtual DOM tree.

La principal ventaja de este acercamiento es que podemos realizar la funcionalidad de render con Javascript.

¿ Como trabaja el Incremental DOM ?

Cada componente es compilado en una serie de instrucciones. Estas instrucciones crean árboles DOM y los actualizan in situ cuando cambian los datos.

Este acercamiento logra principalmente dos cosas: un bundle size mas pequeño y una huella de memoria mas pequeña.

¿ Como logra incremental DOM el Tree shakable?

Cuando se usa incremental DOM, el framework no interpreta el componente. en su lugar, el componente referencia instrucciones. Este no referencia una instruccion particular, esta nunca sera usada. y si agregamos que esto se hace en tiempo de compilacion, podemos omitir instrucciones sin usar del bundle.

¿ Por que Incremental DOM tiene una huella de memoria baja ?

Virtual DOM crea un arbol completo desde el comienzo cada vez que tu renderizas de nuevo.

Incremental DOM por otro lado, no necesita mas memoria para renderizar de nuevo la vista si este no cambia el DOM. Solo tenemos que asignar la memoria cuando los nodos del DOM son agregados o removidos. Y el tamaño de la asignacion es proporcional al tamaño del cambio en el DOM.

Desde que la mayoria de los llamados de render/template no cambia nada (o cambia muy poco), esto puede resultar en un gran ahorro de memoria.

Bueno esto es un poco lo que se viene para la nueva versión de Angular, si queres leer mas puedes leer el post que sirvio de base aqui. Espero sea de utilidad y hasta un proximo Post :)

¡Compártelo!