Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:01,230 --> 00:00:03,900
Now that you're familiar with the fundamentals
2
00:00:03,900 --> 00:00:05,630
of the JavaScript language.
3
00:00:05,630 --> 00:00:08,250
We need to talk about JavaScript or releases
4
00:00:08,250 --> 00:00:11,290
or versions before moving on.
5
00:00:11,290 --> 00:00:14,430
And we briefly talked about this in the intro video,
6
00:00:14,430 --> 00:00:16,502
but now let's go into more depth
7
00:00:16,502 --> 00:00:18,500
because it's really important
8
00:00:18,500 --> 00:00:21,095
to know about how JavaScript releases work
9
00:00:21,095 --> 00:00:22,794
and how we can use them.
10
00:00:22,794 --> 00:00:25,653
It's important for your work as a web developer,
11
00:00:25,653 --> 00:00:29,130
and also because you will see these topics coming up
12
00:00:29,130 --> 00:00:31,690
in the developer community all the time.
13
00:00:31,690 --> 00:00:34,963
And so you wanna be able to understand what's going on.
14
00:00:35,819 --> 00:00:39,069
And the best way to start understanding JavaScript versions
15
00:00:39,069 --> 00:00:42,460
is by looking at the history of JavaScript.
16
00:00:42,460 --> 00:00:44,540
So let's do that.
17
00:00:44,540 --> 00:00:47,733
And let's start at the beginning of the internet itself.
18
00:00:47,733 --> 00:00:50,613
So quickly after the internet was invented,
19
00:00:50,613 --> 00:00:53,520
and two first web browsers were developed.
20
00:00:53,520 --> 00:00:57,810
Developers wanted to start making websites more interactive.
21
00:00:57,810 --> 00:00:58,650
In other words,
22
00:00:58,650 --> 00:01:01,980
they needed a programming language for the browser.
23
00:01:01,980 --> 00:01:04,969
So in 1995, the Netscape Navigator,
24
00:01:04,969 --> 00:01:08,370
which by the time was the dominant browser
25
00:01:08,370 --> 00:01:10,400
hired a guy named Brendan Eich
26
00:01:10,400 --> 00:01:13,500
to create the very first version of JavaScript
27
00:01:13,500 --> 00:01:16,322
in just 10 days, it was called "Mocha".
28
00:01:16,322 --> 00:01:18,386
So not JavaScript yet,
29
00:01:18,386 --> 00:01:21,640
but it already had many of the fundamental features
30
00:01:21,640 --> 00:01:23,890
that modern JavaScript has today.
31
00:01:23,890 --> 00:01:26,500
So that's very impressive that he basically created
32
00:01:26,500 --> 00:01:29,557
this first version in really just 10 days.
33
00:01:29,557 --> 00:01:33,900
Then in 1996, Mocha was renamed tool Livescript,
34
00:01:33,900 --> 00:01:35,210
which was then again,
35
00:01:35,210 --> 00:01:38,517
renamed to JavaScript for one simple reason,
36
00:01:38,517 --> 00:01:42,700
to attract developers from the hottest language at the time,
37
00:01:42,700 --> 00:01:44,710
which was Java.
38
00:01:44,710 --> 00:01:46,536
So the Java in JavaScript
39
00:01:46,536 --> 00:01:49,430
was really just for marketing reasons
40
00:01:49,430 --> 00:01:51,140
because the language itself
41
00:01:51,140 --> 00:01:54,108
has basically nothing to do with Java.
42
00:01:54,108 --> 00:01:57,350
Now, some beginners think that is the case,
43
00:01:57,350 --> 00:02:00,159
but actually no, JavaScript and Java
44
00:02:00,159 --> 00:02:03,422
are two completely different languages.
45
00:02:03,422 --> 00:02:07,990
Also in 1996, Microsoft launched the internet Explorer,
46
00:02:07,990 --> 00:02:11,780
which basically copied JavaScript from Netscape,
47
00:02:11,780 --> 00:02:15,950
but they call the JScript for legal reasons because, well,
48
00:02:15,950 --> 00:02:17,850
you actually cannot just go around
49
00:02:17,850 --> 00:02:20,860
and copy other people's programming languages.
50
00:02:20,860 --> 00:02:24,521
Now, what this means, is that we now had two very similar
51
00:02:24,521 --> 00:02:26,760
but competing languages,
52
00:02:26,760 --> 00:02:30,238
which of course is never a good idea in the long run.
53
00:02:30,238 --> 00:02:33,250
And so with the internet growing like crazy
54
00:02:33,250 --> 00:02:34,207
around this time,
55
00:02:34,207 --> 00:02:38,230
people realized they needed to standardize JavaScript.
56
00:02:38,230 --> 00:02:39,750
So the language was submitted
57
00:02:39,750 --> 00:02:43,310
to an independent standard organization called ECMA,
58
00:02:43,310 --> 00:02:48,310
which in 1997 released ECMAScript one or ES1.
59
00:02:48,368 --> 00:02:50,960
This was the very first official standards
60
00:02:50,960 --> 00:02:52,630
for the JavaScript language.
61
00:02:52,630 --> 00:02:55,330
And with this, every browser could now implement
62
00:02:55,330 --> 00:02:56,870
the same standard "JavaScript."
63
00:02:56,870 --> 00:03:00,322
And the real world we usually use the term ECMAScript
64
00:03:00,322 --> 00:03:03,882
to refer to the standard, while JavaScript is used
65
00:03:03,882 --> 00:03:06,820
when we talk about the language in practice,
66
00:03:06,820 --> 00:03:09,520
as it's implemented in browsers.
67
00:03:09,520 --> 00:03:11,964
Now fast forward to 2009,
68
00:03:11,964 --> 00:03:15,151
after a lot of complications and disagreements
69
00:03:15,151 --> 00:03:17,671
about where the language should be headed,
70
00:03:17,671 --> 00:03:21,774
ES5 was released with a lot of great new features.
71
00:03:21,774 --> 00:03:24,838
And then finally, another six years later,
72
00:03:24,838 --> 00:03:29,838
the much awaited new version ES6 was launched in June, 2015.
73
00:03:30,225 --> 00:03:34,487
And this was the single biggest update to the language ever.
74
00:03:34,487 --> 00:03:37,667
So it contained a ton of new exciting features,
75
00:03:37,667 --> 00:03:41,185
which we will explore throughout this entire course.
76
00:03:41,185 --> 00:03:44,460
This was, and still is a really big deal
77
00:03:44,460 --> 00:03:48,429
for JavaScript and for the whole web developer community.
78
00:03:48,429 --> 00:03:53,130
Now you will also see ES6 being called ES2015,
79
00:03:53,130 --> 00:03:55,270
which has actually the official name,
80
00:03:55,270 --> 00:03:57,770
but most people just call it ES6.
81
00:03:57,770 --> 00:04:00,770
And so that's what I'm gonna do here as well.
82
00:04:00,770 --> 00:04:02,620
And actually the reason for ES6
83
00:04:02,620 --> 00:04:06,797
being called ES2015 officially is that in 2015,
84
00:04:06,797 --> 00:04:10,780
ECMAScript changed to an annual release cycle.
85
00:04:10,780 --> 00:04:13,760
So right now there's gonna be a new release
86
00:04:13,760 --> 00:04:15,410
every single year.
87
00:04:15,410 --> 00:04:18,010
The reason for that is that they prefer to just
88
00:04:18,010 --> 00:04:20,835
add a small number of new features per year,
89
00:04:20,835 --> 00:04:23,440
instead of shipping a huge new version
90
00:04:23,440 --> 00:04:26,990
every couple of years, like it happened with ES6.
91
00:04:26,990 --> 00:04:29,710
And so this way, it's gonna be much easier
92
00:04:29,710 --> 00:04:31,699
for everyone to keep up to date.
93
00:04:31,699 --> 00:04:35,470
And so according to this new annual release cycle,
94
00:04:35,470 --> 00:04:40,470
in 2016 ES2016or ES7 was released ES2017 and 2017.
95
00:04:42,950 --> 00:04:46,452
And like this, it will continue until the end of time
96
00:04:46,452 --> 00:04:48,163
or something like that.
97
00:04:49,101 --> 00:04:52,860
Now there is one particularity about JavaScript releases,
98
00:04:52,860 --> 00:04:56,120
which is pretty unique for any programming language
99
00:04:56,120 --> 00:04:59,564
and that's backwards compatibility all the way to ES1.
100
00:04:59,564 --> 00:05:01,556
So what does that actually mean?
101
00:05:01,556 --> 00:05:05,120
Well, basically it means that if you were to take
102
00:05:05,120 --> 00:05:08,431
some JavaScript code written back in 1997
103
00:05:08,431 --> 00:05:10,950
and put it in a modern browser
104
00:05:10,950 --> 00:05:13,350
with a modern JavaScript engine today,
105
00:05:13,350 --> 00:05:16,110
it would still work just the same.
106
00:05:16,110 --> 00:05:19,581
So again, the JavaScript engine that's in our browser today
107
00:05:19,581 --> 00:05:23,596
is able to understand old code written 25 years ago,
108
00:05:23,596 --> 00:05:26,340
without having to rely on version numbers
109
00:05:26,340 --> 00:05:29,230
or anything like that. It just works.
110
00:05:29,230 --> 00:05:32,750
And it works this way because of the fundamental principle
111
00:05:32,750 --> 00:05:35,230
that's baked into the JavaScript language
112
00:05:35,230 --> 00:05:38,243
and its development, which is to not break the web.
113
00:05:38,243 --> 00:05:42,010
This means that there is almost never anything removed
114
00:05:42,010 --> 00:05:45,640
from the language, but only added in new versions.
115
00:05:45,640 --> 00:05:49,210
And actually we cannot really call them new versions even,
116
00:05:49,210 --> 00:05:51,960
because they do not contain breaking changes
117
00:05:51,960 --> 00:05:54,820
like when other languages moved to a new version.
118
00:05:54,820 --> 00:05:58,294
Instead new versions are always just incremental updates,
119
00:05:58,294 --> 00:06:00,200
which add new stuff.
120
00:06:00,200 --> 00:06:03,633
And so I like to call them releases and not versions.
121
00:06:03,633 --> 00:06:07,157
The ECMAScript committee who works on updating the language,
122
00:06:07,157 --> 00:06:08,600
does all this.
123
00:06:08,600 --> 00:06:12,051
So that old websites basically keep working forever.
124
00:06:12,051 --> 00:06:15,020
Just imagine they removed some important feature
125
00:06:15,020 --> 00:06:18,950
that made a website from 2008, work just fine.
126
00:06:18,950 --> 00:06:22,091
If you then want it to visit that page, it will be broken.
127
00:06:22,091 --> 00:06:24,406
And that's why we fortunately
128
00:06:24,406 --> 00:06:27,370
have to don't break the web principle.
129
00:06:27,370 --> 00:06:28,203
Now, of course,
130
00:06:28,203 --> 00:06:32,190
this comes with problems because there are tons of old bugs
131
00:06:32,190 --> 00:06:34,671
and weird things and the language.
132
00:06:34,671 --> 00:06:38,361
Remember that Brendan Eich made the very first version
133
00:06:38,361 --> 00:06:42,946
in just 10 days and no one back then could even imagine
134
00:06:42,946 --> 00:06:46,620
what JavaScript would be used for one day.
135
00:06:46,620 --> 00:06:49,270
The initial goal of JavaScript was just to add
136
00:06:49,270 --> 00:06:51,077
some simple dynamics to pages,
137
00:06:51,077 --> 00:06:53,420
not to write whole web applications
138
00:06:53,420 --> 00:06:55,970
in a browser like we do today.
139
00:06:55,970 --> 00:06:59,336
But anyway, these bugs and weird quirks in the language
140
00:06:59,336 --> 00:07:02,330
have been giving the language a bad reputation
141
00:07:02,330 --> 00:07:05,680
among many programmers who can really take JavaScript
142
00:07:05,680 --> 00:07:07,414
serious because of this.
143
00:07:07,414 --> 00:07:10,267
But here's the thing, we can actually go around
144
00:07:10,267 --> 00:07:13,160
many of this weird stuff by simply learning
145
00:07:13,160 --> 00:07:15,641
the modern JavaScript that matters today
146
00:07:15,641 --> 00:07:18,746
and just ignore most of the old weird stuff.
147
00:07:18,746 --> 00:07:23,370
And so that's exactly what we're gonna do in this course.
148
00:07:23,370 --> 00:07:26,685
So next time your friends start hating on JavaScript
149
00:07:26,685 --> 00:07:29,209
and believe me, this actually happens.
150
00:07:29,209 --> 00:07:32,560
Then just tell them about the amazing things
151
00:07:32,560 --> 00:07:35,140
that you can build with it. Okay.
152
00:07:35,140 --> 00:07:37,220
But now, there is one more thing
153
00:07:37,220 --> 00:07:39,000
that we need to talk about here,
154
00:07:39,000 --> 00:07:41,056
and that is forwards compatibility.
155
00:07:41,056 --> 00:07:43,550
So what do you think would happen
156
00:07:43,550 --> 00:07:46,135
if we took this totally made up code
157
00:07:46,135 --> 00:07:51,061
from the year 2089 and try to run it in today's browsers?
158
00:07:51,061 --> 00:07:53,291
Well, you're probably right.
159
00:07:53,291 --> 00:07:55,401
It would not work at all.
160
00:07:55,401 --> 00:07:57,811
There would be errors left and right.
161
00:07:57,811 --> 00:08:00,090
And nothing would work.
162
00:08:00,090 --> 00:08:01,790
That's why we say that JavaScript
163
00:08:01,790 --> 00:08:03,960
is not forwards compatible,
164
00:08:03,960 --> 00:08:05,707
basically because current browsers
165
00:08:05,707 --> 00:08:08,434
do not understand code from the future.
166
00:08:08,434 --> 00:08:11,990
And this actually brings us to our next topic,
167
00:08:11,990 --> 00:08:15,660
which is how can we use modern JavaScript today?
168
00:08:15,660 --> 00:08:19,340
Because browsers that users are using might be old
169
00:08:19,340 --> 00:08:22,308
and there's no forwards compatibility. Right?
170
00:08:22,308 --> 00:08:24,160
So to answer the question,
171
00:08:24,160 --> 00:08:26,740
how we can use modern JavaScript today,
172
00:08:26,740 --> 00:08:29,137
we need to consider two distinct scenarios,
173
00:08:29,137 --> 00:08:31,448
development and production.
174
00:08:31,448 --> 00:08:34,930
So the development phase is simply when you're building
175
00:08:34,930 --> 00:08:37,386
the site or application on your computer.
176
00:08:37,386 --> 00:08:40,520
To ensure you can use the latest JavaScript features
177
00:08:40,520 --> 00:08:42,296
in this face. All you have to do
178
00:08:42,296 --> 00:08:45,010
is to use the most Up ToDate version
179
00:08:45,010 --> 00:08:47,090
of the Google Chrome browser.
180
00:08:47,090 --> 00:08:48,032
This will then ensure
181
00:08:48,032 --> 00:08:50,350
that all the features I show you in his course
182
00:08:50,350 --> 00:08:52,410
will work for you as well.
183
00:08:52,410 --> 00:08:55,110
The second scenario is production,
184
00:08:55,110 --> 00:08:57,467
which is when your web application is finished.
185
00:08:57,467 --> 00:08:59,244
You deploy it on the internet
186
00:08:59,244 --> 00:09:02,643
and it's then running in your users' browsers.
187
00:09:02,643 --> 00:09:05,540
And this is where problems might appear,
188
00:09:05,540 --> 00:09:08,648
because this is the part that we actually can't control.
189
00:09:08,648 --> 00:09:12,200
We cannot control which browser the user uses.
190
00:09:12,200 --> 00:09:14,880
And we also can't assume that all our users
191
00:09:14,880 --> 00:09:18,080
always use the latest browsers, right.
192
00:09:18,080 --> 00:09:19,800
Now, the solution to this problem
193
00:09:19,800 --> 00:09:23,001
is to basically convert these modern JavaScript versions
194
00:09:23,001 --> 00:09:26,858
back to ES5 using a process called transpiling
195
00:09:26,858 --> 00:09:29,130
and also polyfilling.
196
00:09:29,130 --> 00:09:32,500
We will use a tool called Babel later in the course
197
00:09:32,500 --> 00:09:33,890
to transpile or code.
198
00:09:33,890 --> 00:09:37,500
But for now, during the course, we won't need that.
199
00:09:37,500 --> 00:09:41,020
Again, because you're using the most Up ToDate browser
200
00:09:41,020 --> 00:09:44,270
during development, transpiling back to ES5
201
00:09:44,270 --> 00:09:47,940
is only necessary after your app is developed
202
00:09:47,940 --> 00:09:50,345
and you want to ship it to your users.
203
00:09:50,345 --> 00:09:53,111
All right. So now let's take a look
204
00:09:53,111 --> 00:09:57,369
at how different JavaScript releases can be used today.
205
00:09:57,369 --> 00:10:01,423
So first off ES5 is of course fully supported
206
00:10:01,423 --> 00:10:04,120
in all browsers today, all the way down
207
00:10:04,120 --> 00:10:06,934
to internet Explorer nine from 2011.
208
00:10:06,934 --> 00:10:11,199
So we can assume that ES5 is safe to be used at this point,
209
00:10:11,199 --> 00:10:12,870
which is the reason why
210
00:10:12,870 --> 00:10:15,324
we use it as a target for transpiling.
211
00:10:15,324 --> 00:10:17,189
Now about the newer releases,
212
00:10:17,189 --> 00:10:22,189
ES6, ES7 and all the way to ES2020, as of mid-2020,
213
00:10:23,816 --> 00:10:26,690
they are actually quite well supported already
214
00:10:26,690 --> 00:10:28,063
in all modern browsers.
215
00:10:28,063 --> 00:10:30,955
And we usually call all the current versions together,
216
00:10:30,955 --> 00:10:35,955
ES6 plus. So right now that's from ES6 to ES2020,
217
00:10:36,510 --> 00:10:40,271
and basically all together, they are the modern JavaScript.
218
00:10:40,271 --> 00:10:42,423
Now it's in this modern JavaScript.
219
00:10:42,423 --> 00:10:46,517
So in this ES6 plus where transpiling comes in,
220
00:10:46,517 --> 00:10:48,570
as I mentioned earlier.
221
00:10:48,570 --> 00:10:50,980
Again, because it's not safe to assume
222
00:10:50,980 --> 00:10:54,039
that all our users are using these modern browsers
223
00:10:54,039 --> 00:10:57,650
and we don't want to break or app for them, right?
224
00:10:57,650 --> 00:10:59,470
And by the way,
225
00:10:59,470 --> 00:11:02,130
if you want to stay up to date with what features
226
00:11:02,130 --> 00:11:04,310
are currently supported in which browser
227
00:11:04,310 --> 00:11:07,740
you can check out the ES6 compatibility table.
228
00:11:07,740 --> 00:11:08,835
It's really interesting.
229
00:11:08,835 --> 00:11:13,835
The link is actually on my resources page on jonas.io.
230
00:11:14,464 --> 00:11:17,412
Next, there are also the future releases
231
00:11:17,412 --> 00:11:22,412
of the language like ES2021, ES2022 and so on.
232
00:11:24,000 --> 00:11:25,880
And these future releases together
233
00:11:25,880 --> 00:11:28,639
are many times called ESNext.
234
00:11:28,639 --> 00:11:30,541
Now, why is this even relevant?
235
00:11:30,541 --> 00:11:34,570
Well, because most browsers actually start implementing
236
00:11:34,570 --> 00:11:37,170
new features even before they enter
237
00:11:37,170 --> 00:11:39,840
the official ECMAScript specification.
238
00:11:39,840 --> 00:11:42,729
That's possible because as new features are proposed,
239
00:11:42,729 --> 00:11:45,570
they have to go through four stages,
240
00:11:45,570 --> 00:11:47,660
starting with stage one,
241
00:11:47,660 --> 00:11:51,230
where they are first admitted all the way to stage four,
242
00:11:51,230 --> 00:11:54,220
at which point they enter the language officially.
243
00:11:54,220 --> 00:11:56,305
But when a feature is at stage three,
244
00:11:56,305 --> 00:11:58,160
browsers can be pretty sure
245
00:11:58,160 --> 00:12:00,720
it will eventually pass to stage four.
246
00:12:00,720 --> 00:12:03,150
And so they're gonna start implementing that feature
247
00:12:03,150 --> 00:12:04,873
while still in stage three.
248
00:12:04,873 --> 00:12:07,604
And there is a lot more to be said about this.
249
00:12:07,604 --> 00:12:10,288
And actually I find this really fascinating,
250
00:12:10,288 --> 00:12:12,283
but I'm gonna stop here.
251
00:12:12,283 --> 00:12:14,896
You can find tons of information about us online.
252
00:12:14,896 --> 00:12:16,580
If you want to learn more.
253
00:12:16,580 --> 00:12:19,487
And a great place to start is actually once more,
254
00:12:19,487 --> 00:12:23,386
this compatibility table, that's up here on the slide.
255
00:12:23,386 --> 00:12:27,158
But anyway, as these new features start coming out,
256
00:12:27,158 --> 00:12:30,805
I will simply add new videos about them to the course
257
00:12:30,805 --> 00:12:34,784
in order to keep it updated with the annual release cycle.
258
00:12:34,784 --> 00:12:36,525
This is now way easier to do,
259
00:12:36,525 --> 00:12:39,300
because there will be no drastic changes
260
00:12:39,300 --> 00:12:42,300
to the language like ES6 was.
261
00:12:42,300 --> 00:12:44,070
Okay. And now to finish,
262
00:12:44,070 --> 00:12:47,959
let's quickly talk about how versions or releases
263
00:12:47,959 --> 00:12:50,116
are taught in this course.
264
00:12:50,116 --> 00:12:51,688
So, as I said earlier,
265
00:12:51,688 --> 00:12:53,900
I will teach you a modern JavaScript,
266
00:12:53,900 --> 00:12:56,066
right from the beginning of the course.
267
00:12:56,066 --> 00:12:59,740
Now I used to teach this course starting with ES5
268
00:12:59,740 --> 00:13:02,770
and then moving to ES6 in the middle of the course.
269
00:13:02,770 --> 00:13:04,510
But now after a couple of years,
270
00:13:04,510 --> 00:13:07,618
it was time to fully move to modern JavaScript.
271
00:13:07,618 --> 00:13:09,975
However, it's also super important
272
00:13:09,975 --> 00:13:12,660
to learn how some things used to be done
273
00:13:12,660 --> 00:13:16,175
before we had this fancy modern JavaScript.
274
00:13:16,175 --> 00:13:18,280
For example, in this section,
275
00:13:18,280 --> 00:13:21,380
I already showed you the modern const and let
276
00:13:21,380 --> 00:13:23,150
for variable declarations,
277
00:13:23,150 --> 00:13:25,588
but also how we used to use Vue before.
278
00:13:25,588 --> 00:13:28,369
And there will be many more examples like this,
279
00:13:28,369 --> 00:13:32,478
but why butter with ES5 at all? You might ask?
280
00:13:32,478 --> 00:13:34,950
Well, here is why,
281
00:13:34,950 --> 00:13:37,820
first, you will better understand how some features
282
00:13:37,820 --> 00:13:40,910
in JavaScript actually work behind the scenes.
283
00:13:40,910 --> 00:13:42,671
For example, ES6 classes,
284
00:13:42,671 --> 00:13:44,897
which had all the implementation details
285
00:13:44,897 --> 00:13:48,380
of object oriented programming in JavaScript.
286
00:13:48,380 --> 00:13:51,040
Also many tutorials and example code
287
00:13:51,040 --> 00:13:54,669
that you will find online are still written in ES5 today.
288
00:13:54,669 --> 00:13:57,474
Plus, as a developer, in many jobs,
289
00:13:57,474 --> 00:14:01,020
you will actually have to work on older code bases.
290
00:14:01,020 --> 00:14:03,900
And it's totally possible that that code base
291
00:14:03,900 --> 00:14:06,849
might still contain a lot of ES5 code.
292
00:14:06,849 --> 00:14:09,340
Okay. So hope that made sense.
293
00:14:09,340 --> 00:14:13,258
And that's it for this lecture and for the section.
294
00:14:13,258 --> 00:14:15,963
So see you in the next one.
23727
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.