Original subtitles

1 1

Now that you're familiar with the fundamentals 2

2

of the JavaScript language. 3

3

We need to talk about JavaScript or releases 4

4

or versions before moving on. 5

5

And we briefly talked about this in the intro video, 6

6

but now let's go into more depth 7

7

because it's really important 8

8

to know about how JavaScript releases work 9

9

and how we can use them. 10

10

It's important for your work as a web developer, 11

11

and also because you will see these topics coming up 12

12

in the developer community all the time. 13

13

And so you wanna be able to understand what's going on. 14

14

And the best way to start understanding JavaScript versions 15

15

is by looking at the history of JavaScript. 16

16

So let's do that. 17

17

And let's start at the beginning of the internet itself. 18

18

So quickly after the internet was invented, 19

19

and two first web browsers were developed. 20

20

Developers wanted to start making websites more interactive. 21

21

In other words, 22

22

they needed a programming language for the browser. 23

23

So in 1995, the Netscape Navigator, 24

24

which by the time was the dominant browser 25

25

hired a guy named Brendan Eich 26

26

to create the very first version of JavaScript 27

27

in just 10 days, it was called "Mocha". 28

28

So not JavaScript yet, 29

29

but it already had many of the fundamental features 30

30

that modern JavaScript has today. 31

31

So that's very impressive that he basically created 32

32

this first version in really just 10 days. 33

33

Then in 1996, Mocha was renamed tool Livescript, 34

34

which was then again, 35

35

renamed to JavaScript for one simple reason, 36

36

to attract developers from the hottest language at the time, 37

37

which was Java. 38

38

So the Java in JavaScript 39

39

was really just for marketing reasons 40

40

because the language itself 41

41

has basically nothing to do with Java. 42

42

Now, some beginners think that is the case, 43

43

but actually no, JavaScript and Java 44

44

are two completely different languages. 45

45

Also in 1996, Microsoft launched the internet Explorer, 46

46

which basically copied JavaScript from Netscape, 47

47

but they call the JScript for legal reasons because, well, 48

48

you actually cannot just go around 49

49

and copy other people's programming languages. 50

50

Now, what this means, is that we now had two very similar 51

51

but competing languages, 52

52

which of course is never a good idea in the long run. 53

53

And so with the internet growing like crazy 54

54

around this time, 55

55

people realized they needed to standardize JavaScript. 56

56

So the language was submitted 57

57

to an independent standard organization called ECMA, 58

58

which in 1997 released ECMAScript one or ES1. 59

59

This was the very first official standards 60

60

for the JavaScript language. 61

61

And with this, every browser could now implement 62

62

the same standard "JavaScript." 63

63

And the real world we usually use the term ECMAScript 64

64

to refer to the standard, while JavaScript is used 65

65

when we talk about the language in practice, 66

66

as it's implemented in browsers. 67

67

Now fast forward to 2009, 68

68

after a lot of complications and disagreements 69

69

about where the language should be headed, 70

70

ES5 was released with a lot of great new features. 71

71

And then finally, another six years later, 72

72

the much awaited new version ES6 was launched in June, 2015. 73

73

And this was the single biggest update to the language ever. 74

74

So it contained a ton of new exciting features, 75

75

which we will explore throughout this entire course. 76

76

This was, and still is a really big deal 77

77

for JavaScript and for the whole web developer community. 78

78

Now you will also see ES6 being called ES2015, 79

79

which has actually the official name, 80

80

but most people just call it ES6. 81

81

And so that's what I'm gonna do here as well. 82

82

And actually the reason for ES6 83

83

being called ES2015 officially is that in 2015, 84

84

ECMAScript changed to an annual release cycle. 85

85

So right now there's gonna be a new release 86

86

every single year. 87

87

The reason for that is that they prefer to just 88

88

add a small number of new features per year, 89

89

instead of shipping a huge new version 90

90

every couple of years, like it happened with ES6. 91

91

And so this way, it's gonna be much easier 92

92

for everyone to keep up to date. 93

93

And so according to this new annual release cycle, 94

94

in 2016 ES2016or ES7 was released ES2017 and 2017. 95

95

And like this, it will continue until the end of time 96

96

or something like that. 97

97

Now there is one particularity about JavaScript releases, 98

98

which is pretty unique for any programming language 99

99

and that's backwards compatibility all the way to ES1. 100

100

So what does that actually mean? 101

101

Well, basically it means that if you were to take 102

102

some JavaScript code written back in 1997 103

103

and put it in a modern browser 104

104

with a modern JavaScript engine today, 105

105

it would still work just the same. 106

106

So again, the JavaScript engine that's in our browser today 107

107

is able to understand old code written 25 years ago, 108

108

without having to rely on version numbers 109

109

or anything like that. It just works. 110

110

And it works this way because of the fundamental principle 111

111

that's baked into the JavaScript language 112

112

and its development, which is to not break the web. 113

113

This means that there is almost never anything removed 114

114

from the language, but only added in new versions. 115

115

And actually we cannot really call them new versions even, 116

116

because they do not contain breaking changes 117

117

like when other languages moved to a new version. 118

118

Instead new versions are always just incremental updates, 119

119

which add new stuff. 120

120

And so I like to call them releases and not versions. 121

121

The ECMAScript committee who works on updating the language, 122

122

does all this. 123

123

So that old websites basically keep working forever. 124

124

Just imagine they removed some important feature 125

125

that made a website from 2008, work just fine. 126

126

If you then want it to visit that page, it will be broken. 127

127

And that's why we fortunately 128

128

have to don't break the web principle. 129

129

Now, of course, 130

130

this comes with problems because there are tons of old bugs 131

131

and weird things and the language. 132

132

Remember that Brendan Eich made the very first version 133

133

in just 10 days and no one back then could even imagine 134

134

what JavaScript would be used for one day. 135

135

The initial goal of JavaScript was just to add 136

136

some simple dynamics to pages, 137

137

not to write whole web applications 138

138

in a browser like we do today. 139

139

But anyway, these bugs and weird quirks in the language 140

140

have been giving the language a bad reputation 141

141

among many programmers who can really take JavaScript 142

142

serious because of this. 143

143

But here's the thing, we can actually go around 144

144

many of this weird stuff by simply learning 145

145

the modern JavaScript that matters today 146

146

and just ignore most of the old weird stuff. 147

147

And so that's exactly what we're gonna do in this course. 148

148

So next time your friends start hating on JavaScript 149

149

and believe me, this actually happens. 150

150

Then just tell them about the amazing things 151

151

that you can build with it. Okay. 152

152

But now, there is one more thing 153

153

that we need to talk about here, 154

154

and that is forwards compatibility. 155

155

So what do you think would happen 156

156

if we took this totally made up code 157

157

from the year 2089 and try to run it in today's browsers? 158

158

Well, you're probably right. 159

159

It would not work at all. 160

160

There would be errors left and right. 161

161

And nothing would work. 162

162

That's why we say that JavaScript 163

163

is not forwards compatible, 164

164

basically because current browsers 165

165

do not understand code from the future. 166

166

And this actually brings us to our next topic, 167

167

which is how can we use modern JavaScript today? 168

168

Because browsers that users are using might be old 169

169

and there's no forwards compatibility. Right? 170

170

So to answer the question, 171

171

how we can use modern JavaScript today, 172

172

we need to consider two distinct scenarios, 173

173

development and production. 174

174

So the development phase is simply when you're building 175

175

the site or application on your computer. 176

176

To ensure you can use the latest JavaScript features 177

177

in this face. All you have to do 178

178

is to use the most Up ToDate version 179

179

of the Google Chrome browser. 180

180

This will then ensure 181

181

that all the features I show you in his course 182

182

will work for you as well. 183

183

The second scenario is production, 184

184

which is when your web application is finished. 185

185

You deploy it on the internet 186

186

and it's then running in your users' browsers. 187

187

And this is where problems might appear, 188

188

because this is the part that we actually can't control. 189

189

We cannot control which browser the user uses. 190

190

And we also can't assume that all our users 191

191

always use the latest browsers, right. 192

192

Now, the solution to this problem 193

193

is to basically convert these modern JavaScript versions 194

194

back to ES5 using a process called transpiling 195

195

and also polyfilling. 196

196

We will use a tool called Babel later in the course 197

197

to transpile or code. 198

198

But for now, during the course, we won't need that. 199

199

Again, because you're using the most Up ToDate browser 200

200

during development, transpiling back to ES5 201

201

is only necessary after your app is developed 202

202

and you want to ship it to your users. 203

203

All right. So now let's take a look 204

204

at how different JavaScript releases can be used today. 205

205

So first off ES5 is of course fully supported 206

206

in all browsers today, all the way down 207

207

to internet Explorer nine from 2011. 208

208

So we can assume that ES5 is safe to be used at this point, 209

209

which is the reason why 210

210

we use it as a target for transpiling. 211

211

Now about the newer releases, 212

212

ES6, ES7 and all the way to ES2020, as of mid-2020, 213

213

they are actually quite well supported already 214

214

in all modern browsers. 215

215

And we usually call all the current versions together, 216

216

ES6 plus. So right now that's from ES6 to ES2020, 217

217

and basically all together, they are the modern JavaScript. 218

218

Now it's in this modern JavaScript. 219

219

So in this ES6 plus where transpiling comes in, 220

220

as I mentioned earlier. 221

221

Again, because it's not safe to assume 222

222

that all our users are using these modern browsers 223

223

and we don't want to break or app for them, right? 224

224

And by the way, 225

225

if you want to stay up to date with what features 226

226

are currently supported in which browser 227

227

you can check out the ES6 compatibility table. 228

228

It's really interesting. 229

229

The link is actually on my resources page on jonas.io. 230

230

Next, there are also the future releases 231

231

of the language like ES2021, ES2022 and so on. 232

232

And these future releases together 233

233

are many times called ESNext. 234

234

Now, why is this even relevant? 235

235

Well, because most browsers actually start implementing 236

236

new features even before they enter 237

237

the official ECMAScript specification. 238

238

That's possible because as new features are proposed, 239

239

they have to go through four stages, 240

240

starting with stage one, 241

241

where they are first admitted all the way to stage four, 242

242

at which point they enter the language officially. 243

243

But when a feature is at stage three, 244

244

browsers can be pretty sure 245

245

it will eventually pass to stage four. 246

246

And so they're gonna start implementing that feature 247

247

while still in stage three. 248

248

And there is a lot more to be said about this. 249

249

And actually I find this really fascinating, 250

250

but I'm gonna stop here. 251

251

You can find tons of information about us online. 252

252

If you want to learn more. 253

253

And a great place to start is actually once more, 254

254

this compatibility table, that's up here on the slide. 255

255

But anyway, as these new features start coming out, 256

256

I will simply add new videos about them to the course 257

257

in order to keep it updated with the annual release cycle. 258

258

This is now way easier to do, 259

259

because there will be no drastic changes 260

260

to the language like ES6 was. 261

261

Okay. And now to finish, 262

262

let's quickly talk about how versions or releases 263

263

are taught in this course. 264

264

So, as I said earlier, 265

265

I will teach you a modern JavaScript, 266

266

right from the beginning of the course. 267

267

Now I used to teach this course starting with ES5 268

268

and then moving to ES6 in the middle of the course. 269

269

But now after a couple of years, 270

270

it was time to fully move to modern JavaScript. 271

271

However, it's also super important 272

272

to learn how some things used to be done 273

273

before we had this fancy modern JavaScript. 274

274

For example, in this section, 275

275

I already showed you the modern const and let 276

276

for variable declarations, 277

277

but also how we used to use Vue before. 278

278

And there will be many more examples like this, 279

279

but why butter with ES5 at all? You might ask? 280

280

Well, here is why, 281

281

first, you will better understand how some features 282

282

in JavaScript actually work behind the scenes. 283

283

For example, ES6 classes, 284

284

which had all the implementation details 285

285

of object oriented programming in JavaScript. 286

286

Also many tutorials and example code 287

287

that you will find online are still written in ES5 today. 288

288

Plus, as a developer, in many jobs, 289

289

you will actually have to work on older code bases. 290

290

And it's totally possible that that code base 291

291

might still contain a lot of ES5 code. 292

292

Okay. So hope that made sense. 293

293

And that's it for this lecture and for the section. 294

294

So see you in the next one.