Transcript from the "Paying the Babel Tax" Lesson
[00:00:49] You knew there was this better life that you couldn't have [LAUGH] because of this. So that still is the case in a lot of cases, but the fact that we can then, behind the scenes, turn it into code that works is really great and lets us really kind of move quickly and makes web development a lot better.
[00:01:05] But this isn't always free, and it's sometimes a tradeoff. So what I wanna kinda show you is I have this little repo in here. Let's actually kill this one.
>> Steve Kinney: I'm actually gonna pull it up in a browser. If you go to Babel,
>> Steve Kinney: And we say, try it out, you can see this little repl where you can type in some code, and you'll see code that pops out the other end.
[00:01:43] And so, we can see some relatively simple things, like okay, I can have,
>> Steve Kinney: An array, let's make this font a little bigger, not that big.
>> Steve Kinney: And if we use a 4H, we can say array.4H, I can use a fancy arrow syntax,
>> Steve Kinney: Which is not supported in some browsers.
[00:02:11] And you can see it turns it into the more traditional syntax.
>> Steve Kinney: I can also use a brand new for of syntax, maybe like for (let number of array).
>> Steve Kinney: What do you notice on the other side?
>> Speaker 2: A lot more code.
>> Steve Kinney: It's a lot more code, right?
[00:02:39] That is a lot more code. And that means this code has to be parsed, that means this code that has to be shipped, right? And yes, this syntax is pretty cool, right? And some of my other browsers can support it, but there is a little bit of making that decision, right, the old way that we could, right?
>> Steve Kinney: You can already see this is getting a little out of hand here.
>> Steve Kinney: Actually, I think I copy and paste that code.
>> Steve Kinney: We can see this is multiple lines of code. And that repeats over and over for every class that you do. You'll have this extra line. You'll add more to your files, right? So there's a bunch of ways to do this.
[00:04:16] One is kind of stuff like arrow functions, those are nice template strings that aren't gonna create a lot of code. Things like async await use this thing called regenerator runtime, which is pages of code that you're gonna shift in addition, right? So sometimes, you have to weigh the trade offs, what is it doing to the size of your bundle?
[00:04:32] And how do you figure out whether or not this is problematic? You measure it, right? But some of these tools, not everything is free, and if you're not being mindful, you can theoretically end up paying a tax on a lot of these things and having adverse effects on what you were trying to do, right?
[00:04:48] So it's always important to just kind of keep an eye and measure a lot of these things.