1
00:00:02,220 --> 00:00:07,500
If you have programming experience with some other programming languages, then you might notice approach

2
00:00:07,590 --> 00:00:14,670
of specifying import statements or references to other files directly in a file. So you could say my

3
00:00:14,670 --> 00:00:22,140
tooltip here actually extends the component, so this tooltip.js file definitely needs access to the

4
00:00:22,140 --> 00:00:23,730
component.js file,

5
00:00:23,850 --> 00:00:30,650
this is a dependency we have. Now we fix or we implement this dependency currently by ensuring the order,

6
00:00:30,660 --> 00:00:36,570
for example if I would switch tooltip and component, this would break because tooltip would try to use

7
00:00:36,570 --> 00:00:39,380
component before component is defined.

8
00:00:39,840 --> 00:00:41,230
So we have a dependency here,

9
00:00:41,340 --> 00:00:46,740
project item for example uses the tooltip class, though only at runtime when this code executes,

10
00:00:46,740 --> 00:00:50,650
so we might be able to mess up the order here and still get away with it,

11
00:00:50,700 --> 00:00:53,520
nonetheless here, we also have a dependency.

12
00:00:53,520 --> 00:00:59,190
So it would be nice if we could say, at the top of the tooltip.js file for example, this file depends

13
00:00:59,190 --> 00:01:06,930
on component and then we could remove this component import here and tooltip would automatically import

14
00:01:07,230 --> 00:01:09,270
component when it needs it,

15
00:01:09,270 --> 00:01:16,760
so when tooltip.js runs basically and that can be done with Javascript modules. So to show that, let

16
00:01:16,780 --> 00:01:22,020
me comment out this component import and therefore of course the tooltip.js file breaks as you learned.

17
00:01:22,800 --> 00:01:27,020
So now let's see how Javascript modules help us with that.

18
00:01:27,150 --> 00:01:34,320
We can go to the component and there, we can add a special keyword that makes it clear that we're exporting

19
00:01:34,320 --> 00:01:39,960
this so that this class should be available outside of this file because by default and that's an important

20
00:01:39,960 --> 00:01:40,500
rule,

21
00:01:40,560 --> 00:01:46,920
as soon as we switch to modules which we haven't done yet but as soon as we do so, we will have locked

22
00:01:47,100 --> 00:01:51,670
files. Currently where we import everything with normal import statements here,

23
00:01:51,690 --> 00:01:56,840
when I assign a class like this, when I declare it here, it gets added to the global object.

24
00:01:56,880 --> 00:02:02,190
So it's globally available and every other file can use it, as soon as we switch to modules,

25
00:02:02,190 --> 00:02:09,210
this will change and then every file will be locked down, its content will not be added to this global

26
00:02:09,210 --> 00:02:09,810
object,

27
00:02:09,810 --> 00:02:15,730
it will not be globally available, every file will get its own scope instead.

28
00:02:15,810 --> 00:02:19,050
So how do we switch to modules then and which keyword

29
00:02:19,050 --> 00:02:20,190
do we have to add here?

30
00:02:20,190 --> 00:02:22,580
The keyword is the export keyword.

31
00:02:22,590 --> 00:02:28,920
This is a keyword built into Javascript which signals to Javascript that inside of a module, I want to

32
00:02:28,920 --> 00:02:35,940
make this class here available to other files as well. As I just said, normally that's not the case, with

33
00:02:36,030 --> 00:02:36,590
export

34
00:02:36,600 --> 00:02:38,520
we can make it available.

35
00:02:38,700 --> 00:02:45,870
Now we need to switch to modules and for this, we go to our script here, to our root script which we

36
00:02:45,870 --> 00:02:50,790
always will need to import here because there is at least one script which we have to import into HTML

37
00:02:50,790 --> 00:02:56,130
file because whilst scripts will be able to point at each other, we need one starting point and

38
00:02:56,130 --> 00:03:03,000
to that starting point script, to the script tag we add type and set this to module, so type module needs

39
00:03:03,000 --> 00:03:03,980
to be added here.

40
00:03:03,990 --> 00:03:06,630
This is understood by the browser and tells the browser that

41
00:03:06,630 --> 00:03:10,810
now this script and all scripts referenced by this script,

42
00:03:10,890 --> 00:03:16,880
currently there are none, soon there will be more, will use modules. So now if save this,

43
00:03:16,920 --> 00:03:18,890
this alone won't do much, if I now reload,

44
00:03:18,900 --> 00:03:23,150
we got even more errors and this is actually an important error which we'll need to fix.