Bienvenido, soy Luis y en esta ocasión les traigo un nuevo artículo.
Angular es uno de los marcos de aplicaciones web de código abierto más conocidos. Cada año, Google le agrega ciertas características nuevas y avanzadas.
Con Angular 9, varias características nuevas entraron en escena. De estos, Ivy Renderer se destacó como una de las características clave.
En este blog, examinaremos el nuevo renderizador de Ivy y qué lo convierte en una de las características clave de la última actualización.
Índice
¿Qué es Ivy?
Ivy es el nombre en código de la canalización de compilación y renderizado de Angular. Las aplicaciones desarrolladas en Angular 9 están compiladas por Ivy por defecto.
Estas aplicaciones se compilan Ahead of Time (AOT), es decir, antes de que el navegador las descargue y las ejecute, lo que hace que la aplicación sea más rápida y eficiente.
Antes de Ivy, View Engine era el compilador predeterminado en Angular. Ivy usa la técnica de compilación Ahead Of Time en lugar de Just In Time (JIT) que se usó en las versiones anteriores de Angular.
En la tubería del motor Ivy más reciente, si se vuelve a compilar el mismo componente, no se necesitará nada más para volver a compilarlo. Esta técnica pone fin al problema de la recompilación global.
¿Qué es la compilación Ahead of Time o AOT?
El compilador Ahead of Time de Angular convierte el código HTML y TypeScript de Angular en un código JavaScript eficiente durante el tiempo de compilación, es decir, antes de que el navegador lo descargue y lo muestre.
La compilación de plantillas angulares durante el tiempo de compilación facilita una representación más rápida en el navegador, ya que el navegador descarga la versión precompilada de la plantilla.
El compilador angular toma la sintaxis angular declarativa y la convierte en un código imperativo.
Beneficios de AOT
- El código ejecutable se carga directamente sin necesidad de compilarlo primero, lo que ayuda en la carga instantánea de la aplicación en el navegador.
- Integra todo el HTML y CSS externo dentro de las aplicaciones. JavaScript elimina las solicitudes AJAX discretas para todos estos archivos fuente.
- Ayuda a encontrar los errores de la plantilla durante el proceso de compilación.
- Ayuda a reducir el riesgo de ataques por inyección.
- Reduce la carga del paquete de Angular Framework.
El tipo de compilación, es decir, JIT o AOT, depende del valor de AOT establecido en las opciones de compilación en el archivo angular.json. Se establece como verdadero de forma predeterminada para las aplicaciones Angular 9 y superiores.
3 fases de AOT
1. Análisis de código
En esta fase, el recopilador AOT analiza los metadatos y luego los representa de la mejor manera posible. Toda la información analizada se registra en el archivo .metadata.json. Cualquier error encontrado en la sintaxis de metadatos se registra y se lanza un error al archivo .metadata.json.
2. Generación de código
En esta fase, los metadatos recopilados de la fase de análisis de código serán interpretados por el StaticReflector del compilador .
Durante esta fase, se vuelve a realizar una comprobación de los metadatos. Si se encuentran violaciones en la sintaxis de metadatos, se produce un error.
3. Comprobación del tipo de plantilla
En esta fase, el compilador de plantillas Angular usa el compilador de mecanografiado para verificar la validación de las expresiones vinculantes en las plantillas.
Para que suceda esta fase, "fullTemplateTypeCheck" se establece en verdadero en "angularCompilerOptions" en tsconfig.base.json:
{“ angularCompilerOptions” : { “fullTemplateTypeCheck” : true; }
¿Por qué se actualizó Angular?
- Tiempos de construcción reducidos.
Al compilar los componentes a través del antiguo View Engine, se generan dos archivos:
- Archivo
Component.js: contiene el código mecanografiado compilado. - Archivo
ngFactory.js: contiene la representación estática del código presente en el componente.
En la compilación de los componentes por Ivy, solo se genera el archivo component.js.
El archivo ngFactory.js se ha eliminado y su funcionalidad se maneja dentro del archivo component.js generado individualmente , sin necesidad adicional de generar el archivo ngFactory.js. Esto ahorra muchas compilaciones.
En View Engine, la generación del archivo ngFactory.js llevó mucho tiempo. Esto redujo la eficiencia del tiempo de construcción de la aplicación.
- Tamaño de paquete más pequeño.
Uno de los recursos más grandes de una aplicación es su archivo JavaScript porque no solo tiene que ser descargado, sino que también se le agregan grandes costos de análisis y ejecución.
El tamaño del paquete que se generaba era grande, lo que generaba malas experiencias de usuario en redes más lentas.
Con Ivy, el tamaño de paquete generado de la plantilla se redujo a solo 1/3 o 1/4 en comparación con antes.
3 beneficios clave de usar Ivy
1. Tree Shakable
Pague solo por el código Angular que se está utilizando en tiempo real.
Los pasos de optimización de compilación aseguran que el código no utilizado no termine en el envío final al navegador.
>> En la antigua canalización de View Engine
<div class = “heading”>Hello Reader</div>
Suponga que tiene el código HTML anterior en su archivo component.html.
La plantilla HTML es el código que tiene en el archivo component.html.
Cuando se pasa a través del compilador angular, analizará la plantilla y generará JavaScript altamente optimizado que representará la estructura de la plantilla.
El código generado se vería así:
viewDef( 0, [elementDef( 0, 0, null, null, 1, ‘div’, [[ ‘class’, ‘heading’]]…),textDef( -1, null, [‘Hello Reader]…),]);
El código generado tendrá un elementDef que contiene una estructura de datos basada en elementos y un textDef que contiene otra estructura de datos basada en el nodo de texto.
En tiempo de ejecución, este código analizado se pasa al intérprete angular. El intérprete angular decide qué operación necesita ejecutar para generar el DOM correcto, que luego se muestra en la pantalla.
>> En el nuevo oleoducto Ivy
En lugar de analizar la plantilla y crear la estructura de datos y luego pasar la estructura a un intérprete que necesita la información de cómo hacer todo y cada uno, Ivy presentó una técnica para generar instrucciones. directamente.
Se puede considerar como una matriz de instrucciones debido a que el paso de interpretación ahora se omite (este paso contenía todas las verificaciones condicionales).
En Ivy, el código generado se verá así:
elementStart( 0 , ‘div’ [ ‘class’ , ‘heading’ ]);text( 1, ‘Hello Reader);elementEnd();
Tenga en cuenta que elementStart crea el div mientras que el texto crea el texto escrito en el div.
En Ivy, si está utilizando ciertas características como tuberías o contenedores, ese código no se generaría a partir de la plantilla que se proporciona en el compilador, por lo que no habría referencias.
Si no hay referencias, las herramientas de agitación de árboles eliminarían fácilmente ese código del paquete.
>> Ivy puede sacudir el árbol
- Inyección de dependencia
- Proyección de contenido
- Consultas de vista y contenido
- Animaciones
- Tubería
- i18n
- Servicios de Core Framework
- Ganchos de ciclo de vida
2. Local efectos
Ivy es local en sus efectos, es decir, cuando compila sus aplicaciones, solo compila los componentes que realmente está cambiando.
Por ejemplo, antes, cuando usamos el comando ng build, toda la aplicación se volvería a compilar. En el View Engine más antiguo, esto significaba volver a compilar un subconjunto mucho más grande de la aplicación, lo que llevó mucho tiempo.
'* ngIf'.En el contexto del motor de visualización anterior, esto significaba que cualquier cambio realizado en cualquiera de las dependencias de la directiva '* ngIf' provocaría que todos los componentes que contienen esta directiva * ngIf se recompilen.
Para superar este problema, Ivy introdujo el principio de localidad, es decir, la compilación de un solo archivo, ya que los componentes que contienen la directiva '* ngIf' no necesitan conocer sus dependencias.
Por lo tanto, en la tubería más reciente del motor Ivy, si se vuelve a compilar el mismo componente, no se necesitará nada más para volver a compilarlo. Esta técnica pone fin al problema de la recompilación global.
Ivy llamará directamente al constructor de la directiva '* ngIf', que conoce sus dependencias exactas. Esta nueva estructura facilita tiempos de reconstrucción más rápidos en aplicaciones Angular.
3. Ivy es compatible con versiones anteriores
Las compilaciones angulares con Ivy también son más rápidas debido a que su nuevo compilador Ahead of Time (AOT) es predeterminado.
Puedes comprobar esto en el angular.json archivo en una aplicación Angular 9. En sus opciones de compilación, debe tener 'aot' establecido en verdadero.
ngcc es decir, compilador de compatibilidad angular.En este caso, tendrá que ejecutar ngcc después de la instalación de cada paquete de terceros. Para realizar este paso automáticamente, agregue "postinstall": "ngcc" en el archivo angular.json bajo los scripts de la siguiente manera:
{“scripts” : {“postinstall” : “ngcc”
}
}
Aquí hay un resumen rápido que explica por qué Ivy es tan ventajosa:
- Fácil de depurar.
- Compilación más rápida.
- Bibliotecas más fáciles de enviar.
- Ejecución de prueba más rápida.
- Carga de componentes dinámicos más sencilla.
- Mejor experiencia en dispositivos móviles con conexiones más lentas.
¡Espero que este blog te haya dado información útil sobre Angular Ivy Renderer y AOT!
Feliz codificación.
Añadir comentario