Using Modern JavaScript Features

[00:00:00]
>> Maximiliano Firtman: From ES1 to ES5, we were using numbers to version the language. The next one was ES6. We also used six as a number, but it was the first year of this new pattern of creating one version per year. So that's why it's also known as ES2015, the year that it was released, okay?

[00:00:24]
From there, now we have an annual version, and now we can use the number or the version, both. But most of the time, we use the year number. So we don't talk about ES14, we talk about ES2024 or ES2023, okay? But ES14 actually exists as well as a version number to make things more complicated, okay?

[00:00:56]
So this is important. When we are talking about ECMAScript versions, we're not talking about platform APIs. So platform APIs are, for example, IndexedDB for database access, or the Fetch API, or how to access Bluetooth, or local storage, or Node.js file system API. We're not talking about that. This is just the language, the core language, and not actually APIs that you can use on one platform.

[00:01:27]
Those APIs are defined by other committees and other organizations. The most common one is the W3C. In the OpenJS Foundation, you can find a lot of Node APIs. And also, there are other organizations, for example, for WebAssembly, WebGL, WebXR. They have their own committees, their own foundations, creating the standards for those APIs, okay?

[00:01:53]
So today we will talk just about ECMAScript, the core language, not the APIs. There are other courses at Frontend Masters where you can find a lot of information about the platform libraries on Node or the browser. There is only one exception to that, is that we do have the internationalization API.

[00:02:19]
That's the one that will let you not translate your code, but actually understand the language differences. For example, for numbers, what's the thousandth separator and the decimal separator? Is it a comma? Is it a dot? Or how the date format that we should use for different countries, like, it is month, year, or month, day, or day, month, things like that.

[00:02:47]
But that's also an ECMA standard that goes on Node.js and the browser, and it's ECMA-402. But it's a different, it's a separate committee, it's a separate process that is right now creating versions as well. But all the rest of the APIs that we have in the browser in Node.js are not ECMA-based, they're based on other standards.

[00:03:13]
And sometimes there is a name in the community known as ES.Next. I'm not sure if you're aware of that, ES.Next. So it's a non-official name, actually, to talk about features that will be in next version of ECMAScript. Typically, they are in stage 3 or 4, or from this year, maybe in 2.7, the new stage that they have created.

[00:03:36]
So meaning that when they are there, they are approved. So it's 99.9% that we kind of be sure that it's gonna be there in the future, okay? And because they already have the recommendation standard spec, so it's probably not gonna change. In that case, because it's almost guaranteed that they will be implemented in the spec, and that means it will be implemented in browsers, for example, or in Node.js later,, if we like that, we can start using it.

[00:04:07]
And sometimes even some browsers may already support some of those abilities, which is kind of interesting. The problem is that how to use modern ECMAScript syntax. It can be ES2024, ES.Next, I mean, the next version today, because we have all the range lines there. There are typically two solutions to this problem.

[00:04:30]
We can use polyfills or transpilers. What's a polyfill? A polyfill, it's a JavaScript library that is trying to fill a hole, fill a gap, and it's emulating the new stuff. In this case, polyfills are only available for API changes, new methods, as we mentioned before, not new operators, because you cannot change the language.

[00:04:58]
You can add a method to arrays and emulate a new behavior, but you cannot create a new operator in the language. And transpilers are typically the way to go that will solve the problem. What's a transpiler? Probably, you have heard about transpilers or you have used them. It takes one source code and it creates another source code in a different version.

[00:05:22]
So for example, let's rephrase that. So they will convert modern code into older code, and these transpilers talking about ECMAScript, okay? It can be ES6, ES5, ES2020, you pick the target, okay? The most common solutions out there are Babel. That's probably the one that you have used, even if you don't know that you have used that.

[00:05:50]
For example, if you have used React, Babel is inside, okay? So TypeScript is also a transpiler. I mean, you can use TypeScript to just write JavaScript. Not really, TypeScript is a strict superset of JavaScript, and you can use TypeScript to transpile code. We have a question.
>> Speaker 1: Is the TypeScript language regulated by ECMA and all as well?

[00:06:21]
>> Maximiliano Firtman: That's a good question. So TypeScript is not regulated by the ECMA-262 of the TC39 committee. But TypeScript is a strict superset, which means that it's ECMAScript plus something else on top. But it's a different language, has its own separate process and committee, and each version of TypeScript typically is based on one version of ECMAScript.

[00:06:49]
So they say, okay, TypeScript 2.0, just giving you any random number, is based on ECMAScript 2015. So they have that, plus all the things that TypeScript is adding on top. But you can use the TypeScript compiler to compile ECMAScript, not TypeScript, because it just works. Also, you have ESBuilder.

[00:07:13]
That's another one. It's actually a builder, it's actually for bundling files, but it also transpiles code. Also, you can use plugins here when you use transpilers. Those plugins will even enhance the language with non-standard features, for example, ES.Next. So you can start using features that not yet in the standard today, or JSX.

[00:07:45]
If you have used React, for example, JSX is the ability to use kind of XML, HTML within JavaScript. So you open angle brackets in JavaScript, okay? And that's not ECMAScript-compatible, but with these plugins, you can use it. And of course, you need to compile that, transpile that, into something else.

[00:08:08]
So with a transpiler, for example, you can write ES2024. And then you go through the transpiler and you get a different file, and you deploy ES2015, or you pick the target, okay? Any number will work. Or you can write ES.Next and JSX. You go through the transpiler, and then you deploy ES5 that will be compatible even with IE6, if you wanna target 100% of the population, including some old corporate users on IE 11, okay?

[00:08:47]
So transpilers are our, say, helpers, our sabers here, so then we can write code in latest version of JavaScript using the latest techniques. And then we go through the process of transpiling before publishing it into the server. Also, there are some cloud-based providers these days where you can transpile on the fly.

[00:09:14]
So you just deploy your ES2024 file. The cloud itself, I mean, the hosting provider, will do the transpilation for you to whatever setup, whatever configuration you set, like ES5, ES16, or ES2020.