Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
1
00:00:01,070 --> 00:00:04,020
Modules are a super important part
2
2
00:00:04,020 --> 00:00:06,020
of software development.
3
3
00:00:06,020 --> 00:00:07,540
And so in this lecture,
4
4
00:00:07,540 --> 00:00:10,530
we're gonna talk about modules in more depth
5
5
00:00:10,530 --> 00:00:13,143
and learn how they work behind the scenes.
6
6
00:00:14,800 --> 00:00:17,070
So essentially, a module
7
7
00:00:17,070 --> 00:00:19,370
is a reusable piece of code
8
8
00:00:19,370 --> 00:00:22,120
that encapsulates implementation details
9
9
00:00:22,120 --> 00:00:25,370
of a certain part of our project.
10
10
00:00:25,370 --> 00:00:28,120
Now that sounds a bit like a function
11
11
00:00:28,120 --> 00:00:29,640
or even a class,
12
12
00:00:29,640 --> 00:00:31,840
but the difference is that a module
13
13
00:00:31,840 --> 00:00:35,290
is usually a standalone file.
14
14
00:00:35,290 --> 00:00:37,500
Now that's not always the case,
15
15
00:00:37,500 --> 00:00:40,170
but normally when we think of a module
16
16
00:00:40,170 --> 00:00:42,750
we think of a separate file.
17
17
00:00:42,750 --> 00:00:46,910
So of course a module always contains some code
18
18
00:00:46,910 --> 00:00:51,040 line:15%
but it can also have imports and exports.
19
19
00:00:51,040 --> 00:00:53,920 line:15%
So with exports, as the name says,
20
20
00:00:53,920 --> 00:00:57,110 line:15%
we can export values out of a module
21
21
00:00:57,110 --> 00:01:01,420 line:15%
for example, simple values or even entire functions.
22
22
00:01:01,420 --> 00:01:04,070 line:15%
And whatever we export from a module
23
23
00:01:04,070 --> 00:01:06,710 line:15%
is called the public API.
24
24
00:01:06,710 --> 00:01:08,890 line:15%
So this is just like classes
25
25
00:01:08,890 --> 00:01:11,850 line:15%
where we can also expose a public API
26
26
00:01:11,850 --> 00:01:14,420 line:15%
for other codes to consume.
27
27
00:01:14,420 --> 00:01:16,490 line:15%
Now, in the case of modules,
28
28
00:01:16,490 --> 00:01:19,490 line:15%
this public API is actually consumed
29
29
00:01:19,490 --> 00:01:23,060 line:15%
by importing values into a module.
30
30
00:01:23,060 --> 00:01:25,630 line:15%
So just like we can export values
31
31
00:01:25,630 --> 00:01:28,600 line:15%
in modules, we can usually also import values
32
32
00:01:28,600 --> 00:01:30,470 line:15%
from other modules.
33
33
00:01:30,470 --> 00:01:33,570 line:15%
And these other modules from which we import
34
34
00:01:33,570 --> 00:01:35,610 line:15%
are then called dependencies
35
35
00:01:35,610 --> 00:01:37,370 line:15%
of the importing module
36
36
00:01:37,370 --> 00:01:39,660 line:15%
because the code dead is in the module
37
37
00:01:39,660 --> 00:01:43,380 line:15%
dead is importing cannot work without the code,
38
38
00:01:43,380 --> 00:01:47,860 line:15%
that it is importing from the external module, right?
39
39
00:01:47,860 --> 00:01:50,510 line:15%
And this entire logic that I just described
40
40
00:01:50,510 --> 00:01:52,510 line:15%
is true for all modules
41
41
00:01:52,510 --> 00:01:54,760 line:15%
in all programming languages.
42
42
00:01:54,760 --> 00:01:58,490 line:15%
So this is not specific to only JavaScript.
43
43
00:01:58,490 --> 00:02:01,840 line:15%
In fact, modules are a pattern that developers
44
44
00:02:01,840 --> 00:02:05,570 line:15%
have been using in all languages for decades.
45
45
00:02:05,570 --> 00:02:09,300 line:15%
Now, of course we can write code without modules,
46
46
00:02:09,300 --> 00:02:11,320 line:15%
and actually we've been doing that
47
47
00:02:11,320 --> 00:02:12,780 line:15%
up until this point.
48
48
00:02:12,780 --> 00:02:14,760 line:15%
but that's because our applications
49
49
00:02:14,760 --> 00:02:16,890 line:15%
have been very simple.
50
50
00:02:16,890 --> 00:02:20,180 line:15%
However, when a code base grows bigger and bigger,
51
51
00:02:20,180 --> 00:02:22,230 line:15%
there start to be many advantages
52
52
00:02:22,230 --> 00:02:23,910 line:15%
of using modules.
53
53
00:02:23,910 --> 00:02:26,270 line:15%
And the first one is that modules make it
54
54
00:02:26,270 --> 00:02:29,640 line:15%
really easy to compose software.
55
55
00:02:29,640 --> 00:02:31,480 line:15%
So we can think of modules
56
56
00:02:31,480 --> 00:02:33,070 line:15%
as small building blocks
57
57
00:02:33,070 --> 00:02:35,100 line:15%
that we can then put together
58
58
00:02:35,100 --> 00:02:38,430 line:15%
in order to build really complex applications.
59
59
00:02:38,430 --> 00:02:40,320 line:15%
And I think it might be helpful
60
60
00:02:40,320 --> 00:02:42,880 line:15%
to look at a more real world example,
61
61
00:02:42,880 --> 00:02:46,520 line:15%
to understand all the benefits of modules.
62
62
00:02:46,520 --> 00:02:49,350 line:15%
So let's take this digital camera.
63
63
00:02:49,350 --> 00:02:51,940 line:15%
You can see that this specific camera
64
64
00:02:51,940 --> 00:02:55,123 line:15%
is basically made up of all these modules
65
65
00:02:55,123 --> 00:02:56,930 line:15%
that we can see here.
66
66
00:02:56,930 --> 00:03:00,030 line:15%
And this is exactly how we can compose software
67
67
00:03:00,030 --> 00:03:02,420 line:15%
using modules as well.
68
68
00:03:02,420 --> 00:03:05,610 line:15%
Another big advantage of these camera modules
69
69
00:03:05,610 --> 00:03:07,300 line:15%
is that each of them can be
70
70
00:03:07,300 --> 00:03:10,350 line:15%
developed in complete isolation.
71
71
00:03:10,350 --> 00:03:13,980 line:15%
So you can have one engineer working on the lens
72
72
00:03:13,980 --> 00:03:16,380 line:15%
and another one on the screen
73
73
00:03:16,380 --> 00:03:19,870 line:15%
and even another one on the controller module.
74
74
00:03:19,870 --> 00:03:22,950 line:15%
And the best part of this is that each engineer
75
75
00:03:22,950 --> 00:03:25,640 line:15%
can actually work on their own module
76
76
00:03:25,640 --> 00:03:27,330 line:15%
without even understanding
77
77
00:03:27,330 --> 00:03:29,420 line:15%
what the other engineers are doing.
78
78
00:03:29,420 --> 00:03:31,410 line:15%
And also without understanding
79
79
00:03:31,410 --> 00:03:35,010 line:15%
how the entire final camera works itself.
80
80
00:03:35,010 --> 00:03:37,330 line:15%
And so isolating components
81
81
00:03:37,330 --> 00:03:41,200 line:15%
is another huge advantage of using modules.
82
82
00:03:41,200 --> 00:03:43,450 line:15%
And again, isolating components
83
83
00:03:43,450 --> 00:03:45,860 line:15%
essentially means that each module
84
84
00:03:45,860 --> 00:03:48,000 line:15%
can be developed in isolation
85
85
00:03:48,000 --> 00:03:50,280 line:15%
without the developer having to think
86
86
00:03:50,280 --> 00:03:52,400 line:15%
about the entire code base.
87
87
00:03:52,400 --> 00:03:55,030 line:15%
He doesn't even need to understand all of it,
88
88
00:03:55,030 --> 00:03:56,450 line:15%
which makes it really easy
89
89
00:03:56,450 --> 00:03:59,660 line:15%
to collaborate on a larger team.
90
90
00:03:59,660 --> 00:04:02,240 line:15%
Next up modules make it very easy
91
91
00:04:02,240 --> 00:04:04,440 line:15%
to abstract or code.
92
92
00:04:04,440 --> 00:04:05,930 line:15%
And we already talked about
93
93
00:04:05,930 --> 00:04:07,810 line:15%
what abstraction means,
94
94
00:04:07,810 --> 00:04:10,410 line:15%
but basically we can use modules
95
95
00:04:10,410 --> 00:04:13,240 line:15%
to implement low level code
96
96
00:04:13,240 --> 00:04:14,420 line:15%
then other modules,
97
97
00:04:14,420 --> 00:04:15,830 line:15%
which don't really care
98
98
00:04:15,830 --> 00:04:17,920 line:15%
about these low level details
99
99
00:04:17,920 --> 00:04:21,720 line:15%
can import these abstractions and use them.
100
100
00:04:21,720 --> 00:04:24,500 line:15%
And back to our camera, the screen module,
101
101
00:04:24,500 --> 00:04:26,620 line:15%
for example, does not care
102
102
00:04:26,620 --> 00:04:29,470 line:15%
about the low level implementation details
103
103
00:04:29,470 --> 00:04:31,410 line:15%
of the controller module.
104
104
00:04:31,410 --> 00:04:33,940 line:15%
It can simply import the controller,
105
105
00:04:33,940 --> 00:04:36,070 line:15%
but without knowing how it works
106
106
00:04:36,070 --> 00:04:39,600 line:15%
and use it to control other parts of the camera.
107
107
00:04:39,600 --> 00:04:43,730 line:15%
And so that's essentially the power of abstraction.
108
108
00:04:43,730 --> 00:04:46,000 line:15%
Modules also naturally lead
109
109
00:04:46,000 --> 00:04:48,820 line:15%
to a more organized code base.
110
110
00:04:48,820 --> 00:04:50,900 line:15%
Because when we break up our code
111
111
00:04:50,900 --> 00:04:55,010 line:15%
into separate isolated and obstructed modules,
112
112
00:04:55,010 --> 00:04:57,560 line:15%
this will automatically organize our code
113
113
00:04:57,560 --> 00:04:59,840 line:15%
and make it easier to understand.
114
114
00:04:59,840 --> 00:05:03,720 line:15%
And so this alone is a huge benefit of modules.
115
115
00:05:03,720 --> 00:05:07,160 line:15%
Finally modules allow us to easily reuse
116
116
00:05:07,160 --> 00:05:09,190 line:15%
the same code in a project
117
117
00:05:09,190 --> 00:05:12,110 line:15%
and even across multiple projects.
118
118
00:05:12,110 --> 00:05:14,430 line:15%
For example, if we use the module
119
119
00:05:14,430 --> 00:05:17,420 line:15%
to implement a couple of mathematical functions
120
120
00:05:17,420 --> 00:05:19,160 line:15%
in a certain project,
121
121
00:05:19,160 --> 00:05:21,420 line:15%
and if we then need the same functions
122
122
00:05:21,420 --> 00:05:22,980 line:15%
in the next project,
123
123
00:05:22,980 --> 00:05:25,800 line:15%
all we need to do is to copy that module
124
124
00:05:25,800 --> 00:05:27,860 line:15%
to the new project.
125
125
00:05:27,860 --> 00:05:29,950 line:15%
And in our camera example here,
126
126
00:05:29,950 --> 00:05:33,290 line:15%
this company could now use the exact same lens
127
127
00:05:33,290 --> 00:05:35,070 line:15%
or the exact same screen
128
128
00:05:35,070 --> 00:05:37,130 line:15%
in different camera models,
129
129
00:05:37,130 --> 00:05:40,580 line:15%
all because they nicely abstracted these components
130
130
00:05:40,580 --> 00:05:43,433 line:15%
into self-contained reusable modules.
131
131
00:05:45,120 --> 00:05:47,200 line:15%
So this is how modules work
132
132
00:05:47,200 --> 00:05:49,630 line:15%
in software design in general.
133
133
00:05:49,630 --> 00:05:51,880 line:15%
But now let's take a look at modules
134
134
00:05:51,880 --> 00:05:54,023 line:15%
specifically in JavaScript.
135
135
00:05:55,500 --> 00:05:57,470
So as of ES6,
136
136
00:05:57,470 --> 00:06:01,650
JavaScript has a native built-in module system.
137
137
00:06:01,650 --> 00:06:04,700
Now we did have modules before ES6,
138
138
00:06:04,700 --> 00:06:06,980
but we had to implement them ourselves
139
139
00:06:06,980 --> 00:06:09,600
or use external libraries.
140
140
00:06:09,600 --> 00:06:12,740
So ES6 modules are modules
141
141
00:06:12,740 --> 00:06:15,360
that are actually stored in files
142
142
00:06:15,360 --> 00:06:17,750
and each file is one module.
143
143
00:06:17,750 --> 00:06:20,743
So there is exactly one module per file.
144
144
00:06:21,840 --> 00:06:23,810
But now you might be thinking,
145
145
00:06:23,810 --> 00:06:28,470
well, scripts are usually also files, right?
146
146
00:06:28,470 --> 00:06:30,280
And that's of course true.
147
147
00:06:30,280 --> 00:06:31,720
And so let's not compare
148
148
00:06:31,720 --> 00:06:33,680
these two types of files
149
149
00:06:33,680 --> 00:06:34,583
in order to understand
150
150
00:06:34,583 --> 00:06:37,360
that there are actually huge differences
151
151
00:06:37,360 --> 00:06:41,503
between old school scripts and modern ES6 modules.
152
152
00:06:42,350 --> 00:06:44,560
The first difference is that in modules,
153
153
00:06:44,560 --> 00:06:46,200
all top level variables
154
154
00:06:46,200 --> 00:06:49,070
are scooped to the module.
155
155
00:06:49,070 --> 00:06:51,830
So basically variables are private
156
156
00:06:51,830 --> 00:06:53,980
to the module by default.
157
157
00:06:53,980 --> 00:06:57,050
And the only way an outside module can access
158
158
00:06:57,050 --> 00:07:00,050
a value that's inside of a module
159
159
00:07:00,050 --> 00:07:02,340
is by exporting that value.
160
160
00:07:02,340 --> 00:07:05,260
So just as we learned in the last slide.
161
161
00:07:05,260 --> 00:07:07,090
But if we don't export,
162
162
00:07:07,090 --> 00:07:11,160
then no one from the outside can see the variable.
163
163
00:07:11,160 --> 00:07:13,510
Now in scripts, on the other hand,
164
164
00:07:13,510 --> 00:07:15,050
all top level variables
165
165
00:07:15,050 --> 00:07:18,080
are always global and I showed you this
166
166
00:07:18,080 --> 00:07:21,430
in the map d project, remember?
167
167
00:07:21,430 --> 00:07:23,330
And this can lead to problems
168
168
00:07:23,330 --> 00:07:25,820
like global namespace pollution,
169
169
00:07:25,820 --> 00:07:28,780
where multiple scripts try to declare variables
170
170
00:07:28,780 --> 00:07:30,800
with the same name and then
171
171
00:07:30,800 --> 00:07:32,910
these variables collide.
172
172
00:07:32,910 --> 00:07:34,300
So private variables
173
173
00:07:34,300 --> 00:07:36,310
are the solution to this problem.
174
174
00:07:36,310 --> 00:07:40,163
And that's why ES6 modules implemented it like this.
175
175
00:07:41,320 --> 00:07:44,140
Next ES modules are always executed
176
176
00:07:44,140 --> 00:07:47,770
in strict mode while scripts on the other hand
177
177
00:07:47,770 --> 00:07:51,280
are executed in sloppy mode by default.
178
178
00:07:51,280 --> 00:07:53,510
So with modules, there is no more need
179
179
00:07:53,510 --> 00:07:56,490
to manually declare strict mode.
180
180
00:07:56,490 --> 00:07:59,600
Also the disc keyword is always undefined
181
181
00:07:59,600 --> 00:08:00,980
at the top level
182
182
00:08:00,980 --> 00:08:05,323
while in scripts it points at the window object, right?
183
183
00:08:06,400 --> 00:08:08,920
Now, as we learned in the last slide,
184
184
00:08:08,920 --> 00:08:11,270
what's really special about modules
185
185
00:08:11,270 --> 00:08:13,870
is that we can export and import values
186
186
00:08:13,870 --> 00:08:17,030
between them using this ES6 import
187
187
00:08:17,030 --> 00:08:19,090
and experts syntax.
188
188
00:08:19,090 --> 00:08:20,630
In regular scripts,
189
189
00:08:20,630 --> 00:08:22,880
importing and exporting values
190
190
00:08:22,880 --> 00:08:25,353
is just completely impossible.
191
191
00:08:26,270 --> 00:08:28,290
Now, there is something really important
192
192
00:08:28,290 --> 00:08:31,320
to note about imports and exports,
193
193
00:08:31,320 --> 00:08:34,310
which is the fact that they can only happen
194
194
00:08:34,310 --> 00:08:35,980
at the top level.
195
195
00:08:35,980 --> 00:08:39,050
So as you know, outside of any function
196
196
00:08:39,050 --> 00:08:40,900
or any if block,
197
197
00:08:40,900 --> 00:08:44,520
and we will see why that is in a second.
198
198
00:08:44,520 --> 00:08:47,550
Also all imports are hoisted.
199
199
00:08:47,550 --> 00:08:49,440
So no matter where in a code
200
200
00:08:49,440 --> 00:08:51,260
you're importing values,
201
201
00:08:51,260 --> 00:08:53,030
it's like the import statement
202
202
00:08:53,030 --> 00:08:56,070
will be moved to the top of the file.
203
203
00:08:56,070 --> 00:08:58,630
So in practice importing values
204
204
00:08:58,630 --> 00:09:01,993
is always the first thing that happens in a module.
205
205
00:09:03,940 --> 00:09:07,920
Now, in order to link a module to an HTML file,
206
206
00:09:07,920 --> 00:09:09,760
we need to use the script tag with
207
207
00:09:09,760 --> 00:09:12,550
the type attribute set to module,
208
208
00:09:12,550 --> 00:09:14,853
instead of just a plain script tag.
209
209
00:09:16,140 --> 00:09:18,330
And finally about downloading
210
210
00:09:18,330 --> 00:09:20,620
the module files themselves.
211
211
00:09:20,620 --> 00:09:22,800
This always automatically happens
212
212
00:09:22,800 --> 00:09:25,030
in an asynchronous way.
213
213
00:09:25,030 --> 00:09:27,300
And this is true for a module loaded
214
214
00:09:27,300 --> 00:09:30,340
from HTML as well as for modules
215
215
00:09:30,340 --> 00:09:32,290
that are loaded by importing
216
216
00:09:32,290 --> 00:09:34,320
one module into another,
217
217
00:09:34,320 --> 00:09:36,840
using the import syntax.
218
218
00:09:36,840 --> 00:09:39,370
Now regular scripts on the other hand
219
219
00:09:39,370 --> 00:09:41,100
are downloaded by default
220
220
00:09:41,100 --> 00:09:43,470
in a blocking synchronous way,
221
221
00:09:43,470 --> 00:09:45,090
unless we use the async
222
222
00:09:45,090 --> 00:09:47,933
or differ attributes on the script tag.
223
223
00:09:48,860 --> 00:09:52,460
So that's a great overview of ES6 modules,
224
224
00:09:52,460 --> 00:09:54,540
but now let's dig a bit deeper
225
225
00:09:54,540 --> 00:09:56,570
and really understand how modules
226
226
00:09:56,570 --> 00:09:59,923
actually import other modules behind the scenes.
227
227
00:10:01,940 --> 00:10:04,820
And to do that, let's analyze what happens
228
228
00:10:04,820 --> 00:10:07,320
in this small code example.
229
229
00:10:07,320 --> 00:10:09,220
So here we're importing a value
230
230
00:10:09,220 --> 00:10:12,940
called rent from the math.js module
231
231
00:10:12,940 --> 00:10:15,903
and show dies from the dumb.jsmodule.
232
232
00:10:17,050 --> 00:10:20,760
Now, as always, when a piece of code is executed,
233
233
00:10:20,760 --> 00:10:24,060
the first step is to parse that code.
234
234
00:10:24,060 --> 00:10:28,520
Remember, so we talked about that way back.
235
235
00:10:28,520 --> 00:10:31,240
But remember that parsing basically means
236
236
00:10:31,240 --> 00:10:33,150
to just read the code,
237
237
00:10:33,150 --> 00:10:35,620
but without executing it.
238
238
00:10:35,620 --> 00:10:36,970
And this is the moment
239
239
00:10:36,970 --> 00:10:39,800
in which imports are hoisted.
240
240
00:10:39,800 --> 00:10:44,160
And in fact, the whole process of importing modules
241
241
00:10:44,160 --> 00:10:47,440
happens before the code in the main module
242
242
00:10:47,440 --> 00:10:49,223
is actually executed.
243
243
00:10:51,303 --> 00:10:52,770
So in this example,
244
244
00:10:52,770 --> 00:10:55,330
the index.js module imports,
245
245
00:10:55,330 --> 00:10:57,830
the dumb and math modules
246
246
00:10:57,830 --> 00:10:59,393
in a synchronous way.
247
247
00:11:00,300 --> 00:11:02,820
What that means is that only after
248
248
00:11:02,820 --> 00:11:06,970
all imported modules have been downloaded and executed,
249
249
00:11:06,970 --> 00:11:09,660
the main index.js module
250
250
00:11:09,660 --> 00:11:12,053
will finally be executed as well.
251
251
00:11:12,930 --> 00:11:14,830
Now this is only possible
252
252
00:11:14,830 --> 00:11:18,810
because of top level imports and exports
253
253
00:11:18,810 --> 00:11:22,340
that's because if we only export and import values
254
254
00:11:22,340 --> 00:11:26,200
outside of any code that needs to be executed,
255
255
00:11:26,200 --> 00:11:27,950
then the engine can know
256
256
00:11:27,950 --> 00:11:31,650
all the imports and exports during the parsing phase.
257
257
00:11:31,650 --> 00:11:34,450
So while the code is still being read
258
258
00:11:34,450 --> 00:11:36,920
before being executed.
259
259
00:11:36,920 --> 00:11:39,620
Now, if we were allowed to import a module
260
260
00:11:39,620 --> 00:11:41,260
inside of a function,
261
261
00:11:41,260 --> 00:11:43,140
then that function would first
262
262
00:11:43,140 --> 00:11:46,783
have to be executed before the import code happened.
263
263
00:11:48,020 --> 00:11:49,320
And so in that case,
264
264
00:11:49,320 --> 00:11:53,230
modules could not be imported in a synchronous way.
265
265
00:11:53,230 --> 00:11:54,890
So the importing module
266
266
00:11:54,890 --> 00:11:57,490
would have to be executed first.
267
267
00:11:57,490 --> 00:12:00,820
But you might ask why do we actually want
268
268
00:12:00,820 --> 00:12:03,980
modules to be loaded in a synchronous way?
269
269
00:12:03,980 --> 00:12:06,210
Isn't synchronous bad?
270
270
00:12:06,210 --> 00:12:09,910
Well, the answer is that this is the easiest way
271
271
00:12:09,910 --> 00:12:11,520
in which we can do things
272
272
00:12:11,520 --> 00:12:15,050
like bundling and dead code elimination.
273
273
00:12:15,050 --> 00:12:16,895
So basically deleting code
274
274
00:12:16,895 --> 00:12:19,760
that's actually not even necessary.
275
275
00:12:19,760 --> 00:12:21,060
And trust me,
276
276
00:12:21,060 --> 00:12:24,150
this is very important in large projects
277
277
00:12:24,150 --> 00:12:26,070
with hundreds of modules
278
278
00:12:26,070 --> 00:12:28,630
and that includes third party modules
279
279
00:12:28,630 --> 00:12:31,720
from which we usually only want a small piece
280
280
00:12:31,720 --> 00:12:34,130
and not the entire module.
281
281
00:12:34,130 --> 00:12:36,380
So by knowing all dependencies
282
282
00:12:36,380 --> 00:12:39,240
between modules before execution,
283
283
00:12:39,240 --> 00:12:41,790
bundlers like webpack and Parcel
284
284
00:12:41,790 --> 00:12:44,560
can then join multiple modules together
285
285
00:12:44,560 --> 00:12:46,770
and eliminate that code.
286
286
00:12:46,770 --> 00:12:49,660
And so essentially this is the reason why
287
287
00:12:49,660 --> 00:12:52,050
we can only import and export
288
288
00:12:52,050 --> 00:12:55,510
outside of any code that needs to be executed.
289
289
00:12:55,510 --> 00:12:58,600
So like a function or an if block,
290
290
00:12:58,600 --> 00:13:01,240
but now let's move on here.
291
291
00:13:01,240 --> 00:13:03,400
So after the parsing process,
292
292
00:13:03,400 --> 00:13:07,790
HIAS figured out which modules it needs to import,
293
293
00:13:07,790 --> 00:13:10,660
then these modules are actually downloaded
294
294
00:13:10,660 --> 00:13:11,733
from the server.
295
295
00:13:12,970 --> 00:13:15,830
And remember downloading actually happens
296
296
00:13:15,830 --> 00:13:17,980
in an asynchronous way.
297
297
00:13:17,980 --> 00:13:20,830
It is only the importing operation itself
298
298
00:13:20,830 --> 00:13:22,563
that happens synchronously.
299
299
00:13:24,454 --> 00:13:26,690
Then after a module arrives,
300
300
00:13:26,690 --> 00:13:30,380
it's also parsed and the modules exports
301
301
00:13:30,380 --> 00:13:34,760
are linked to the imports in index.js.
302
302
00:13:34,760 --> 00:13:35,980
So for example,
303
303
00:13:35,980 --> 00:13:39,800
the math module exports a function called rent.
304
304
00:13:39,800 --> 00:13:42,370
And this export is then connected
305
305
00:13:42,370 --> 00:13:46,460
to the rent import in the index.js module.
306
306
00:13:46,460 --> 00:13:50,660
And this connection is actually a life connection.
307
307
00:13:50,660 --> 00:13:54,920
So exported values are not copied to imports.
308
308
00:13:54,920 --> 00:13:58,490
Instead, the import is basically just a reference
309
309
00:13:58,490 --> 00:14:00,660
to the export at value
310
310
00:14:00,660 --> 00:14:02,210
like a pointer.
311
311
00:14:02,210 --> 00:14:03,860
So when the value changes
312
312
00:14:03,860 --> 00:14:05,770
in the exporting module,
313
313
00:14:05,770 --> 00:14:08,190
then the same value also changes
314
314
00:14:08,190 --> 00:14:10,570
in the importing module.
315
315
00:14:10,570 --> 00:14:13,020
And this is quite important to understand
316
316
00:14:13,020 --> 00:14:16,450
because it's unique to ES6 modules.
317
317
00:14:16,450 --> 00:14:19,660
Other module systems do not work like this,
318
318
00:14:19,660 --> 00:14:21,930
but JavaScript modules do.
319
319
00:14:21,930 --> 00:14:24,373
And so you need to keep that in mind.
320
320
00:14:25,280 --> 00:14:27,860
But anyway, next up,
321
321
00:14:27,860 --> 00:14:31,303
to code in the imported modules is executed.
322
322
00:14:32,270 --> 00:14:34,640
And with this the process of importing
323
323
00:14:34,640 --> 00:14:37,330
modules is finally finished.
324
324
00:14:37,330 --> 00:14:39,500
And so now, as I already said,
325
325
00:14:39,500 --> 00:14:41,860
it's time for the importing module
326
326
00:14:41,860 --> 00:14:44,830
to be finally executed as well.
327
327
00:14:44,830 --> 00:14:48,430
So index.js in this example.
328
328
00:14:48,430 --> 00:14:51,600
Alright. And by now you're probably tired
329
329
00:14:51,600 --> 00:14:53,060
of listening to me.
330
330
00:14:53,060 --> 00:14:54,730
And so let's quickly move on
331
331
00:14:54,730 --> 00:14:58,003
and actually try all this with actual code.
28286
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.