Angular {{AOT vs JIT}} vs React compiler: Part - I

Laten we beginnen met het vergelijken van Interpreter en Compiler

Een compiler van X naar Y is een programma dat elk programma p van een taal X vertaalt in een semantisch equivalent programma p ′ in een taal Y op een zodanige manier dat de semantiek van het programma behouden blijft, dat wil zeggen dat het interpreteren van p ′ met een tolk want Y geeft dezelfde resultaten en heeft dezelfde effecten als het interpreteren van p met een interpreter voor X.

Compiler === Vertaler

Compiler versus tolk

Een tolk voor taal A is een programma dat elk programma p dat in taal X is geschreven zodanig uitvoert dat het de effecten uitvoert en de resultaten evalueert zoals voorgeschreven door de specificatie van X.

Interceptor === Beul

Compiler in hoek 1

Een generieke compiler

AngularJS 1.x-compiler die vrij generiek van aard is en voor elke sjabloon werkt door een reeks dynamische berekeningen uit te voeren. Vanwege deze aard worstelt JavaScript Virtual Machine met het optimaliseren van de berekening op het lagere niveau. De belangrijkste reden is:

"VM kent de vormen van de objecten niet die context bieden voor de vuile controlelogica (d.w.z. de zogenaamde scope), het zijn inline caches die veel missers krijgen die de uitvoering vertragen"

Compilers in hoekig 2 ++

JIT

In de beginfase van de Angular 2-toepassing bij het opstarten in de browser, voert de JIT-compiler veel werk uit (het parseren van de deelsjablonen telkens wanneer de gebruiker de webpagina opent, een onderdeel dat HTML-sjablonen omzet in uitvoerbare code) om de componenten te analyseren in de applicatie tijdens runtime en genereer code in het geheugen. Wanneer de pagina wordt vernieuwd, wordt al het werk dat is gedaan weggegooid en doet de JIT-compiler het werk helemaal opnieuw. Dit was een belangrijke tegenvaller voor AOT

Stroom van evenementen met Just-in-Time-compilatie

  • Ontwikkeling van Angular-applicatie met TypeScript en compilatie van de applicatie met Tsc.
  • Bundeling → Minification → Implementatie
  • Bij client → Download alle JavaScript-middelen → Hoekige bootstraps → Hoekig doorloopt het JiT-compilatieproces → Toepassing wordt gerenderd
JIT-bundeloverzicht

AOT

Compiler transformeert TS-code naar JS-code (deze JS is ook al gecompileerd voor hoekig). Nu wordt deze gecompileerde JS-code opnieuw gecompileerd door de browser zodat de HTML kan worden weergegeven. Aldus zijn de functies van hoekig al verzorgd door de AOT-compiler en daarom hoeft de browser zich geen zorgen te maken over veranderingdetectie, het maken van componenten en afhankelijkheidsinjectie.

AOT-compilatie

Zo verplaatsen we de compilatie uit de runtime (browser) naar de broncodegeneratie. Op deze manier gebeurt compilatie slechts eenmaal tijdens de bouwtijd en hoeven we de Angular-compiler en de HTML-sjablonen niet langer in de bundel te verzenden.

In Angular 5+, zul je JiT kunnen verwaarlozen en volledig kunnen werken, zelfs voor builds voor ontwikkeling !!!

Stroom van evenementen met Ahead-of-Time Compilatie

  • Ontwikkeling van Angular-applicatie met TypeScript → Compilatie van de applicatie met ngc → Voert compilatie van de sjablonen uit met de Angular-compiler en genereert (meestal) TypeScript
  • Compilatie van de TypeScript-code naar JavaScript → Bundeling → Minification → Implementatie
  • Client → Download alle middelen → Angular bootstraps en applicatie rendert
AOT-bundeloverzicht

AOT-functies

Snellere rendering, minder asynchrone aanvragen, kleinere downloadgrootte voor hoekig framework en eerder detecteren van sjabloonfouten

Compiler in React

JSX ondersteunt zowel Babel als TypeScript sinds het begin van de tijd, waardoor integratie met de JavaScript-build eenvoudig en reactief is, de versie die door zowel Babel als TypeScript wordt gebruikt, geen zorgen maakt.

First React-compiler evalueert React-componentbomen en zorgt voor een intelligente optimalisatie van uw React-componenten. React compiler moet de rootcomponent van de applicatiebundel kennen en eenmaal gegeven dat deze automatisch de volledige componentenboom van componenten zou moeten uitzoeken.

Om de React-compiler te vertellen wat de rootcomponent voor uw toepassing is, moet u de algemene functie Prepack gebruiken met de naam __optimizeReactComponentTree (MyRootReactComponent). Bijvoorbeeld in uw sourecode (voordat u deze bundelt en aan Prepack doorgeeft) kunt u het volgende doen:

// MyComponent.js
importeren Reageren van 'reageren';
class MyComponent verlengt React.Component {
  render () {
    terug  Hallo wereld! ;
  }
}
// __optimizeReactComponentTree is alleen bekend bij Prepack
// dus we verpakken het voorwaardelijk zodat de code nog steeds werkt
// voor testen van lokale ontwikkeling zonder Prpeack
if (globaal .__ optimalReactComponentTree) {
  __optimizeReactComponentTree (MyComponent);
}
module.exports = MyComponent;

React compileert naar JavaScript-code die de virtuele DOM manipuleert, terwijl Angular compileert naar JavaScript-code die de DOM rechtstreeks manipuleert. Er is niet veel diep begrip van zowel hoekig als reageren op codeniveau. Laten we meer ontdekken op mijn volgende blog. :)