WEBVTT 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.