Paying the Babel Tax

[00:00:00]
>> Steve Kinney: One of the most powerful tools for a transformer code these days is Babel. And Babel has some ups and downsides. What I kind of wanna talk about real quick is this idea sometimes called paying the Babel tax, right? Babel, for those of you who don't know, is a tool that basically allows us to write future JavaScript and transpile it into JavaScript that will work in older browsers and sometimes modern browsers.

[00:00:27]
We saw the import syntax before, it's not technically in the language yet, but I could use it. Because Babel will let me write future JavaScript, turn it into JavaScript that will work in today's browsers. Or turn today's JavaScript into JavaScript that'll work in previous browsers. When I was a kid, you couldn't use all the cool JavaScript features cuz IE6 didn't support them, right?

[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?

[00:03:00]
Some classes in JavaScript was to say, function point. Hey, it's that example again.
>> Steve Kinney: Equals x, thus. I think that's gonna be a thing I wanna start doing in my JavaScript, thus! [LAUGH] So let it be. So we could have a function like this, and we could say new point.

[00:03:27]
>> Steve Kinney: And this is like, try it into your JavaScript, there's not a lot to do. All it really does is put a ustrix statement on top. If I change this real quick though and we say class point,
>> Steve Kinney: You can already see this is getting a little out of hand here.

[00:03:57]
>> 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.