Complete Intro to React, v2 (feat. Router v4 and Redux) Babel Configuration

[00:00:00]
>> Brian: So, Babel is a really awesome tool that came out a couple years ago. It was called Six to Five for a while and it was written by an Australian high school kid which just makes me feel woefully inadequate. [LAUGH] And basically what it does is it takes future JavaScript, right, ES6, which was at the time future JavaScript, it still kind of is.

[00:00:22] And it compiles that down to es5, which about 98 or 97% of browsers today understand, right. So it takes this future JavaScript and compiles it to older JavaScript. So that you can write the new syntax and enjoy in all that funness and productivity benefits. And still ship code that can run in every browser, right?

[00:00:45] I think all of us have tried to ship code that doesn't work in this version of mobile Safari or something stupid like that. I have, I have that problem a lot. More than I care to admit. So that's what six to five was. They decided that that was too limited a scope, that the project itself was too useful to just be limited to just Six to Five so they renamed it to Babel, and basically made this platform for transforming one type of code to another type of code, right?

[00:01:14] And that basically said okay, here is these plugins. Transform this particular code in this particular way to this output, right? So they did that, they included all the plug ins to make es6 into es5, right? And that's all super useful, but they've also now opened this platform up to be able to transform many different types of code, right?

[00:01:41] So one of the things that they allow you to do is they allow you to transform JSX, which I haven't talked about before but we're about to talk about. Which is not standard JavaScript, right. It's not part of the JavaScript language, it will never be a part of the JavaScript language.

[00:01:55] But they allow you to include these kind of custom transforms yourself. I mean you can go as far to write your own macros if that was something interesting to you, not that I would suggest it but it's a very very powerful tool and surprisingly easy to write like I'm not a big computer scientist by any mean, but writing a Babel plug in is not too bad.

[00:02:17] So amazing tool. And that's what we're going to be using today. And basically, if you're not using Babel today in your production code, I would suggest it at least exploring it for your team. I think it's pretty phenomenal. And I would say it's battle tested to all hell.

[00:02:40] Like Netflix uses it in production, Reddit used in production, basically every Silicon Valley company that I can think of uses Babel in production. So it's okay, you can use it. Any questions about theoretically what Babel is?
>> Brian: Cool, so the first thing we're gonna do, Babel ships with no configuration of its own, right, it doesn't know, basically it's just a dumb thing that doesn't do anything until you give it plugins to transform the code, right?

[00:03:11] So you have to tell it like, hey, I want you to transform the code in this particular way, which we need to give it a configuration file to do that. So we're gonna create a new file, inside of the complete intro to React root directory, and it's going to be called .babelrc, you must call it that.

[00:03:29] .babelrc. Okay, save that. Yes. Use dot. Okay, and it's going to be a JSON file. So you have to adhere to JSON standards. Okay, and we are going to give it two presets.
>> Brian: Okay, presets, and that's gonna be an array. The first one is going to be react.

[00:03:57] And the second one is going to be another array, with "es2015", with an object "modules": false.
>> Brian: So React has, or sorry Babel has two concepts. It has the concept of a plugin and it has the concept of a preset. And all a preset is, is just a group of plugins.

[00:04:33] That's all it is. So in this particular case we have es2015 which is all the transformations necessary to get from es5 to es6, es6 to es5 rather. [COUGH] So it includes all of those plugins, right? There's a plugin for generators. There's a plugin for arrow functions. There's a plugin for let and cons.

[00:04:58] There's a plugin for all of these different transformations that need to happen to go from es6 to es5, right? It's very convenient to just throw, it's like, hey, just give me everything from es2015. Don't do that in production. [LAUGH] This is okay for development.
>> Brian: It's okay for development.

[00:05:20] But the reason why this is not okay for production, is it includes a lot of polyfills. And a lot of extra code to get that es six code working, and if you're not actively using that code, you're just shipping crap down the wire. Which you don't wanna do, right?

[00:05:34] You wanna keep your production bundles as small as possible. Like for example, this will include the generator polyfill which is like 50 kilobytes? Something like that, which is just, if you're not using it, then dear God don't ship it down the wire. So what you would do instead, you would instead include plugins.

[00:05:55] You don't have to do this, I'm just showing you. Which would be another array, and you would just put all the different plugins that you actively want to include, right? And then don't include anything else. But because this is just a fun app in we're just doing it because we wanna learn or we're just going to include all of it.

[00:06:15] Okay. What React is, this is all of the JSX transformation so this is going to allow us to write basically kind of an extended set of JavaScript, which is going to compile down to readable ES5. And I will show you momentarily what that actually is. But, suffice to say it's just another group of plugins to get us to ES5.

[00:06:36] Okay, let's talk about this array since, you didn't know I could talk for so much about six lines of code, did you? [LAUGH] I'm good at that. Okay, so let's talk about this particular line. So when you give it an array, this is just basically saying like, here's a configuration object in addition to the preset, and we're gonna say, do not transform the es6 module imports, right?

[00:06:58] The reason why we're doing this is specifically for webpack two, because we want webpack two to take care of the modules, and not Babel. Otherwise, Babel is going to take care of your modules for you, which for the most part is fine. But specifically with web pack two, and roll up js, if you're interested in that packager, you want the packager to take care of the modules because they can do tree shaking right?

[00:07:20] Which basically says only include code that actually gets run. So that's why we're doing the modules false. Yeah.
>> Speaker 2: Travis is asking if you add plugin then you're limiting it to just those plugins?
>> Brian: Precisely, which is exactly what you want. Okay, so modules false, that's why you wanna do that.

[00:07:42] Otherwise, it's gonna be packaged in such a way that Uglify cannot take out code, right? I mean, you want Uglify to be able to strip out code that has no potential way of being run, right? So again, this is going back to tree shaking. And tree shaking is another term that, it is synonymous with live code inclusion, which is different than dead code and elimination.

[00:08:10] There's a little nuance there. But also, I don't get why tree shaking and a live code inclusion are the same thing. It seems like that's kind of counter intuitive, but it is, I promise. That basically, Uglify is going to go through your code and say, we can never go down this code path like, based on what I can tell about this code.

[00:08:27] We're never gonna go down this code path, and don't include any of this. So it only includes code that can ever get run. So that's why we're doing this. Any questions about that?
>> Speaker 2: So question from Bryan. Does the React preset work for production?
>> Brian: Yeah. No, that one is fine.

[00:08:46] It's only like 4 or 5 plugins whereas the es2015 one is like 40 plugins or something. I'm making that up, it's a large amount of plugins. That's a good question. Something else we're gonna do real quick here, and I leave this up to you whether or not you think it's a good idea or not.

[00:09:05] I'm gonna say "loose": true. Now what is loose? By default it shifts what these plugins that adhere to the JavaScript's spec exactly. At the cost of making it much larger and much slower, but it's going to adhere to every last iota of this JavaScript spec. And when I say that, what happens when you call array.iterator or array.from with a dom list that's empty, right?

[00:09:38] These crazy, crazy edge cases that they have to provide for but you're never gonna hit, right? So what loose does is it leaves out all those crazy edge cases and just includes the fast smaller polyfills. I'm personally okay with this because it cuts down on my bundle size a lot and I'm not going after those crazy edge cases.

[00:10:04] I will say if you hit one of those crazy edge cases, you will regret doing this. [LAUGH] So be careful.
>> Speaker 2: Question from Michael, are you giving some error about unused code when the tree shaking occurs?
>> Brian: No, cuz it's not really an error, right? For the most part, you don't write code that's not included.

[00:10:25] if you're writing code that's not included, you should just delete it, right?
>> Speaker 2: The question might not necessarily be specifically error, but message indication, something?
>> Brian: I don't think so, because it's gonna be eliminating a lot of code from your modules. Which is actually what you want. And I think that would be really noisy.

[00:10:42] So I don't think so. There might be some debug way to run webpack, but I don't know what it is.
>> Brian: So, a distinction I should make. We have kind of three tools at work here. We talked a little about webpack, we talked a little bit about Babel, and then secretly there's also Uglify running which webpack includes in and of itself.

[00:11:05] So you have Babel that transforms your code from es6 to es5. By saying modules false we're saying hey, leave the import statements alone and let webpack worry about that. So that's why I say modules false it's like hey, you don't have to worry about this. I'm gonna let webpack worry about this.

[00:11:21] Webpack picks up and bundles all of your code into such a way that it can still be run, and then what Uglify is going to to is it's going to through and wipe out all the code that doesn't get used, and then uglifies, concatenates, all that stuff. So, does that make sense kind of the progressions of tools that's going on here?

[00:11:40] It's kind of convoluted and not intuitively obvious, especially when something breaks and you don't know which layer it broke in. But for the most part, you don't have to care about Uglify, right? Uglify is just running in the wings and is super old and super well-tested. So, it doesn't break.

[00:11:57] I've never had an Uglify problem before. But, yeah.