Compilatore angolare {{AOT vs JIT}} vs React: Parte - I

Cominciamo confrontando l'interprete e il compilatore

Un compilatore da X a Y è un programma che traduce qualsiasi programma p da una lingua X in un programma semanticamente equivalente p ′ in una lingua Y in modo tale da preservare la semantica del programma, ovvero interpretare p ′ con un interprete perché Y produrrà gli stessi risultati e avrà gli stessi effetti dell'interpretazione di p con un interprete per X.

Compilatore === Traduttore

Compilatore Vs Interprete

Un interprete per la lingua A è un programma che esegue qualsiasi programma p scritto nella lingua X in modo tale da eseguire gli effetti e valutare i risultati come prescritto dalla specifica di X.

Interceptor === Boia

Compilatore in Angolare 1

Un compilatore generico

Compilatore AngularJS 1.x di natura abbastanza generica che funziona con qualsiasi modello eseguendo una serie di calcoli dinamici. Per questa ragione JavaScript Virtual Machine fatica ad ottimizzare il calcolo a livello inferiore. Il motivo principale dietro è:

`La VM non conosce le forme degli oggetti che forniscono il contesto per la logica del controllo sporco (ovvero il cosiddetto ambito), le cache in linea ottengono molti errori che rallentano l'esecuzione`

Compilatori in Angular 2 ++

JIT

Nella fase iniziale dell'applicazione Angular 2, quando avviato nel browser, il compilatore JIT esegue molto lavoro (analizzando i modelli dei componenti ogni volta che l'utente apre la pagina Web, una parte che trasforma i modelli HTML in codice eseguibile) per analizzare i componenti nell'applicazione in fase di esecuzione e generare codice in memoria. Quando la pagina viene aggiornata, tutto il lavoro svolto viene eliminato e il compilatore JIT esegue nuovamente il lavoro. Questa è stata una grave battuta d'arresto in AOT

Flusso di eventi con la compilazione Just-in-Time

  • Sviluppo di un'applicazione angolare con TypeScript e compilazione dell'applicazione con Tsc.
  • Raggruppamento → Minificazione → Distribuzione
  • Al client → Scarica tutte le risorse JavaScript → Bootstrap angolari → Angular esegue il processo di compilazione JiT → L'applicazione viene visualizzata
Panoramica del pacchetto JIT

AOT

Il compilatore trasforma il codice TS in codice JS (questo JS è già stato compilato anche per angolare). Ora, questo codice JS compilato viene nuovamente compilato dal browser in modo da poter eseguire il rendering dell'HTML. Pertanto, le funzionalità angolari sono già state curate dal compilatore AOT e quindi il browser non deve preoccuparsi molto del rilevamento delle modifiche, della creazione dei componenti e dell'iniezione delle dipendenze.

Compilazione AOT

Quindi spostiamo la compilation dal tempo di esecuzione (browser) alla generazione del codice sorgente. In questo modo la compilazione avviene una sola volta al momento della creazione e non è più necessario spedire il compilatore angolare e i modelli HTML nel pacchetto.

In Angular 5+, sarai in grado di trascurare JiT e andare fino in fondo, anche per build di sviluppo !!!

Flusso di eventi con Compilazione anticipata

  • Sviluppo di applicazioni angolari con TypeScript → Compilazione dell'applicazione con ngc → Esegue la compilazione dei modelli con il compilatore angolare e genera (di solito) TypeScript
  • Compilazione del codice TypeScript in JavaScript → Raggruppamento → Minificazione → Distribuzione
  • Client → Scarica tutte le risorse → Bootstrap angolari e rendering dell'applicazione
Panoramica del pacchetto AOT

AOT Features

Rendering più veloce, Meno richieste asincrone, Dimensione del download del framework angolare più piccolo e Rileva gli errori del modello in precedenza

Compilatore in React

JSX supporta sia Babel che TypeScript sin dall'inizio dei tempi, il che ha reso semplice l'integrazione con JavaScript e la reazione non si preoccupa della versione utilizzata da Babel e TypeScript, il che è meno preoccupante.

Il compilatore First React valuta gli alberi dei componenti di React e esegue ottimizzazioni intelligenti per i componenti di React. Il compilatore React deve conoscere il componente radice del bundle dell'applicazione e una volta dato che dovrebbe automaticamente capire l'intero albero dei componenti da quello.

Per comunicare al compilatore React qual è il componente principale dell'applicazione, è necessario utilizzare una funzione globale Prepack chiamata __optimizeReactComponentTree (MyRootReactComponent). Ad esempio nel tuo codice sorgente (prima di raggrupparlo e passarlo a Prepack) potresti fare:

// MyComponent.js
import React da 'reagire';
la classe MyComponent estende React.Component {
  render () {
    return  Ciao mondo! ;
  }
}
// __optimizeReactComponentTree è noto solo per il preconfezionamento
// quindi lo racchiudiamo in un condizionale, quindi il codice funziona ancora
// per i test di sviluppo locale senza Prpeack
if (global .__ optimeceactComponentTree) {
  __optimizeReactComponentTree (MyComponent);
}
module.exports = MyComponent;

React si compila in codice JavaScript che manipola il DOM virtuale mentre Angular si compila in codice JavaScript che manipola il DOM direttamente. Esploriamo di più sul mio prossimo blog. :)