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.