Transpiling

[00:00:00]
>> [MUSIC]

[00:00:04]
>> Kent C. Dodds: Who here is familiar with Babel? Anybody use Babel before? It transpiles your code or its intention is to manipulate your code. It was originally called Six to Five, where its original purpose was actually to teach this guy JavaScript. That's Sebastian McKinsey decided he wanted to learn JavaScript, so like, I'll write a transpiler.

[00:00:30]
I don't know, and he did a splendid job and called the project Six to Five and people started using it. It became really popular, and then basically all that it did was. Well, all that it did, the amazing thing that accomplished. Was it? It takes the syntax and the features from future versions of the group standard.

[00:00:54]
The standard upon which JavaScript is implemented. And transpiled them, or changed your code back to something that would work in with the current version of JavaScript. With the current group version, which at the time was ES5, well, 5.1 technically. And so, super cool idea, but Six to Five was kind of not always going to make sense because now we already have ES6, we actually have ES2016.

[00:01:23]
And so we're moving onto ES2017 next year and there are features coming down the pipeline every single year. So they changed the name from ES6 to Babel which was actually my choice. I liked that name, I voted for that name. So now it is kind of a general purpose parser and transpiler thing.

[00:01:55]
So you can manipulate your code to be just about anything you want it to be which is really cool. And there are a ton of Babel plugins that allow you to do a whole lot of things, like ES6 is one example. React ES6 Transpilation is a Babel plugin, and then you can transpile specific ES6 features or you can transpile all of them using presets.

[00:02:21]
And pre-sensor collections of plug-in's. And so you can do all this with Babel and it's sweet of plug-in's. So by default, Babel does nothing. You do have to install plug-in's but there are common plug-in's that go together. ES2015 which is awesome known as ES6, but I always call it ES6 cuz that's what it was called first.

[00:02:42]
You can pull that term out of my cold, dead fingers. But the preset is called ES2015. That's the one that we're going to use so that we can write code of the latest version of JavaScript, but still our code can be used by versions of node that don't support those things.

[00:03:00]
For example, destructuring, I think some of you experienced some problems with destructuring when you were on Node 4, setting up this project cuz Node 4 doesn't support destructuring. Node 6 does. I'm trying to think if there's anything else. Yeah, the whole reason of this is because we want to write the latest features of the language.

[00:03:22]
But still be able to deliver to you other older environments. In a small project like this, that's probably not really necessary. This is kind of overkill for a really small project. Like heck, just write any as five and you don't have to worry about this build step. But I imagine that many of you are gonna write projects that are bigger than this.

[00:03:43]
Than this one. And it's really nice to be able to use ES6 modules, and use some of the later or upcoming features like async await and stuff. And so I think this is pertinent to your learning and understanding. So