1
00:00:00,790 --> 00:00:08,230
When I first started learning JavaScript modules and that topic was the most confusing thing ever for

2
00:00:08,230 --> 00:00:12,140
me, I had a really tough time getting a grasp of the concept.

3
00:00:12,850 --> 00:00:20,230
It took me a year to actually get it, but I've created a mental image in my head to understand a better.

4
00:00:21,650 --> 00:00:27,230
And as we do in this course, we first start with the problem, then go to the solution that we have

5
00:00:27,230 --> 00:00:30,480
now to see where we where and where we are now.

6
00:00:31,130 --> 00:00:36,230
This is the mental model that I've created and I call it climbing the mountain of modules.

7
00:00:37,010 --> 00:00:37,820
Let me explain.

8
00:00:38,540 --> 00:00:42,430
When we first started writing JavaScript and creating websites with JavaScript.

9
00:00:43,160 --> 00:00:43,520
Well.

10
00:00:44,990 --> 00:00:47,030
We had an e-mail file.

11
00:00:48,320 --> 00:00:51,620
And the very first time people are using JavaScript.

12
00:00:53,390 --> 00:00:57,470
You used a script tag and what we called an inline script.

13
00:00:58,750 --> 00:01:05,890
And in-line script is exactly that we just in line all of our JavaScript within the HTML file.

14
00:01:07,690 --> 00:01:16,110
Now, there's problems that I see with this, imagine this getting massive, a massive JavaScript file,

15
00:01:16,390 --> 00:01:18,370
hundreds and thousands of lines of code.

16
00:01:19,060 --> 00:01:24,880
One is the lack of code reusability, and you'll hear this term a lot.

17
00:01:26,790 --> 00:01:36,450
If we need to add another page, maybe in about 30 page, well, we have to copy this code and put it

18
00:01:36,780 --> 00:01:38,220
into the other e-mail file.

19
00:01:39,040 --> 00:01:43,990
And the second was the pollution of the global namespace.

20
00:01:44,930 --> 00:01:45,770
And that is.

21
00:01:46,930 --> 00:01:55,930
Once I use up a as a variable in this case in the window object, well, I can never use a again and

22
00:01:55,930 --> 00:01:59,080
maybe hundreds of lines down by mistake.

23
00:01:59,080 --> 00:02:02,970
I assign a variable A and erase my A function.

24
00:02:03,460 --> 00:02:06,880
Well, that's a huge problem and that's a big problem in general.

25
00:02:07,120 --> 00:02:09,970
You want to make sure that you don't pollute the global namespace.

26
00:02:09,970 --> 00:02:16,600
That is the window object with all these names, because then you have collisions, you have different

27
00:02:16,600 --> 00:02:21,940
team members working on different pieces of the code and all of a sudden we both come up with the same

28
00:02:21,940 --> 00:02:22,150
name.

29
00:02:22,510 --> 00:02:23,280
It's a big problem.

30
00:02:24,360 --> 00:02:31,910
The next attempt was script X, and this is something we've been familiar with instead of having in

31
00:02:32,010 --> 00:02:32,340
line.

32
00:02:33,910 --> 00:02:34,480
We had.

33
00:02:36,680 --> 00:02:37,340
Script X.

34
00:02:38,520 --> 00:02:46,770
And we played around with Bootstrap and Jorquera, this is what we did, we had our Jaquie file Voda

35
00:02:46,770 --> 00:02:50,040
first, then our JavaScript file load a second.

36
00:02:51,120 --> 00:02:56,520
And as you can see, we can have one script filed in the second one, then the third one, then the

37
00:02:56,520 --> 00:02:57,210
fourth one.

38
00:02:58,220 --> 00:02:59,360
This way you have.

39
00:03:00,290 --> 00:03:04,060
Everything outside of the e-mail solves the problem, right?

40
00:03:05,200 --> 00:03:09,490
Well, the problem with script tax, as far as I can see, are three things.

41
00:03:10,390 --> 00:03:16,960
If we need to add another page, like an about page, well, we still have to copy and paste this script

42
00:03:16,970 --> 00:03:17,230
ex.

43
00:03:18,450 --> 00:03:20,520
And again, we don't really want to do that.

44
00:03:21,520 --> 00:03:28,600
The second one is the lack of dependency resolution, and that is you're responsible to make sure that

45
00:03:29,320 --> 00:03:32,210
the scripts are added in proper order.

46
00:03:32,440 --> 00:03:38,860
For example, if this script accesses a function from the number four Dodgiest Followill, it's going

47
00:03:38,860 --> 00:03:42,680
to fail because the number for JS file hasn't loaded yet.

48
00:03:43,300 --> 00:03:45,520
So that's lack of dependency resolution.

49
00:03:46,670 --> 00:03:50,970
And finally, a third, this doesn't really solve the global namespace problem, right?

50
00:03:51,020 --> 00:03:52,970
It's polluting the global namespace.

51
00:03:52,970 --> 00:04:00,230
All the functions and variables that are declared in each of these files will be on the window object.

52
00:04:00,950 --> 00:04:10,170
OK, so what about the third attempt, the ISP that stands for immediately invoked function execution?

53
00:04:10,670 --> 00:04:14,450
I know that's a mouthful, but it looks something like this.

54
00:04:16,450 --> 00:04:24,100
And if he is, it actually wraps a function in brackets so that JavaScript reads this and says, oh,

55
00:04:24,100 --> 00:04:27,370
I have to evaluate this and execute this.

56
00:04:28,300 --> 00:04:28,960
And then.

57
00:04:30,140 --> 00:04:36,020
These brackets at the end says run the function, so after you evaluate this, run this function.

58
00:04:37,160 --> 00:04:44,930
And it was a confusing way to make sure of one thing, and that is by using this method, you don't

59
00:04:44,930 --> 00:04:46,720
pollute the global namespace.

60
00:04:47,090 --> 00:04:52,520
Now, if in the first file you have variable Myalup, they'll be on the window object.

61
00:04:52,850 --> 00:04:58,630
But everything else that's inside a function, as we know, creates a new scope.

62
00:04:59,030 --> 00:05:05,930
So all the files, because they're wrapped in this, if he had their own scope and if you wanted to

63
00:05:05,930 --> 00:05:13,190
add to my app, you just added everything as a property or method.

64
00:05:14,950 --> 00:05:23,470
So awesome that reduced our global namespace to just one, I mean, it's not zero, but the one that's

65
00:05:23,470 --> 00:05:24,380
that's a lot better, right?

66
00:05:25,480 --> 00:05:27,490
But there is still one issue with this.

67
00:05:28,770 --> 00:05:36,360
The order of the files are still important, and I've worked on apps before where we're using so many

68
00:05:36,360 --> 00:05:39,290
scripts that this was close to one hundred skeptic's.

69
00:05:39,330 --> 00:05:44,610
And every time you added a file, you had to make sure that you add it in the right place because that

70
00:05:44,610 --> 00:05:47,920
file might be dependent on another file loading before it.

71
00:05:48,540 --> 00:05:51,570
So as we know, that's lack of dependency resolution.

72
00:05:52,020 --> 00:05:54,720
And frankly, this doesn't look very pretty.

73
00:05:55,770 --> 00:05:56,940
So then we had.

74
00:05:58,500 --> 00:06:01,570
Browser filed this nice looking logo.

75
00:06:02,460 --> 00:06:08,560
Now, what did browser, if I do it, actually used something called Common G.S..

76
00:06:08,580 --> 00:06:13,500
So I'm going to comment that if you out and show you what browser if I did.

77
00:06:14,740 --> 00:06:21,350
It use common gas, which allowed us to use a certain syntax, and it looks something like this, if

78
00:06:21,350 --> 00:06:32,750
I wanted to have on my first JavaScript file a function and I can say module exports, and now in the

79
00:06:32,750 --> 00:06:37,040
second JavaScript file, I could require the.

80
00:06:38,080 --> 00:06:42,190
Add this, fix the strings here and now.

81
00:06:43,190 --> 00:06:47,060
I can add add function into my JavaScript to file.

82
00:06:49,450 --> 00:06:53,170
Browser, if I use this common syntax.

83
00:06:54,060 --> 00:06:56,370
But it's actually a module bundler.

84
00:06:57,500 --> 00:06:58,400
And what does that mean?

85
00:06:58,430 --> 00:06:58,700
Well.

86
00:06:59,570 --> 00:07:07,520
It runs before you put the website online, what that means is it read through all the JavaScript files,

87
00:07:08,030 --> 00:07:09,770
read through all the syntax.

88
00:07:10,860 --> 00:07:13,980
And it bundles everything into a single file.

89
00:07:15,270 --> 00:07:23,490
Once you run all the files through browser PHY and again is just a simple tool that allowed us to just

90
00:07:23,730 --> 00:07:26,280
dump all our secret files, all of these.

91
00:07:27,350 --> 00:07:28,550
And to Bruce, Safai.

92
00:07:29,570 --> 00:07:33,170
And as long as we use the common syntax like this.

93
00:07:34,070 --> 00:07:37,100
It will know what to do and automatically.

94
00:07:38,410 --> 00:07:39,040
Create.

95
00:07:40,890 --> 00:07:41,660
One file.

96
00:07:43,130 --> 00:07:50,690
Usually called something like Mondal Dogs, so all our scripts will just be on one massive file and

97
00:07:50,900 --> 00:07:56,450
yeah, that might be bad when we're actually developing, but when it's out on the Internet in real

98
00:07:56,450 --> 00:08:03,560
world, we don't really care how it looks because we're just doing this to send it somewhere to a server

99
00:08:03,560 --> 00:08:06,720
so that the web can be viewed by users.

100
00:08:07,250 --> 00:08:11,690
This is not what it's actually going to look when developers are working on it, when developers are

101
00:08:11,690 --> 00:08:12,440
working on it.

102
00:08:12,470 --> 00:08:14,000
We just have our own separate files.

103
00:08:14,000 --> 00:08:15,670
We just run it through browser.

104
00:08:17,020 --> 00:08:22,540
Right before we deploy, that is put it out to the public, all right, so.

105
00:08:23,550 --> 00:08:28,140
That was pretty cool, and we're getting closer to the top of the mountain here.

106
00:08:29,240 --> 00:08:35,780
Now, all of these problems here, it was all because JavaScript didn't have what we call a module system

107
00:08:36,230 --> 00:08:37,340
built into the language.

108
00:08:38,309 --> 00:08:45,540
And think of module's as building blocks, as different pieces of code, so instead of having one giant

109
00:08:45,540 --> 00:08:50,100
thing, you have module's each piece is really, really good at doing one thing.

110
00:08:51,360 --> 00:08:57,960
And because JavaScript didn't have this module system, it's the reason we have so many different ways

111
00:08:57,960 --> 00:09:03,900
of importing and exporting modules and there's actually quite a few more that I didn't show because,

112
00:09:03,900 --> 00:09:07,310
well, frankly, it'll just be too much.

113
00:09:07,320 --> 00:09:12,210
But things have recently changed with the introduction of ESX.

114
00:09:13,290 --> 00:09:14,160
We can now.

115
00:09:15,170 --> 00:09:18,080
Do something a lot nicer.

116
00:09:19,830 --> 00:09:21,120
And it looks something like this.

117
00:09:23,720 --> 00:09:33,380
With Essex, we have two new things, export and import, for example, in JavaScript, one file, I

118
00:09:33,380 --> 00:09:40,550
can have a function and you can see them using our functions here, an ADD function, and I simply export

119
00:09:40,550 --> 00:09:40,670
it.

120
00:09:41,670 --> 00:09:44,370
Or I can even do export default.

121
00:09:46,210 --> 00:09:53,560
In the second file, if I wanted to use the add function, all I say is import and then we see here

122
00:09:53,560 --> 00:09:54,690
the structuring.

123
00:09:54,730 --> 00:09:58,480
You might remember this from the S5 S6 video.

124
00:09:59,480 --> 00:10:02,420
And we're simply just grabbing at.

125
00:10:03,710 --> 00:10:10,640
Or if the export was default, which means with this, you can export multiple functions in the same

126
00:10:10,640 --> 00:10:15,550
file versus here you can only export one thing.

127
00:10:15,560 --> 00:10:17,330
So the file only exports one thing.

128
00:10:17,600 --> 00:10:20,180
Well, in that case, we don't need the little brackets.

129
00:10:20,180 --> 00:10:22,700
We can just to add from Adva.

130
00:10:23,420 --> 00:10:24,100
Very cool.

131
00:10:24,950 --> 00:10:26,270
So that's nice.

132
00:10:26,270 --> 00:10:27,770
That reads pretty nicely.

133
00:10:27,800 --> 00:10:33,590
We just put the imports at the top so each fall we know exactly what each file needs and everything

134
00:10:33,590 --> 00:10:37,190
is clean, everything's works, and we don't have to worry about any of this stuff.

135
00:10:37,190 --> 00:10:37,460
Right?

136
00:10:38,330 --> 00:10:39,470
Well, yeah.

137
00:10:40,330 --> 00:10:47,830
Kind of as you know by now, and I feel like a broken record, browsers aren't supporting everything

138
00:10:47,830 --> 00:10:49,330
yet because it's a new feature.

139
00:10:49,600 --> 00:10:52,330
Again, we're still waiting on browsers to implement them.

140
00:10:52,840 --> 00:10:55,660
But this is what this blue thing is for.

141
00:10:55,880 --> 00:10:58,480
It's called the -- and --.

142
00:10:58,480 --> 00:11:01,840
Just like Bruce Safai is a module bundler.

143
00:11:01,840 --> 00:11:07,180
That is a bundles modules, which is bundles, JavaScript files.

144
00:11:08,640 --> 00:11:17,040
And just like Bresser five, it traverses the dependancy tree, which is these export and import tags

145
00:11:17,700 --> 00:11:22,850
into a single file, or it can even have multiple files based on your needs.

146
00:11:23,220 --> 00:11:29,430
And with Webb back, we can actually use S6 in all browsers.

147
00:11:30,360 --> 00:11:31,200
Isn't that awesome?

148
00:11:31,950 --> 00:11:37,680
This is where we are now with climb the mountain of modules and we have a really, really good system

149
00:11:37,680 --> 00:11:38,790
right now in JavaScript.

150
00:11:39,060 --> 00:11:42,410
It was really hard getting there, but we're in a good place right now.

151
00:11:42,420 --> 00:11:46,680
So this is what we're going to be using and this is what the industry is using.

152
00:11:47,060 --> 00:11:48,500
Get used to the syntax.

153
00:11:48,540 --> 00:11:52,070
I'll leave a link at the end of this video so you can check out more.

154
00:11:52,080 --> 00:11:57,540
But when we get to react, we're going to be using this a lot and it's going to be a ton of fun.

155
00:11:57,540 --> 00:11:59,840
It's going to make things really nice and clean for us.

156
00:12:01,920 --> 00:12:06,840
One thing I wanted to show you, you might think, hey, this -- thing seems like it's kind of

157
00:12:06,840 --> 00:12:08,020
hard, like how does it do it?

158
00:12:08,490 --> 00:12:09,360
It's very simple.

159
00:12:09,360 --> 00:12:11,610
It just has a config file just like this.

160
00:12:11,840 --> 00:12:19,170
As you can see, we just have an output that is bundle jobs and we don't need to worry too much about

161
00:12:19,170 --> 00:12:19,310
it.

162
00:12:19,320 --> 00:12:26,640
Usually when somebody is starting a project, it's one person on the team that configures this file

163
00:12:26,640 --> 00:12:27,600
and everything is done.

164
00:12:27,600 --> 00:12:29,850
The rest you just build on top of.

165
00:12:29,880 --> 00:12:31,710
It's very, very simple to get started.

166
00:12:32,220 --> 00:12:35,310
I don't think it's super important for us to tackle right now.

167
00:12:35,880 --> 00:12:41,620
But again, a very, very useful tool and it creates a nice bundled JS file.

168
00:12:41,640 --> 00:12:45,090
So now all our e-mails look nice and simple.

169
00:12:46,630 --> 00:12:47,350
And you know what?

170
00:12:48,360 --> 00:12:48,900
That's it.

171
00:12:49,800 --> 00:12:55,530
We've covered some of the most important topics in JavaScript and some really, really hard topics,

172
00:12:56,070 --> 00:13:01,080
and I know your brain is hurting from all this information, but you've done it.

173
00:13:01,330 --> 00:13:08,280
We've finished the section and previous sections and now we can actually build amazing apps with the

174
00:13:08,280 --> 00:13:09,150
tools that we have.

175
00:13:10,760 --> 00:13:15,380
Can't wait to show you how all these pieces come together to build something amazing.

176
00:13:16,880 --> 00:13:18,000
I'll see you in the next video.

177
00:13:18,740 --> 00:13:19,120
Bye bye.