1
00:00:02,120 --> 00:00:06,550
So that's the Javascript module import export syntax.

2
00:00:06,560 --> 00:00:10,670
Now if we have a look at our project, we can see something interesting

3
00:00:10,670 --> 00:00:18,100
if we go to the network tab. If I open that and we have a look at the HttpRequests here, if I reload this

4
00:00:18,100 --> 00:00:23,920
page, you see we got a bunch of requests here because we're using a bunch of files and they are getting

5
00:00:23,920 --> 00:00:25,600
imported when our app starts

6
00:00:25,600 --> 00:00:26,930
because what happens?

7
00:00:26,950 --> 00:00:33,040
Well the HTML file gets loaded and there, we request the app.css file and the app.js file. Therefore

8
00:00:33,040 --> 00:00:36,220
logically first, the HTML file is loaded,

9
00:00:36,220 --> 00:00:38,650
that's basically what's hidden under localhost here,

10
00:00:38,770 --> 00:00:46,180
then the CSS file, then the Javascript file. In the app.js file, we refer to project list,

11
00:00:46,220 --> 00:00:51,970
therefore it makes sense that the next item in the list here is project list which is getting imported

12
00:00:52,750 --> 00:00:53,530
and so on,

13
00:00:53,560 --> 00:00:59,230
so this is how all these things are getting imported. Now obviously we're sending a lot of HttpRequests

14
00:00:59,230 --> 00:01:04,570
here and for a small project like this, this is no problem, for a large project,

15
00:01:04,570 --> 00:01:10,600
this is not that great because even though the files are all small, sending a request, getting the response

16
00:01:10,600 --> 00:01:16,660
and parsing the response always has a bit of that's time which is always there, which you can't get rid

17
00:01:16,660 --> 00:01:22,420
of, network latency, the browser getting started, it's time which you can't get rid of.

18
00:01:22,450 --> 00:01:29,530
So the more requests you send, the more of that time you accumulate and therefore having hundreds

19
00:01:29,620 --> 00:01:35,740
of modules would not be a great idea because you would import hundreds of files and you would send hundreds

20
00:01:35,770 --> 00:01:37,540
of HttpRequests.

21
00:01:37,540 --> 00:01:42,670
This is a problem we'll get rid of in the next course module and in the next course section when we

22
00:01:42,670 --> 00:01:50,020
have a look at tooling and in a concept called bundling. One other improvement which we could add here

23
00:01:50,260 --> 00:01:53,830
is also that some features are not always needed,

24
00:01:53,830 --> 00:02:00,250
for example the tooltip. The tooltip here, this Javascript file is loaded because we might eventually

25
00:02:00,250 --> 00:02:05,290
show a tooltip but unless we click this button, we don't really need the file and

26
00:02:05,350 --> 00:02:11,440
of course it's a small file but in bigger applications where you have more logic in your files, that

27
00:02:11,440 --> 00:02:12,110
can add up.

28
00:02:12,130 --> 00:02:15,610
In addition, the tooltip file is the only file that needs the component,

29
00:02:15,610 --> 00:02:18,290
so actually we have to add the two together.

30
00:02:18,370 --> 00:02:24,100
So if you would only load these files when we need them, we would speed up the initial page load because

31
00:02:24,100 --> 00:02:30,580
we would request less files to be downloaded and parsed and that's also something we can do and something

32
00:02:30,580 --> 00:02:32,020
we can do in this module

33
00:02:32,050 --> 00:02:40,980
already. So to load modules conditionally, we can use an alternative import syntax. The import syntax you

34
00:02:40,990 --> 00:02:48,750
solve thus far at the beginning of the page is the static import syntax, it statically defines the dependency

35
00:02:48,810 --> 00:02:56,490
of a file. As an alternative to that, you have the dynamic import syntax and for some scenarios like the

36
00:02:56,500 --> 00:03:02,160
tooltip where you know that the code will not always be needed, it makes sense, if you know something

37
00:03:02,160 --> 00:03:03,370
always needs to run,

38
00:03:03,450 --> 00:03:08,700
like for example project list which is imported in app.js and which we need right at the start

39
00:03:08,700 --> 00:03:14,130
to construct our lists, there it makes no sense to load that dynamically because you'll always need it

40
00:03:14,640 --> 00:03:21,960
but for the tooltip, it can make sense. In project item, I need the tooltip here if we click on this show

41
00:03:21,960 --> 00:03:28,350
more info button. So therefore instead of importing tooltip up there statically, which means it will be

42
00:03:28,350 --> 00:03:31,830
downloaded when the project item file executes,

43
00:03:31,830 --> 00:03:35,400
I can also just download it here and request it here.

44
00:03:35,400 --> 00:03:43,830
How? With a special syntax. We can call import as a function and then pass a string with a path to the

45
00:03:43,830 --> 00:03:46,990
file I want to import, in this case tooltip.

46
00:03:47,070 --> 00:03:53,240
Now this import function is built into the browser and exposed in Javascript and it gives you a promise,

47
00:03:53,390 --> 00:03:57,810
so you can add a then block here or use async await of course.

48
00:03:57,810 --> 00:04:04,770
Now here, you get your module in the end and now in there, we can run code that requires the module,

49
00:04:04,770 --> 00:04:10,230
so in this case this code which wants to attach our tooltip and create it

50
00:04:10,260 --> 00:04:18,040
and so on, so cut it and move it into this then block. Here we can now access module.tooltip,

51
00:04:18,150 --> 00:04:22,660
I know that we'll have a tooltip in this file so I can access it on module,

52
00:04:22,860 --> 00:04:31,460
it is simply a property of this module object so to say and now this will only reach out to this file,

53
00:04:31,530 --> 00:04:37,590
we should add the extension though, it will only reach out to this file here when this code here runs

54
00:04:37,590 --> 00:04:40,670
and not at an earlier point of time.

55
00:04:40,680 --> 00:04:44,750
So now if we save that and we reload, you'll see we get no error

56
00:04:44,790 --> 00:04:51,230
but in the network tab, you see the tooltip and component.js files are not getting downloaded initially.

57
00:04:51,300 --> 00:04:57,930
If I click on more info though, then you will see these two requests are being added and are being sent

58
00:04:57,990 --> 00:05:03,810
but that happens at a later point of time, not when our app loads but only when we need the code.

59
00:05:03,810 --> 00:05:05,770
This can be a huge improvement,

60
00:05:05,790 --> 00:05:12,810
of course you don't really feel it for such small files but for larger files, not having to download

61
00:05:12,810 --> 00:05:18,120
them initially but only downloading them when you need them can really speed up your startup time which

62
00:05:18,120 --> 00:05:22,070
makes your app faster and more responsive when it first loads up.