1
00:00:02,260 --> 00:00:06,880
So which problem do Javascript modules solve? For that

2
00:00:06,880 --> 00:00:11,110
I opened up this project we worked on earlier in the course,

3
00:00:11,110 --> 00:00:17,350
you might remember, it's this project here where we can drag and drop items around and yes, we got this

4
00:00:17,350 --> 00:00:18,990
behavior you see here.

5
00:00:19,090 --> 00:00:21,040
This is the project we worked on earlier,

6
00:00:21,280 --> 00:00:26,680
it's quite nice and we'll not add any new functionalities there but if we have a look at the app.js

7
00:00:26,680 --> 00:00:28,840
file, we can tell it's quite a big file,

8
00:00:28,840 --> 00:00:30,390
quite a lot of content in there, right?

9
00:00:30,430 --> 00:00:34,200
Our entire application logic in the end lives in this file.

10
00:00:34,270 --> 00:00:38,040
The events.js file was just a dummy file for experimenting with events,

11
00:00:38,050 --> 00:00:42,070
we can actually delete that as well as the events.html file.

12
00:00:42,220 --> 00:00:48,070
The analytics.js file was also just a dummy file which I loaded here dynamically with app.js, so

13
00:00:48,070 --> 00:00:53,670
the core application logic is really completely in that app.js file.

14
00:00:53,710 --> 00:01:00,200
Now we might want to split that, why? To keep our code maintainable, to make it easier to work on it,

15
00:01:00,220 --> 00:01:04,930
also if you're working on a team if you have multiple files, it's easier than if you're all working on

16
00:01:04,930 --> 00:01:11,770
the same file because that is certain to break at some point of time, even if you can add it on the same

17
00:01:11,770 --> 00:01:13,260
file at the same time,

18
00:01:13,300 --> 00:01:18,820
you will certainly run into situations where you add something which a colleague then deletes accidentally

19
00:01:18,820 --> 00:01:19,630
and so on.

20
00:01:19,660 --> 00:01:23,360
So having multiple files helps you a lot when you are working in the team

21
00:01:23,470 --> 00:01:27,400
but even if you're working alone, you just find stuff quicker

22
00:01:27,520 --> 00:01:33,550
if you have multiple files. For example here, if I'm searching for a project item class, I have to scroll

23
00:01:33,550 --> 00:01:36,040
through the file, I might scroll too fast,

24
00:01:36,070 --> 00:01:37,450
where is it,

25
00:01:37,450 --> 00:01:38,890
here's the project item,

26
00:01:38,890 --> 00:01:43,380
it takes me some time to find that and that can be annoying.

27
00:01:43,420 --> 00:01:50,260
So an idea would be to split this file such that all classes have their own files.

28
00:01:50,260 --> 00:01:57,100
That might sound like file overkill but actually it is indeed the standard, the default for most projects

29
00:01:57,340 --> 00:02:00,220
to have one thing per file,

30
00:02:00,220 --> 00:02:02,150
one class per file,

31
00:02:02,170 --> 00:02:04,450
one big function per file.

32
00:02:04,450 --> 00:02:09,810
Maybe you have a file with multiple smaller functions, shorter functions but typically it's one piece,

33
00:02:09,820 --> 00:02:17,790
one thing per file and therefore here we could add a new subfolder to keep things organized and add a utility

34
00:02:19,160 --> 00:02:28,340
folder and maybe an app folder. We could drag and drop the analytics.js file into the utility folder

35
00:02:28,340 --> 00:02:33,240
here and then we could create a bunch of new files in the app folder.

36
00:02:33,560 --> 00:02:42,440
So here in the app folder, we could add component.js file for the DOM helper since it's a helper,

37
00:02:42,440 --> 00:02:50,810
we could create that in utility, there we could have the DOMhelper.js file. We could then also

38
00:02:50,810 --> 00:02:59,870
add the tooltip here to apptooltip.js. We could add project item and project list files in the

39
00:02:59,870 --> 00:03:00,880
app folder,

40
00:03:00,950 --> 00:03:10,580
so projectitem.js and projectlist.js and thereafter, we only have the app class left here

41
00:03:10,580 --> 00:03:11,290
in app.js and

42
00:03:11,310 --> 00:03:12,700
I think that is fine.

43
00:03:12,830 --> 00:03:15,220
Now regarding the file naming, it's totally up to you,

44
00:03:15,230 --> 00:03:18,470
you have to find your style and then just stick to it.

45
00:03:18,470 --> 00:03:24,320
Here I chose an uppercase naming style or I start with an uppercase character and then every word

46
00:03:24,320 --> 00:03:26,140
in a word has an uppercase character,

47
00:03:26,150 --> 00:03:30,710
you could also go for project-item here if you prefer that. This is really up to you,

48
00:03:30,710 --> 00:03:32,510
there is no good or bad here,

49
00:03:32,600 --> 00:03:38,240
you just should be consistent and therefore I'll also rename this here to Analytics.js, starting with

50
00:03:38,240 --> 00:03:39,540
a capital A.

51
00:03:39,710 --> 00:03:43,460
Now of course we have to refactor our code here,

52
00:03:43,460 --> 00:03:51,080
for example analytics.js moved, so here when I access assets, scripts, analytics and so on, I should dive

53
00:03:51,080 --> 00:03:56,110
into the utility folder and there, search for Analytics with a capital A.

54
00:03:56,120 --> 00:03:59,000
Now we can also split the other code here,

55
00:03:59,000 --> 00:04:07,610
cut the DOM helper class for example and add that here into the DOMhelper.js file. Also then cut

56
00:04:07,610 --> 00:04:15,140
the component class from the app.js file and move that into the component file and so on, so do the

57
00:04:15,140 --> 00:04:25,120
same here for the tooltip which I'll grab like this and move into the tooltip.js file and for the project

58
00:04:25,210 --> 00:04:30,000
item, I'll move this here into projectitem.js

59
00:04:30,040 --> 00:04:37,990
and last but not least, let's grab the project list here and move that out of app.js into the

60
00:04:38,110 --> 00:04:38,690
projectlist.js

61
00:04:38,740 --> 00:04:39,340
file.

62
00:04:40,180 --> 00:04:45,010
So now this is all reorganized and of course the implication is that if we reload the app, it breaks,

63
00:04:45,040 --> 00:04:47,490
we can't drag and drop anymore,

64
00:04:47,500 --> 00:04:49,560
we can drag but we can't drop,

65
00:04:49,660 --> 00:04:56,470
we got an error here and of course it breaks because we moved all functionality but all these new files

66
00:04:56,470 --> 00:05:00,570
are not getting imported. Now of course we can add imports here,

67
00:05:00,580 --> 00:05:00,790
right,

68
00:05:00,790 --> 00:05:05,490
we can go to the index.html file and just duplicate the script import here.

69
00:05:05,500 --> 00:05:10,780
Now we have to watch out regarding the order though because the scripts are parsed and executed from

70
00:05:10,780 --> 00:05:11,590
top to bottom,

71
00:05:11,860 --> 00:05:18,240
so we have to make sure we import them such that every file has everything it needs to work.

72
00:05:18,400 --> 00:05:26,440
So we should probably dive in to the utility folder first and import the DOM helper because that was

73
00:05:26,440 --> 00:05:32,260
at the top of our app.js file before and I did try to structure it there such that everything that

74
00:05:32,260 --> 00:05:34,210
depends on it comes below it,

75
00:05:34,210 --> 00:05:36,220
so I want to import this first,

76
00:05:36,580 --> 00:05:45,440
then we can dive into our app folder and there, import component.js and as a next step, import

77
00:05:45,530 --> 00:05:52,720
tooltip actually, tooltip was next, then import projectitem and then projectlist and

78
00:05:52,720 --> 00:05:57,740
now hopefully, this is an order that works. If we save that all and reload,

79
00:05:57,910 --> 00:05:59,000
error message is gone

80
00:05:59,260 --> 00:06:02,040
and that works. Now to show you what you can mess up,

81
00:06:02,050 --> 00:06:08,370
if I would import app.js first, then actually we again have that error.

82
00:06:08,410 --> 00:06:14,110
So some imports might depend on others and therefore, you can mess up your code,

83
00:06:14,110 --> 00:06:19,450
it depends on which features you need from the other files and when that code that needs these features

84
00:06:19,720 --> 00:06:21,210
executes.

85
00:06:21,220 --> 00:06:26,980
So whilst this does work and we did improve our project because now we have one piece per file and therefore

86
00:06:26,980 --> 00:06:31,620
all these files are actually way more maintainable and way more manageable,

87
00:06:31,630 --> 00:06:34,630
if we need to work on the project item, we can quickly find it

88
00:06:34,780 --> 00:06:39,790
but whilst that did improve, our situation here in index.html get worse.

89
00:06:39,820 --> 00:06:45,820
Not only do we need to take care about the order, we also will need to add every new file which

90
00:06:45,820 --> 00:06:48,310
we create to that import list here,

91
00:06:48,310 --> 00:06:52,550
so we have to micromanage that list in the index.html file,

92
00:06:52,570 --> 00:07:00,460
we have to make sure we load all scripts that together build up our application and for this still relatively

93
00:07:00,460 --> 00:07:02,980
trivial project, that is doable

94
00:07:03,250 --> 00:07:06,280
but consider this to be a bigger project, quickly.

95
00:07:06,290 --> 00:07:10,030
you're in a nightmare and that's where Javascript modules step in.