1
00:00:00,300 --> 00:00:06,450
In this lecture, we're going to talk about the compilation strategy and their uses to compile our app.

2
00:00:06,780 --> 00:00:11,490
We've talked about how we need to load anglers code in the main entry file.

3
00:00:11,730 --> 00:00:13,590
It's the first step we must take.

4
00:00:13,890 --> 00:00:15,570
But what exactly are we loading?

5
00:00:15,810 --> 00:00:18,180
Why do we need to load angular first?

6
00:00:18,660 --> 00:00:20,090
Do you answer this question?

7
00:00:20,100 --> 00:00:25,500
We need to talk about compilation compilation is common in every programming language.

8
00:00:25,770 --> 00:00:30,390
It's the process of transforming human readable code into machine code.

9
00:00:30,780 --> 00:00:32,220
This is not always true.

10
00:00:32,549 --> 00:00:36,320
For example, TypeScript is compiled into JavaScript.

11
00:00:36,660 --> 00:00:44,220
Both languages are human readable compilation as a very broad term for transforming code from one language

12
00:00:44,220 --> 00:00:44,940
to another.

13
00:00:45,540 --> 00:00:47,700
So why am I bringing up compilation?

14
00:00:47,970 --> 00:00:51,990
Browsers do not understand the inner mechanics of an angular app.

15
00:00:52,380 --> 00:00:56,070
There are features in angular not understood by the browser.

16
00:00:56,460 --> 00:00:58,650
These features need to be compiled.

17
00:00:58,980 --> 00:01:02,220
A new problem arises with this step in the process.

18
00:01:02,490 --> 00:01:04,170
When do we compile our code?

19
00:01:04,470 --> 00:01:06,270
That's a very important question.

20
00:01:06,570 --> 00:01:09,030
It can impact the performance of an app.

21
00:01:09,780 --> 00:01:16,920
Angular provides two compilation strategies called Just in Time Compilation and Ahead of Time compilation.

22
00:01:17,370 --> 00:01:22,080
Both strategies will compile our code from TypeScript to JavaScript.

23
00:01:22,470 --> 00:01:24,990
It's not a difference of what, but when.

24
00:01:25,410 --> 00:01:28,620
Let's dive into just in time compilation first.

25
00:01:29,160 --> 00:01:32,520
This strategy will compile our code in the browser.

26
00:01:32,820 --> 00:01:37,410
The browser will compile our code when the files are downloaded in the browser.

27
00:01:37,680 --> 00:01:39,540
Let's look at how this works.

28
00:01:39,960 --> 00:01:43,440
First, the server will compile our TypeScript code.

29
00:01:43,800 --> 00:01:49,410
This process happens regardless if we're using just in time or ahead of time compilation.

30
00:01:49,920 --> 00:01:53,730
Once that's finished, the browser will download our code.

31
00:01:54,030 --> 00:01:56,850
This includes the compiler, which is very big.

32
00:01:57,210 --> 00:01:59,790
There's a lot of code that needs to be processed.

33
00:02:00,030 --> 00:02:05,130
The browser doesn't understand features like templates, services and modules.

34
00:02:05,550 --> 00:02:08,820
These are features we will be exploring in a future lecture.

35
00:02:09,150 --> 00:02:13,770
Angular needs to take the time to help the browser understand these features.

36
00:02:14,340 --> 00:02:19,410
After compilation is complete, the browser will finally be able to run our app.

37
00:02:19,740 --> 00:02:21,510
It's a complicated process.

38
00:02:21,840 --> 00:02:24,600
We don't need to understand how it works underneath.

39
00:02:24,870 --> 00:02:27,930
Having a high level overview will suffice.

40
00:02:28,470 --> 00:02:32,730
Let's look at the next strategy, which is ahead of time compilation.

41
00:02:33,060 --> 00:02:36,390
This strategy will compile our code on the server.

42
00:02:36,720 --> 00:02:40,560
This process has been moved from the browser to the server.

43
00:02:40,950 --> 00:02:43,830
All the browser needs to do is download the code.

44
00:02:44,160 --> 00:02:46,200
Here's an overview of what happens.

45
00:02:46,710 --> 00:02:53,220
The ceiling line will compile our TypeScript code into JavaScript after it's finished compiling our

46
00:02:53,220 --> 00:02:54,510
TypeScript code.

47
00:02:54,750 --> 00:02:59,130
It'll move on to compiling the templates, services and modules.

48
00:02:59,700 --> 00:03:03,990
After the compilation is complete, the browser will download the app.

49
00:03:04,300 --> 00:03:06,690
It'll be able to run the app immediately.

50
00:03:06,990 --> 00:03:09,840
The compiler doesn't get downloaded, either.

51
00:03:11,980 --> 00:03:16,210
Both strategies are available in Angular, which should we use?

52
00:03:16,420 --> 00:03:18,490
Let's compare them side by side.

53
00:03:19,150 --> 00:03:23,410
The file size difference between both strategies is significant.

54
00:03:23,680 --> 00:03:27,370
With just in time compilation, the file size is large.

55
00:03:27,670 --> 00:03:30,850
It's because the app needs to be shipped with the compiler.

56
00:03:31,120 --> 00:03:33,820
It's almost half the size of the app itself.

57
00:03:34,150 --> 00:03:40,390
In comparison, the browser doesn't need to download the compiler with ahead of time compilation.

58
00:03:41,020 --> 00:03:43,270
This difference impacts performance.

59
00:03:43,600 --> 00:03:48,920
Not only does the browser need to download the compiler, but it has to run the compiler.

60
00:03:49,150 --> 00:03:52,750
Otherwise, our app won't work, on the other hand.

61
00:03:52,930 --> 00:03:58,270
The app can run in the browser with aoat compilation after it's finished downloading.

62
00:03:58,450 --> 00:03:59,470
It's much easier.

63
00:03:59,980 --> 00:04:03,010
Lastly, errors appear at different times.

64
00:04:03,190 --> 00:04:08,290
We won't spot an error until the app is running in the browser with Git compilation.

65
00:04:08,650 --> 00:04:12,070
A02 compilation will show the error in the command line.

66
00:04:12,640 --> 00:04:16,390
As you can probably tell, there is one superior strategy.

67
00:04:16,690 --> 00:04:20,470
In most cases, we will want to use Aoki compilation.

68
00:04:20,800 --> 00:04:24,310
So why does Angular include Git compilation?

69
00:04:24,640 --> 00:04:28,150
EOG compilation is relatively new in the beginning.

70
00:04:28,270 --> 00:04:33,700
Git was the only option we had somewhere around angular nine.

71
00:04:33,730 --> 00:04:36,860
The team introduced the Aot compiler.

72
00:04:37,180 --> 00:04:42,160
It slowly became the default compiler for production and development builds.

73
00:04:42,550 --> 00:04:47,980
Digit compiler is kept around for those who are still running on the old compiler.

74
00:04:48,310 --> 00:04:54,340
However, it's recommended we always use AOG compilation for the rest of this course.

75
00:04:54,520 --> 00:04:57,290
We're going to be using AOC compilation.

76
00:04:57,580 --> 00:05:00,940
Let's start applying this knowledge in the next lecture.