Compilador angular {{AOT vs JIT}} vs React: Parte - I

Comencemos comparando intérprete y compilador

Un compilador de X a Y es un programa que traduce cualquier programa p de algún lenguaje X a un programa semánticamente equivalente p 'en algún lenguaje Y de tal manera que se conserve la semántica del programa, es decir, que interprete p' con un intérprete para Y producirá los mismos resultados y tendrá los mismos efectos que interpretar p con un intérprete para X.

Compilador === Traductor

Compilador Vs. Intérprete

Un intérprete para el lenguaje A es un programa que ejecuta cualquier programa p escrito en el lenguaje X de tal manera que realiza los efectos y evalúa los resultados según lo prescrito por la especificación de X.

Interceptor === Verdugo

Compilador en Angular 1

Un compilador genérico

El compilador AngularJS 1.x es bastante genérico por naturaleza y funciona para cualquier plantilla al realizar un conjunto de cálculos dinámicos. Debido a esta naturaleza, la Máquina virtual de JavaScript tiene dificultades para optimizar el cálculo en el nivel inferior. La razón principal detrás es:

`VM no conoce las formas de los objetos que proporcionan contexto para la lógica de verificación sucia (es decir, el llamado alcance), es que los cachés en línea reciben muchos errores que ralentizan la ejecución '

Compiladores en Angular 2 ++

JIT

En la fase inicial de la aplicación Angular 2 cuando se inicia en el navegador, el compilador JIT realiza mucho trabajo (analizando las plantillas de componentes cada vez que el usuario abre la página web, una parte que transforma las plantillas HTML en código ejecutable) para analizar los componentes en la aplicación en tiempo de ejecución y generar código en la memoria. Cuando se actualiza la página, todo el trabajo realizado se descarta y el compilador JIT vuelve a hacer el trabajo. Este fue un importante revés para AOT

Flujo de eventos con compilación Just-in-Time

  • Desarrollo de aplicación angular con TypeScript y compilación de la aplicación con Tsc.
  • Agrupación → Minificación → Implementación
  • En el cliente → Descargue todos los activos de JavaScript → Bootstraps angulares → Angular pasa por el proceso de compilación JiT → La aplicación se procesa
Descripción general del paquete JIT

Mucho

El compilador transforma el código TS en código JS (este JS ya ha sido compilado para angular también). Ahora, este código JS compilado es compilado nuevamente por el navegador nuevamente para que el HTML pueda ser renderizado. Por lo tanto, las características de angular ya han sido atendidas por el compilador AOT y, por lo tanto, el navegador no tiene que preocuparse mucho por la detección de cambios, la creación de componentes y la inyección de dependencias.

Compilación AOT

Por lo tanto, trasladamos la compilación fuera del tiempo de ejecución (navegador) a la generación del código fuente. De esta forma, la compilación se realiza solo una vez en el momento de la compilación y ya no necesitamos enviar el compilador Angular y las plantillas HTML al paquete.

En Angular 5+, podrás descuidar JiT e ir a AoT completo, incluso para las versiones de desarrollo.

Flujo de eventos con compilación anticipada

  • Desarrollo de la aplicación Angular con TypeScript → Compilación de la aplicación con ngc → Realiza la compilación de las plantillas con el compilador Angular y genera (generalmente) TypeScript
  • Compilación del código TypeScript en JavaScript → Agrupación → Minificación → Implementación
  • Cliente → Descargar todos los activos → Bootstraps angulares y renderizaciones de aplicaciones
Descripción general del paquete AOT

AOT Características

Representación más rápida, menos solicitudes asincrónicas, tamaño de descarga de marco angular más pequeño y detección de errores de plantilla antes

Compilador en React

JSX es compatible tanto con Babel como con TypeScript desde el principio de los tiempos, lo que hizo que la integración con la compilación de JavaScript sea fácil y reaccione. No le importa la versión utilizada por Babel y TypeScript, lo que es menos preocupante.

El compilador First React evalúa los árboles de componentes React y realiza optimizaciones inteligentes para sus componentes React. El compilador React debe conocer el componente raíz del paquete de la aplicación y una vez que se haya dado cuenta de eso, debería descubrir automáticamente todo el árbol de componentes.

Para decirle al compilador React cuál es el componente raíz de su aplicación, debe usar una función global de Prepack llamada __optimizeReactComponentTree (MyRootReactComponent). Por ejemplo, en su sourecode (antes de agruparlo y pasarlo a Prepack) puede hacer:

// MyComponent.js
importar Reaccionar desde 'reaccionar';
clase MyComponent extiende React.Component {
  render () {
    return  ¡Hola, mundo! ;
  }
}
// __optimizeReactComponentTree solo es conocido por Prepack
// entonces lo envolvemos en un condicional para que el código aún funcione
// para pruebas de desarrollo local sin Prpeack
if (global .__ optimizarReactComponentTree) {
  __optimizeReactComponentTree (MyComponent);
}
module.exports = MyComponent;

Reacciona las compilaciones al código JavaScript que manipula el DOM virtual, mientras que Angular compila al código JavaScript que manipula el DOM directamente. No hay una comprensión profunda tanto de angular como de reacción a nivel de código. Vamos a explorar más en mi próximo blog. :)