#79: Why Babel Belongs In Your Build /w Kurtis Rainbolt-Greene

That’s pretty good. I think it’s still like to

E had all

Yes, I am. Well, thank you so much for having me on. It’s It’s a pleasure. I’m excited to talk about this sort of stuff. It’s it’s kind of my passion, uh, language design, that is, General. Um uh, I still consider I consider myself in all tour, uh, of it. And Babel is sort of like a passion of mine in terms of your your

feel that I look my you know, my first language ever was a thing called much code. Have you either? Have you heard of that? Ok, alright. Is gonna e won’t go on the huge tangent, But like, Okay, in the eighties, there was a type of game genre game. Much, much, much much is okay. Okay, So the link the servers themselves were See your java, right? One of those, too, right? But they had built in domain languages that players could write and execute on the machine.

Uh, e remember those? Yeah, they were terrible. So, like, they had a couple of incredibly strange qualities. First of all, they were They were sin. Tactically, they were as expression. So you know what that means? It usually is. Ah, parentheses. Followed by a word on. Then followed by multiple things. So, like, let’s say you have a function called add and it takes two numbers. You would have open parentheses, ad space, one space to close parentheses.

That’s called an s expression. That type of syntax lists have s expression, a syntax. Generally they were lisp, so, strangely enough, but they had other oddities, like you couldn’t define variables except for ah, list of 16 registers. So it was old school in that regard, right? That you had you manipulate these registers. No white space was allowed, So yeah, you couldn’t do no new lines. It’s all one line. Onda holds the others just strange.

Oh, it also had the strange JavaScript. Like, uh, oddity of, uh, if something was malformed about the syntax, it just treated that it as a string. So if you wrote something wrong, that chunk chunk code would just be considered string. So, like if you had ah bunch of code to determine how to get your first and last name. But that code was malformed. That was not your first name. But that coaching code was now your first name.

It was really bad. So when I got writing real languages. Alright. Like these professional images. Ruby Haskell er lang, Right. Uh, it was like, Oh, wow, you condone You don’t have to, like, have an editor un compact, the code before you edited. So language design just became something I loved.

Yeah, so that’s that. That was the other just strange oddity of that genre is, um you would also be encouraged to write code outside, do the game for you. Um, where is in modern game development or modern gameplay? That’s extremely cheating. And yeah, it was It was a strange world that I quote unquote grew up in

knew they were things, and I knew

Sure, but before I do, I would love to hear what each of you think. Fabulous. What do you think it does? Because So the reason I ask is because it’s a very multifaceted tool that most people don’t even use 10% of what do you What do you use it for? I think there’s

That is actually a very good description. Yes, that is, I have used

eso yet trance pilot, his word trans compiler is also the same word there synonyms, and it kind of relates the idea of compilers. Most people do exactly that you all have done. Are they just They don’t even interact with it. It’s part of the bill chain. Maybe someone instead of a Web pack that has it. Or like. Or maybe they’re interacting with a library that uses it to build. It’s

Yeah, in many cases, it’s described as a build tools, right? So it is, by definition, two things, uh, a cyst compiler and a trans compiler. And those The first bits of those words were pretty important there the Latin words CIS and Trans, and it means the same side and across, like transatlantic or ah, cistern, for example. The tool itself can be can be utilized in both ways. And those air two different, um, diametrically opposed ideas, right?

Uh, system piling transfer. So I’ll give you an example of like when it’s a CIS compiler. So since Kabbalah is something that takes source code right and generates it compatible source code on the other, uh, in the copy process, right. So I’ll give you an easiest example of assist compiler you’ve ever used. It’s the command line Tool CP, right? It’s completely equivalent, right?

Hopefully, unless you’re see if he is broken, it’s in fact, the file you come out of it is equivalent of what? When it another good one is es flint just to a tool that yeah, okay. Or any other Linton tool that you’ve used. It reads the source code. And if you’re like using the fixed mode right, it outputs the source code that’s compatible. Another popular example of a CIS compiler, Ugly fire or, in the other modification process, right?

The code is compatible with what you put in. It’s not any it’s It’s different in maybe of the structure or maybe missing some pieces. But it is supposed to be the same program.

Yes, and in fact that is, that is, I’ll come to that is a useful points. Transpire, however, is really fun concept, right? So the idea is that you don’t have that parody and specifically the source code that you put it and will be fundamentally incompatible with a source security. Now that doesn’t mean that you lose parity. In fact, you may retain parody. You might gain new ability, you might lose some ability, or it might actually function the same.

But it’s not the same language, right? You can’t read that file with the same interpreter as what it went. So, um, Babel, that that’s all, like, really high fancy level stuff. But But, like in the use case for Babel, the reason why Babel exists is it was original. Use case was because it was called 6 to 5. Its original use was friends compiling es six ts five Yes, standing for Xmas script, the official JavaScript standard.

That kind of deals with the idea of a Web right. People wanted to use new features that we’re going to come out a newer version of the specified Xmas script specifications fix in their modern Web applications in their safaris in there. Uh, well at the time opera in their Internet Explorer 65 10 right. But they didn’t wanna have to manually write the code that would allow them to run on these different, especially in certain cases where, say, Web Kit and blink would have a similar a p I for ah feature.

But the actual like arguments per se a function would be flipped. How do you deal with that? Like that? It becomes a really complicated problem to deal with J. Corey, for example, assed from your LGS episode was was one white people handle this. So originally it was all about turning newer source code into older source code or older uh, a p I s.

you might say, so a trans compiler would include a poly filled library. As part of its process. You wanted it. For example, there’s a one of the one of the Babel specific libraries, his Babel, Polly Ville, which does exactly that as its reading your original source code that uses the fancy new flat map and or the flattened function for array or the new week map and map. A zit reads your source code.

The output source code includes Polly fills in case the library doesn’t have Babel can actually read what you Britain and decide what toe actually include as part of, ah, the output.

Originally, yes, And that’s why it was called 65. But when it changed its name and largely changed hands to its current owners, um, it grew into a sort of like a different beast, right, Because maybe you don’t want toe deal with their next four or five. This was around the time that people started being able to drop the lower Internet Explorer versions, right?

So you don’t really want to spend the extra 20 seconds compiling for a target that you’re never going to generate for right? So what Babel the Babel team did is they built a tool that is effectively. It reads source code. It’s called an A S T T a S t the transformer. A nasty stands for abstract sent checks. Tree. It’s the programmatic code version or data version of what your source code actually is right. This character

absolutely the same idea. Right? Um, in that they’re both They’re also just both trees with notes, right? Oh, this character followed by this character in the context of this, it’s actually a function call in the context of it. So All right, well, that’s all part of the S t. Um, they built an engine for reading source codes, turning into an a S t an abstraction text, and then out putting a nap section tech street to source, right?

And then all the transformations that they wanted. So, like, oh, adding the new array functions or, uh, adding support for the double question. Why cooperator or the safety navigator operator? Those were plug ins into the Babel engine. And that’s where it got really crazy. Because suddenly you could ship an M. P m package. That was a Babel plug in That could do whatever you want it the source code as it was being transformed into what you want.

So I’ll give you a good example of this, right? So in my web applications, I have a really fun Babel plug in called annotate source code. So have you ever written a console log inside of a function? And you’re just like here, you know? And then you don’t think about

your just so angry about the bug. You just took your like here, and then you run your code, and then you see in your log file the word here and you’re like, Wait a minute, Okay? I don’t know where that is. Right? Like that doesn’t tell me anything. This plug in is called Babel Annotate Log. And what it does is it prefixes your logline with all the functions that it’s nested it so you can see a breadcrumb of all the functions that it was called under. And that’s a stack

very minimal version of it, but yes, right, A live one. Right. And that’s just part of the transformation projects. You could doom unification. You could do at a new features. You can create entirely new language with Babel that just happens to come out to job script. And this this isn’t even like a Babel or JavaScript thing. The earliest form of trans compiler was called com 86.

So Intel in the eighties 1978 they had just released a new version of their assembly language called 80 86. Uh, and they had noticed they realized that like, Okay, we’ve sold everybody on this 80 80 and 80 85 88 6 real different, and it’s much better, so we want people to use it.

So they basically made this program to convert old 80 80 and 80 85 80 86. So the original Trans collar A wasn’t called the Trans Compiler on B was actually about upgrading your code rather than the, um, downgrading the code for targets. Right? Interesting. So let’s

and I would. The only thing I would add to that is that one of the bigger there were, there were two big, uh, inflection or a catalyst for this. Like this change. So, Jake weary, covered the A P I layer, right? How does this function get called? What does this function to the normalization of that right across browsers. But what it couldn’t do was really crazy. Stuff like scope or syntax changes, right? It can’t modify your They can’t, like, do this sort of thing in on the run time, B e.

or the inclusion of constant yes or

um, or faking It is significantly a lot more code than you want to do in something like J. Query. Another good example of this is arrow function, right? So they are what are considered closures. Eso This doesn’t apply inside of a narrow function, the way you’d expect it. Thio

was earlier colleges

eso the other other situations where other Semtech changes, like what are called tag Tim put liberals, so you probably use this the back take character by whatever you want, followed by back to character acts, kind of like quotation marks to create a string. But you can put returns in them. You could do whatever you want them, um, those you cannot like. You can’t poly fill those Which a clip. So they needed tooling to do this.

In addition, I would say that s six. Also with one of the callous for es six was the fact that Acma script itself actually describes browser like features and how things behave in browser, which gets really weird when you’re a person who maintains and or runs no Js which has nothing to do with the browser, right? So, like, what do you you know? Okay, So now Acma script is like kind of like encouraged. Hey, we have more than just browsers to think about now.

So it draws a very thick line into the sand about like what it stops caring about. And that is the require the import statement of of something how it resolves it. Um, there are amusingly there are Babel plug ins for doing different kinds of module. What it called module resolution algorithms. Uh, which is to say when you say, hey, require you qualify. You and I know that comes from node module slash Uggla fi slash index dance. Right?

But how does the machine know that, right, So people doesn’t do anything like that. It doesn’t actually dip into the actual requirements. They technically good. But that’s what kind of draws their their the line in the sand. So that’s where you need tools like Web pack. Roll up a parcel because they’re about bundling your code together. Usually one or more files, right? So they dig in and they use Babel to read the code.

The Babel loader, for example, Why pack is what you used to read, Um, so through the Babel Library, for all your fancy plug in something that,

actually, this is a huge contention in mind. There is none. There are no modern language, and it’s it’s actually kind of sad about it. So in Javascript, uh, they just doesn’t exist anymore. You kind of have stuff like Google’s closure compiler. Uh, but that was like a very specific idea of what? Like they want to like men. If I as well as hatch certain build issues, um, and remove dead code right which all of what you can do with Babel, right?

So it’s like kind of like a static package of people’s abilities. It’s just it’s an oddity. And I think it’s largely because of how ubiquitous JavaScript is that it even exists. Um, one of the there’s this great article out there are not article essay called the lists Curse.

And one of the thesis of this essay is that one of the reasons of why list didn’t do well in the same way other languages did is because you could fundamentally change how the language work inside of the language itself. And when you start Thio, tell developers Hey, I can’t think

Yes, yes, yes. When you tell programmers that they have more space to play in, they will play in that space. And it got really hard for to list programs work together as libraries right of each other because they fundamentally had different ideas. Like maybe my language s So there’s a language called I O. And, uh, it had this exact problem, or you could fundamentally change the language.

And it did not have a tin tacks liberal for dictionary eso For those of you who don’t know a syntax, literal is the literal thing you type for the syntax. So, for example, in javascript to make it array, you open a square bracket and you put items that right back commas and then you do a close bracket, right? The idea of putting those brackets with commas between each item is a syntax literal, the in memory of representation.

That is nothing like that, right? I owe. Didn’t have a cent tax literal for dictionaries or objects and jobs groups. You could make objects in memory, but there was no syntax that report. So every io developer made their own syntax in Iot for that, and they were all slightly different, which, as you can imagine, made importing libraries just impossible. Which is why no one uses io. Um, this is called the list Curse, right?

Somehow Babel has avoided this altogether. You just don’t have that problem with people, but it still allows for the positives. Okay, this is for the old heads out there. There used to be a thing called coffee script. Does he remember? Copy script. You may still do, you know? Do you

I remember the guy’s name J E can’t remember where, though.

production, right?

yeah. So they wanted. They wrote they wanted this language. That was, like, javascript that turned into Java script. And they’ve wrote a compiler for it to do this. So it’s kind of like coffee script and typescript. The T s C compiler and the coffee skip Compiler. They’re kind of competitors. A Babel. But they do very specific things, right? Like they’re not. They’re not really competitors. They don’t do what you you’re talking about.

Um, cause they turn typescript to job script, right? At some point, this is before promises and a single weight was available. There was an in a engineer who wanted to add a single weight to coffee script, and the maintainer said, No. I don’t like this idea of top of a single weight, words, keywords, promises, or how I want to do things. And he’s like, if you want me to add it, I’m gonna need you thio like, show me that it’s valuable.

So the person that engineer then decided Okay, This is worth my time. He wrote his own compiler for coffee script called Iced Coffee, right. And then he published it and he tried to get people to use it so that they could try out a sink away. This is before it was like Everybody does this right and no one would use it because, like, who installs accustomed compiler from someone you don’t know that has no support, right?

It is tangentially related to your coffee script. They may not. You may not even be using coffee screaming, maybe just go off script, right? That’s a That’s a lot of commitment for something that has almost no payoff, right? Which is kind of why the coffee script creator said it in the first place because he knew it wasn’t like he wouldn’t have. Okay, it’s kind of like, you know, go sweep all of England and then come back to May, right?

It’s just not gonna happen. Um, that said, with Babel, I can publish an MP impact, have someone downloaded in five minutes, and then they are using entirely new whatever in JavaScript in their code, and it effects no one. It’s compatible with every other JavaScript package of existence. Andi, that’s it, That’s you. That’s that’s a huge thing

it’s pretty Well, yeah, there’s actually a coffee script to I think at some point, because people still use it. Uh, and and they completely I think they completely rewrote their compiler. They may have actually done in Babel. I don’t actually know how to pay attention, but yeah, like it’s a powerful tool that I would love to see. Another line.

I would love to see competitors to people because it would mean that we we can experiment and grow our languages without having Thio Way for Xmas script, you know, 2032 right Thio launch its specifications, all decided by major parties that we almost have no influence on.

Yeah, it was pretty wild. That’s that’s, you know it’s It’s one of the benefits. A tool like label is that it hides all of that pain, like your your basic Babel set up of preset EV. It can go look at your Google analytics for your breakdown of your browser usage and then generate based off of that. That’s where the plug ins that you could get the men.

If I preset has a whole bunch of medication and performance improvements, your code that you just don’t think about you generate that. You generate that, but and then it just happens to be faster. Uh, so just those alone can really improve your development experience.

I would say the Babble website is actually a better introduction to the plug ins that air for production use. Awesome babble is like it also better. Well, we’ll show you some really crazy stuff that a likely doesn’t work for the latest people, and B is just It’s just weird if you want, like like work level stuff to show ah manager or or lead developer about how we should be using this tool, I would go tobe able Babel’s website itself.

It’s got great documentation showcasing everything down to the lowest detail. Shout the F A Q. And the troubleshooting is bar none, and the committee itself is actually very friendly.

yeah, the the Babel team, the es lint team. The types typescript team are all very, very close knit people. They’re working on similar problems, right reading STDs and I’m doing here. So there’s a lot of, like, cross pollination there on. As as you can see, the typescript website and the baby website in the U. S S r just fantastic, right?

I used one. I didn’t I didn’t build it.

It’s called Graf’s nice for for any of

I think my favorite is S O. If I If I can’t pick taco script, which is like a whole collection of them, um, which I genuinely hope people look at the check out, I would have to say the pipeline operator plug in. So in the next version of ECMO script, I think it’s here too now or two year one. Which means, like I’m generally accepted. Uh, there’s gonna be a pipeline operator for JavaScript, right? So pipe this value into another value.

It makes a lot of function calling change. So if you’ve ever gone like a open Quincy’s, be open Princz open Quincy’s. That’s out of, like Nesta heaviness of codepipeline operators. Make those little B. There’s three proposals to the T C 39 team, the people who run back in the script like a proposal session, and they all have Babel plug ins that you could just step, install and start using immediately. And I love the pipeline operator.

It’s my favorite operator. If I had to pick a operator in a language, it sounds were really weird. Nerdy toe like it’s my favorite one because it just makes a lot of my code real queen, and you just pipe it in on and immediately start using it on bond. It’s just cleans up so much code. Mhm,

A lot of these plug ins will actually also do performance improvement stuff on like people has, ah, modification program modification. Plug in that does performance, and you could just read that output and you can see some really cool stuff that’s like, Oh, I didn’t know that I could do this on It would be generally faster than what I was already doing.

great example of this is just one off scripts don’t need it or incredibly simple, uh, JavaScript packages like the is even package or the Izod package, for example. They don’t use it. They don’t need it. If you’re doing stuff for a very specific platform like electron, where you know the note version and the browser version that’s going on probably don’t need it, although again you’re missing out on typescript, you’re missing out on, uh, unification right e, I would say there, instead of saying that there’s that’s that’s from the user’s perspective.

From the language perspective, there is no into Babel unless there is an end to the evolution of JavaScript, right? And even then, there are like 12 or 20 different Babel polygons for making react or performance or doing things with react components or right that are playable. Plug in. So even if your language stops evolving, that doesn’t mean you won’t have libraries that come out that people can help with those things. So that said, I will reverse sort of, like, mutate.

The question here is like there are times when languages are stifled from needing. If that’s the right word, right? Like you, you don’t have to have a verdict. Garden. You can have a normal garden, right? It doesn’t have to be overflowing. Right? Uh, I think when the language is doing well, when it has tools for introspection like s t uh ah, readers, Uh, then you get things like Babel eventually anyways, So javascript needs to run in a lot of places, right?

And that gets hard to handle on JavaScript itself moves right. So now you’ve got, like, heavy matrix of like, hey, I’m running on servers also browsers and those browsers have old versions and any compatibility. And there’s new stuff coming out word that packages will wanna have. So you need some tool like that. But if your targets are simple, like ruby elixir, uh, PHP python, You just deploying to a server in a container, you have a very controlled environment.

You may not evolve that tool because you don’t have in this, but I still think it’s valuable for that Languages in closest,

born and raised in New Orleans. All right, Okay. Lets her

Sure, it’s been an absolute pleasure. You can probably reach best. Reach me out to me if you want to talk to me on Twitter cream Bolt green I talk about I talk a lot on Twitter, though, so before warned, If you follow, you will get a waterfall of tweets. But I really don’t have anything todo about about somebody else’s something.

Uh, there’s a great new game that came out called. Per Astra is incredible, a beautiful game where you play as an ai terra forming Mars. Uh, that’s per aspira, and it is. It is stunningly beautiful. There’s a voice acted, uh, dialogue. Siri’s where you grow as an ai toe. Understand? You know your role in terra forming. It’s fantastic. It released its not expensive. It’s like 30 bucks. I think I whole hearted really

ever watch that