Angular {{AOT vs JIT}} împotriva compilatorului React: Partea - I

Să începem comparând Interpreter și Compiler

Un compilator de la X la Y este un program care traduce orice program p dintr-o limbă X într-un program echivalent semantic p ′ într-un limbaj Y în așa fel încât semantica programului să fie păstrată, adică aceea care interpretează p ′ cu un interpret pentru Y va da aceleași rezultate și va avea aceleași efecte ca și interpretarea p cu un interpret pentru X.

Compiler === Traducător

Compilator Vs Interpret

Un interpret pentru limba A este un program care execută orice program p scris în limba X astfel încât să efectueze efectele și să evalueze rezultatele așa cum este prescris de specificația X.

Interceptor === Executor

Compilator în unghi 1

Un compilator generic

Compilator AngularJS 1.x, de natură destul de generică, care funcționează pentru orice șablon efectuând un set de calcule dinamice. Datorită acestei naturi, mașina virtuală JavaScript se luptă cu optimizarea calculului la nivel inferior. Motivul principal care se ascunde este:

„VM nu cunoaște formele obiectelor care oferă context pentru logica verificării murdare (adică așa-numitul domeniu de aplicare), cache-urile inline obțin o mulțime de ratări, ceea ce încetinește execuția”

Compilatoare în Angular 2 ++

JIT

La faza inițială a aplicației Angular 2, când a fost pornit în browser, compilatorul JIT efectuează multă muncă (analizând șabloanele componente de fiecare dată când utilizatorul deschide pagina web, o parte care transformă șabloanele HTML în cod rulant) pentru a analiza componentele în aplicație la runtime și generați cod în memorie. Când pagina este reîmprospătată, toate lucrările făcute sunt aruncate și compilatorul JIT face treaba din nou. Acesta a fost un pas major în retragerea la AOT

Flux de evenimente cu compilare Just-in-Time

  • Dezvoltarea aplicației unghiulare cu TypeScript și compilarea aplicației cu Tsc.
  • Pachet → Minimizare → implementare
  • La client → Descărcați toate activele JavaScript → Instrumente de pornire unghiulare → Angular trece prin procesul de compilare JiT → Aplicația este redată
Prezentare generală a pachetului JIT

AOT

Compilatorul transformă codul TS în cod JS (acest JS a fost deja compilat și pentru unghi). Acum, acest cod JS compilat este compilat din nou de browser pentru a putea fi redat HTML. Astfel, caracteristicile unghiulare au fost deja îngrijite de compilatorul AOT și, prin urmare, browser-ul nu trebuie să vă îngrijoreze prea mult despre detectarea schimbărilor, crearea de componente și injectarea dependenței.

Compilare AOT

Astfel mutăm compilarea din timpul de rulare (browser) la generarea codului sursă. Acest mod de compilare se întâmplă o singură dată la ora de construire și nu mai este nevoie să livrăm compilatorul unghiular și șabloanele HTML în pachet.

În Angular 5+, veți putea să neglijați JiT și să mergeți pe AoT complet, chiar și pentru dezvoltări de dezvoltare !!!

Fluxul de evenimente cu compilarea înainte de timp

  • Dezvoltarea aplicației unghiulare cu TypeScript → Compilarea aplicației cu ngc → Realizează compilarea șabloanelor cu compilatorul unghiular și generează (de obicei) TypeScript
  • Compilarea codului TypeScript la JavaScript → Pachet → Minificare → implementare
  • Client → Descărcați toate activele → Instrumente de pornire unghiulară și randamente de aplicații
Prezentare generală a pachetului AOT

Caracteristici AOT

Redarea mai rapidă, mai puține solicitări asincrone, dimensiunea de descărcare a cadrului unghiular mai mic și detectarea erorilor de șablon mai devreme

Compilator în reacție

JSX acceptă atât Babel, cât și TypeScript încă de la începutul timpului, ceea ce a făcut ca integrarea cu JavaScript să se construiască ușor și să reacționeze nu îi pasă de versiunea utilizată atât de Babel, cât și de TypeScript, ceea ce este mai puțin îngrijorător.

Compilatorul First React evaluează arbori de componente React și realizează o optimizare inteligentă a componentelor React. Reactorul compilator trebuie să cunoască componenta rădăcină a pachetului de aplicații și odată dat fiind faptul că ar trebui să descopere automat întregul arbore de componente din componente.

Pentru a spune compilatorului React care este componenta rădăcină pentru aplicația dvs., trebuie să utilizați o funcție globală Prepack numită __optimizeReactComponentTree (MyRootReactComponent). De exemplu, în registrul dvs. de înregistrare (înainte de a-l împacheta și de a-l transmite la Prepack), puteți face:

// MyComponent.js
import Reactează din „reacționează”;
clasa MyComponent extinde React.Component {
  redă () {
    return  Salut lume! ;
  }
}
// __optimizeReactComponentTree este cunoscut doar de Prepack
// deci îl înfășurăm într-un condițional, astfel încât codul funcționează în continuare
// pentru testarea dezvoltării locale fără Prpeack
if (global .__ optimizeReactComponentTree) {
  __optimizeReactComponentTree (MyComponent);
}
module.exports = MyComponent;

Reactează compilații către codul JavaScript care manipulează DOM virtual, în timp ce Angular compilează codul JavaScript care manipulează direct DOM. Nu există o înțelegere profundă atât a nivelului unghiular, cât și a reacției la nivel de cod. Să explorăm mai multe pe următorul meu blog. :)