Różnica między JiT a AoT w Angularze

Opis różnicy między różnymi typami kompilacji w Angularze.

Opis problemu

Czytając dokumentację Angulara można natknąć się na koncepcję kompilacji. W przypadku Angulara można użyć kompilacji za pomocą JIT lub AOT. Jednak w dokumentacji rozpisano oba te pojęcia w skróconej formie. Jakie więc są różnice pomiędzy kompilacją IOT a JIT? I kiedy należy używać wybranej metody kompilacji?

Rozwiązanie problemu

Jeżeli byśmy chcieli zamknąć to w kilku punktach, wystarczyłoby napisać, że:

  1. JIT - Kompiluj TypeScript w trybie just it time
    1. Kod jest kompilowany w przeglądarce
    2. Każdy plik jest kompilowany osobno
    3. Trzeba przebudować bazę kodupo jego zmianie i ponownym załadowaniu strony w przeglądarce.
    4. JIT idealnie nadaje się do rozwoju lokalnego.
  2. AOT - Kompiluj TypeScript podczas budowania.
    1. Kod jest kompilowany przez maszynę za pomocą wiersza poleceń, a więc jest szybszy.
    2. Cały kod jest kompilowany razem, wraz z wbudowanymi elementami HTML i CSS.
    3. Nie ma potrzeby wdrażania kompilatora, co zdecydowanie zmniejsza rozmiar o połowę.
    4. Kod jest kompilowany w sposób bezpieczniejszy i jego oryginalne źródło nie zostanie ujawnione.
    5. Ten tryb nadaje się do kompilacji produkcyjnych.

Dodatkowo przypatrzmy się samej konwersji TypeScript do JavaScript. Zobaczmy jak to działa.

JIT - just-it-time

Kod TypeScript, który został napisany przez programistę, jest kompilowany do kodu JavaScript. Teraz ten kod JavaScript jest ponownie kompilowany przez przeglądarkę, aby elementy HTML mogły być renderowane dynamicznie i zgodnie z działaniem użytkownika. Jednocześnie kod komponentów, wykrywania zmian, wstrzykiwania zależności, itp., jest także generowany w czasie wykonywania.

W przypadku kompilacji za pomocą JIT, kompilator przeglądarki zajmuje się komponentami aplikacji wraz z odpowiadającym im kodem HTML i CSS, oraz tworzy fabryki komponentów, które może szybko usuwać wraz z całą logiką tworzenia widoków. W czasie gdy uruchamiamy aplikację w Angularze, kompilator JIT wykonuje bardzo dużo pracy, aby przeanalizować komponenty aplikacji w czasie wykonywania i wygenerować kod w pamięci. Po wygenerowaniu strony cała praca, jaka została wykonana jest odrzucana, a kompilator JIT wykonuje swoją pracę od nowa.

Kompilacja AOT

W przypadku tego typu kompilacji kod napisany przez programistę jest kompilowany do kodu JavaScript, a następnie kod JavaScript zostaje ponownie skompilowany. Na samym końcu kod JavaScript jest ponownie kompilowany przez przeglądarkę, aby można było renderować HTML. Cały haczyk polega na tym, że kompilator AOT zajął się już kompilacją większości komponentów, dlatgo przeglądarka nie musi się tym martwić, ani takimi prozaicznymi rzeczami jak kompilacja zależności, czy wykrywaniem zależności. Dlatego AOT umożliwia nam:

Szybsze renderowanie

Za pomocą AOT przeglądarka pobiera wstępnie skompilowaną wersję aplikacji. Przeglądarka ładuje tak naprawdę kod wykonywalny, dzięki czemu może natychmiast renderować aplikację, bez oczekiwania na kompilację.

Zmniejszenie ilości asynchronicznych żądań

Kompilator buduje zewnętrzne szablony HTML i arkusze CSS w kodzie JavaScript aplikacji, dzięki czemu eliminuje oddzielne żądania ajaxowe dla plików źródłowych.

Mniejszy rozmiar bazy kodu

W tym przypadku nie ma już potrzeby pobierania kompilatora Angulara, ponieważ aplikacja jest już skompilowana. Kompilator stanowi mniej więcej połowę samego frameworka, a więc jego pominięcie znacznie zmniejsza wielkość aplikacji.

Wczesne wykrywanie błędów w szablonach

Kompilator AOT wykrywa i raportuje błędy związane z szablonami podczas etapu kompilacji, a więc zmniejsza prawdopodobieństwo, że użytkownicy będą mogli je zobaczyć.

Lepsze bezpieczeństwo

AOT polega na kompilacji szablonów i komponentów w pliki JavaScript na długo przed ich dostarczeniem do klienta. Bez szablonów i kodu, który można przeczytać, istnieje mniejsze prawdopodobieństwo ataków typu code injection.