Let’s start out 2021 with a bang, and dive into how Babel fits into your build process and tool chain. To help us out in the discussion, we’re joined by software engineer Kurtis Rainbolt-Greene to lend his expertise to help us learn not just how it helps transpile or minify code, but the history behind the process and why it’s so important to the future of JavaScript.

Followup Resources

Transcript

The following is a machine-generated transcript of this episode. It will contain errors until it has been reviewed and edited, and we apologize for the difficulty that may cause for screen readers. Do you want to help us speed up our transcribing process? Consider sponsoring an episode.

Hey, everybody, Welcome back. This is the season 4 premier of The Drunken UX Podcast. I’m glad you’re here, and I am your happy, scotchy host, Michael Fienen.

I’m also glad you’re here. Actually, I think I’m more glad that you’re here because I’m your other other host. Aaron, How you doing, Michael? Why aren’t you as glad as I am?

Because I really at the end of day, when you’ve got a beard like this, it’s just to hide all the sadness in my soul. It’s the way I hide, Hide my pain. Listen, it’s not that I’m not as glad it’s just that I’m incapable of feeling that amount of glad folks. If you would like to check us out, be sure to go find us on Twitter or Facebook at slash drunken you X. You can also check us out on Instagram that is that slash drunken you x podcast.

If you want to chat with us any time, go by discord, you can find us a drunken you x dot com slash discord that will get you all of the invitee stuff that will drop you into that channel. If you’re enjoying the show, be sure to run by our sponsors over at New Cloud. You can check them out. Drunken. You x dot com I’m sorry. nucloud.com/drunkenux? God, I’m starting off already backwards. This is not not not my best foot forward. I apologize.

That’s nucloud.com/drunkenux? Uh, a lot of words. Whole lot of words, man. Let’s see, I’m drinking tonight. I was gonna bring up some really, really special scotch. And because I thought its Season four premiere, I thought that would be worth it. I just didn’t feel like it. So I apologize. S I’m drinking lockable in 16 tonight. Great fun. I love the

bottle that upstairs.

I don’t drink a lot of Iowa, but I love log Will in 16 get all that smokiness without that, Really? You know, dense, medicinal flavor that iodine flavor that comes out of an art bag. Or, uh, Freud or some of these Bowmore Bowmore isn’t quite as bad about it. This is just I’m Nick Offerman, man. I’m drinking a campfire. My the funny part was before we started recording had started myself a glass.

I went and took a sip of it in my brain. I’m like I’m drinking scotch and in my mouth they went, Yeah, you’re drinking Scotch. But you forgot you ported, legible, and it was like a a moment I had a moment there or it punched me in the face a little bit.

E. I’ve heard it described as smoky band aids. I drink it anyways.

It’s there. It’s you know, if I had to say, I I get the Band aid thing because the iodine content in this is lower, and then the phenols or lower it doesn’t have that really strong medicine flavor. In fact, if I was Thio, categorize it. It’s maybe more of a pine flavor to me. Not like the

look for that next time.

Not a gin flavor, mind you, but there’s just that sort of like evergreen tree kind of backing to that smoke that comes through okay? I quite enjoyed. I’ve almost finished this bottle. I’m not gonna promise to finish the bottle tonight because I want to finish the episode, so Well, keep an eye on that. What do you got over there?

I have the brought out the valve in E American oak.

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

double. Would better. But this one is not bad.

Yeah, that makes sense. Balvenie was his known for that double would. And the American oak almost feels like a lie. A little bit for them. So joining us this evening, we’re kicking off this thing this year this season, year end season, because that’s where seasons work.

E had all

of these little jokes and and things about it that we’re talking all about. Babel. Uh, and the reason that I made those jokes is because babble was all about languages and all about saying things in different ways. But I’m not gonna make those jokes because

you might say that we’re battling about.

Yeah. See, that was one of them. And I didn’t feel good about saying that on air. I’m glad you did.

You that way. You crossed it off on the notes, but you’re trying t o.

I couldn’t bring myself to make that that that joke.

That’s what I’m here for, Michael.

The fall guy. That s so to that end, we brought in a special guest for you to kick off the season. Who could help talked Not just do you about it, but to us as well about it, Curtis, Rainbow Green is coming to us over from the wild land of the Pacific time zone for a change, I we don’t go west very often as it occurs to me. Hey, is the senior software engineer over Media Arts Lab Curtis, Thanks for stopping in.

I know you love babble. You love Ruby. You’re getting into a new language, right? That we were talking about elixir.

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

farther along than me then because I wouldn’t even say that about anything. I do. Quite frankly, I’m one of those folks that I muddle along, and I just really My my degree is in theater, so acting is kind of what I do best. So I just act like I know what I’m doing. Most of the time, I

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.

I don’t remember writing mush scripts, but I remember using them or or maybe I don’t know, it was mush or mud. But I I remember playing in muds with my friends, and we, uh, one of them had, like, a like macros or something that they would do thio, like, just do farming and stuff.

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

Yes. So let’s use that as a jumping off point, because so tonight we’re talking about Babel and and what it does and why you should care about it and the role that it plays in your tool chains. And I think while probably a lot of people, regardless of their expertise level, have probably heard of it. I’m not gonna guarantee that most folks understand what it really is.

And I fell into that camp several years ago when we first started playing with pool chains and and build processes. I remember all of this like hearing these words babble, gulp, yarn, Web pack or roll up or parcel, or some of these And I

knew they were things, and I knew

they interacted. But I had no clue, really what they did until I spent a lot of time with them. So I mean, what is Babel itself like, How would you describe it to somebody who hasn’t used it?

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

a lot of

can I go first because I’m probably wrong.

No, no. Yeah, Go ahead. By all means, you’re the fall guy. Remember?

You could be incrementally better than may. Um, I have never intentionally used it, but I have worked on things that used it. And the explanation I was given was that it, like access, kind of like a Rosetta stone for different JavaScript. Things like typescript, Essex, etcetera. But I have no idea how.

It’s not a real bad description of it.

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

the words and fell upwards. I used them pretty interchangeably, whether it’s because I don’t really know, like I say trans pile er, I don’t know that that’s a really word, or it’s one that we’ve just made up. Some people say trans compiler, I know that. But Erin, your are definitely right in terms of its job is to take the stuff you’ve written and rewrite it. That’s what babble does. Ultimately,

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

always the thing somebody else set up for you.

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.

Parody is award that I think it gets thrown around a lot like the code has parody with what went into it.

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.

So if I throw the word poly fill out there, that might be something maybe folks have heard of or used, even in some cases where sometimes we think about these things in those terms where oh, browser X I E 11, for instance, doesn’t support you know this feature I need. So I will use a poly fill, which is basically a function that you can include in your JavaScript that makes that function exist.

It duplicates the functionality, but in a way that is compatible with that particular browser. Is that fair for me to kind of compare sort of what some of it does,

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.

So let’s, uh, is it fair to for me to sort of qualify this? As you know, babble is all about backwards compatibility, basically letting you write current code that we know will work regardless of what browser the user is implementing. In that case.

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

a dom for code? Basically, absolutely,

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

a e, like 80% of

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

trace, right? Yeah, that sounds like a stack. Trace a

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

back up here for just a second, because I wanna lean on something you said, but I want to make sure that it resonates. I guess talking about 6 to 5 s six is a phrase that I think people here from time time, when looking at Java script or s 2015 in some cases, which is the same thing. Um but But when it comes to JavaScript, I think there’s a a lot of confusion.

Still, because of the relationship between what we call em a script and JavaScript and how those two things relate, I want to take a second and just kind of explain that I guess eso that folks understand. Like what? What we’re talking not just what we’re talking about, what it is when they see it happening in their code and when they see like because I think it’s zoo in one of the babble config settings you can set like the the level of compatibility you want.

You want it to be s six or s seven when we talk about Java script in particular, JavaScript is an implementation of the HKMA script standard. Okay, Eso there’s ah company literally called Emma. My industries, I believe, is there is there name and they come out with this standard and they say this is the way a language should work for this. And JavaScript is the language that implements that standard, which was fine for a lot of years.

because the Internet moved slowly back in, You know, the dark ages of 2000 and three. Uh huh. When we got up to what we call, uh, s 2015 or yes, six, that represented a huge update to the JavaScript standards. So I love talking about Jake weary in these context because part of the reason why I say Jake weary existed and Curtis you alluded to it is, Well, you know, J Query came out because people wanted to doom or they wanted to do things that JavaScript couldn’t do consistently.

And so, Jake, where he came out and said, Hey, we’ve solved all these problems, load our library, and you can use our functions. And we promise you we’ve done all the work in the background to make sure that it works the same on the different browsers and give you all these new things. So what has happened is since then Beckham industry said, Oh, crap, we need to do better at this. So yes, six came out which represented this giant jump from s five.

And from that point forward, we’re now we now have annual releases every year in June, Enigma releases and update to that spec that has a few new feet. Well, yeah. I mean, it has a lot of new features, a few that people will care about. And so that’s where all of these numbers come in. The reason I think he s 2015 s six get confused is mostly because that was the year of sort of that big jumped this new process that fair for me. That

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.

I think an example of that just to give people a comparison right would be something simple. Like the difference between let and there

or the inclusion of constant yes or

comments. Yeah, that’s not something because it’s syntactical. Itt’s idiomatic seo I love now that I have got this word cooked into me. I love using that word idiomatic because it’s a part of the language. There’s not a way to fake it, so to speak. Absolutely,

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

a narrow function. If you see code where it’s like parentheses equals and then right carrot, it’s literally like are. Sometimes people call them fat arrows. I think that

was earlier colleges

in in Ruby. It’s minus greater than I like to call it Status

tax tabby syntax. I love it. I’m gonna use that from now on. That’s my new word. Stab the syntax,

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 let’s talk a little bit about sort of how this fits into things, right, because we we started off by saying, Or at least I started off by saying, You know, I I knew this word. I knew this name alongside lot of other name Web packed parcel yarn, gulp all these things. How does battled differentiate itself from the other tools that will often be used with it,

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,

and something like gulp, is your task runner. That is the thing that sits in your build process that says, Go run All of these things go execute all of these different tools or grunt Grunt is another one that that some folks will be using. So compare in the space of Babel. What are some of like the best competitors? Because, I note, of course, babbles been around forever.

It’s really the gold standard at this point, but there are some other tools, just like, for instance, if you’re using a static site generator, you know you’re gonna know names like Jekyll or eleventy. But there are a lot like Bridgetown that is a ruby based static site generator that is also in that space. What other names might people come across like babble when looking at something like a transporter? Oh,

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

of another language that does that.

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

know where coffee script originated. Yeah,

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

The New York Times. Uh, food

production, right?

Yeah. I actually interviewed there years ago. Um,

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

I have to say. I do hate the nomenclature. The the adherence to needing the name, everything after variations of coffee in some way, shape or form has driven me nuts. Yeah,

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, let’s let’s talk about like the real and I mean up till now. Ah, lot of the benefits have been sort of baked in tow what we’ve already been saying. But let’s sort of abstract Lee and simply talk about someone like the immediate benefits of including battle in a build chain. First and foremost, I think one of the big things is it’s going to force you to learn how toe make a build chain of some kind have a build process.

A lot of folks, you know, the first Java script you write is gonna be static, flat file JavaScript. There’s nothing wrong with that. But if you want to be a Web developer, if you wanna be any kind of like front and back in developer long term, you’re gonna have to start thinking about how you bring in a lot of other code. And so setting up a very simple build process will become intrinsic to making that be successful.

And once you have that be, including babble is relatively straightforward. Whether that’s, you know, being baked into gulping, baked into grunt, whatever you know your tool chain is. All of this is well documented in easy to find. We’ll have some stuff in the show notes about it, but I think a that’s like the most basic way this is useful to you. But I think more than that.

If you set up a very basic install of Babel in your build process, something very vanilla, very straightforward, with the, you know, very minimum sort of threshold of hurdle. To get over, you’re able to support a lot of stuff without having to think about it. You’re guaranteed. Generally speaking back to about I e. 11, you’re covered, and I 11 makes up.

I think it was like .4% of Web traffic at this. At this point, nobody is really worrying about I e. 10 anymore or before that. So e hope. Oh, maybe

I’ve for gotten about how much my reality was constantly distorted by the fact that I existed at all. That’s why I’m very much glad that those years air behind us because, like the late two thousands, early 20 tens were just beastly.

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.

There’s a whole list of battle plug ins that if you want to go check them out for yourself. Um, it’s called awesome babble. It’s maintained by that same crew. We’ll have a link to that in the show notes. It’s kind of like their staple like these sort of the things that you know you should be paying attention to.

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.

You know, I think that’s worth a separate call out unto itself that I’ve used a lot of libraries over the years and a lot of tools and a lot of just weird garbage, you know, code and stuff from indie developers and and folks who just threw a git hub repo out that did the thing I needed to do in the moment I needed it. The battle website is really, incredibly done, and I don’t know if they have higher documentation, people, technical writers or what have you.

But if any of those folks happen toe tune into this episode and here this just wanna give you, ah, shout give you credit because it shows that they put a lot of care into their documentation. And they know a lot of people use this. A lot of people have questions about how to use this, and they’ve put a lot of time and effort into answering those questions and having examples and things like that. So

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?

Yeah, and one of the big benefits of Babel, as you’ve already kind of leaned into, is this idea that there’s a plug in for everything because it’s been around so long and it’s it’s so well known it. It has benefited from this site. You know, the wealth of resource is out there. It’s kind of like WordPress. It’s It’s the WordPress of that community that somebody has made a plug in to do the thing you need to do. Most likely my favorite have to call this out.

Hey, because I actually I do genuinely like what it does. But the name it’s called groundskeeper Willie. Oh, I have to enjoy this, but I really do like what it does. And part of the role that it serves is, and now I’m forgetting the log of villains hit my brain a little bit can’t remember. Curtis, if you said you wrote a tool to do this or there was one you were using that that I think you built this. That, like, adds information to console.

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

Okay, Um, so there’s that piece of it where you can write your console logs and get information about, like, the file that is generating that log, which is very nice. You don’t have to add stuff to it. You just write your normal council log. But what grounds Keeper Willie does it, I think really valuable is You throw men, you’re writing your development code.

You’re testing stuff out, man through a console, log every other line and make sure every single step of your process works. Its job is to take all of that out for your compiled code, so none of it’s there. I can’t tell you how many times I have left console logs in or you go through. And you you leave them in there, but you comment them out. But all that console logging is left in your code having that ability toe.

Just write a ton of logging and have it all wiped out by your build process is so useful it cleans your coat up. It shortens your code by significant amounts. In some cases, I just

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

us over the age of 30. At this point, I think that’s a funny joke. So I’m taking it.

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,

um, the last like a Sfar. As notes go, the last big thing I kind of threw in here is the thing I really love about a tool like battle is it opens up your learning opportunities because it means you can always be riding the latest code and the latest standards. As long as you make sure that you are writing supported code under whatever the latest yes, Standard is, you can be confident that babble will rewrite that in a way that works for all the other browsers and what that does.

Ultimately, if you do this right, you don’t do that blindly. Which is to say you write your code and then look at what your output file looks like look at the way it rewrote your code because that will tell you a lot about how other things work and how other things interpret stuff. So understanding why your tool? You know, when you look at a couple years ago when we were dealing a lot with, like a wait, a sink promised type stuff, looking at the way that babble rewrote that code can teach you a lot about the way promises, work and and about the way asynchronous JavaScript works.

So there’s a huge learning opportunity, not just in Hey, I can write the newest things. I could go learn the latest standards, but I can also understand better how the old standards work so that I could just write good code. And I think that’s really valuable. It is to me anyway, as somebody that’s right sucky code.

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.

That reminds me of how a lot of C plus plus compilers will, like, optimize your the code that you right, no matter how you choose to write it, it’ll optimize down to the most the fastest version of that code.

Let me end with the hardest question. So as somebody who is an advocate of Babel and appreciates what it does and the features that it’s gotten and what it brings to the table, why wouldn’t you need it? What, what cases come up like to me? And I’m gonna I’m I will say this as sort of the antagonistic that, you know, when I look at Babel, one of the things I frequently think of to go back to the J query analogy is it’s a tool whose job should be to eliminate its own need.

And as we get better at, you know, feature queries in CSS or checking for, like a P I avail availability in in browsers. At some point it feels like maybe we won’t need it anymore, a t least at a base level. I know like because the plug ins could do so much and have such a wide base. Maybe its role changes over time. But what are the use cases where you could tell somebody? You know what that’s overkill or you don’t need that. A

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,

and my advice would be deploy it when you are ready to deploy it. Which is it stupid and and and cliche or what have you? But start by just writing basic JavaScript. Start by, you know, getting yourself comfortable with flat file stuff. What usually will happen is once. If you’re ready to deploy like a build process pipe pipeline, then you’re ready to also deploy battle.

At that point, um, if you are building a very simple site with limited use, and it’s it’s just you, you’re not doing it for work or anything like that. You’re probably okay without it. You don’t need to go overboard in those cases. If you wanna learn fantastic, learn. By all means God, bring it in in in that case, But there is a lot of value to just saying, You know what? Start out right. You’re flat File Java script. Your simple stuff.

By and large, you’ll probably be OK. But once you have to deploy something at scale, once you care about versions, once you care about, you know the ability to roll back or you’re dealing with anything that has to do with money is maybe a good sort of silo to put that in When money is involved, compatibility is important. And so it doesn’t cost you a lot to then throw this kind of tool into your build chain. So that’s my advice.

My advice is coming on the tail end of a bottle of legible in 16. I said I wouldn’t kill this bottle. I have bad news for the bottle. Oh, no, because I did in fact kill the bottle. And I’m sorry, folks. If you will sit tight, hear a word from our sponsor, we will be right back with you.

Normally, this is where I say thanks for joining us and thanks for, you know, staying up late with us. But you’re a West Coast due to the sun is probably still out

northwest or Southwest A. Okay, cool. Miss California.

These highfalutin California guys, I’m Kansas, like the biggest city I know of Has a grain silo was

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

have been down there. Um, Curtis, Man, thanks for staying with us. We appreciate everything you brought to the table. And honestly, I kind of wish I had more time because it’s so clear how deep your well goes, I wanna think into some more of that. So I’m not saying I’m gonna bring you back, but maybe we might bring you back to talk some more about some other languages and stuff.

But for now, what I want to do is tell you you’ve got whatever you want. Take your microphone and tell people where they can find you, what you got going on and what you want.

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.

This is your moment, man. You spend it how you want.

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

recommend it. Cool the checked it out. You should come check us out after you look at per espera. Check us out on Facebook and twitter dot com slash junkanoo x and instant giggles dot com slash junkanoo X podcast and come talk with us about per espera or Battle or Babel Fish or Hitchhiker’s Guide to the Galaxy at drunk do x dot com slash discord

So many references s o many ways. These things all try together. It’s No, don’t. Please don’t, uh did you

ever watch that

show connections, I think, was on PBS?

No, I don’t think I saw that bad geek. There’s a lot of like, I’ve I’ve never read Hitchhikers Guide to the Galaxy Uh huh,

they they connections. So they would take two different, really wildly different concepts like Mongolia and soccer. And then they would connect thumb through a series of like connections. And it was just like every single time. It’s like you just get your mind blown super cool.

That that’s easy because they just find a team where all the descendants are. All the players are descendants of being e mean that Zizi At that point, folks, I hope you enjoyed the episode. I hope this was a good kick off the season for We got a lot more lined up for you, and we’re looking forward to bringing you a much more pleasant, lighthearted and easy to deal with. 2021. That’s the best I could hope to give you. And I hope that you learn something about Babel.

If there’s anything that you’re wondering about or would like to learn, you feel free to reach out to us. Obviously hit us on Discord. Hit up, Curtis. Whatever we can do to help, we would love to teach you about and the thing there’s always have to remember about these tools because there are so many of them. There’s so many names to keep track of. And I know that can get a little bit, uh, you know, hard to manage, hard to juggle and it’s okay.

It’s okay. If that’s a lot, it’s okay. If that feels like you don’t know what all these tools do, let us know, because there are always folks out there who are willing to help you learn those differences and how they line up and how they connect and work together on. And when we work together the most important thing is to always keep your personas close. And Aaron, how does this end? I think I have to keep your personas close, and your users closer.

Welcome to season four, folks. Welcome to 2021. We look forward to sharing the rest of the season. Bye.

This episode of The Drunken UX Podcast brought to you by nuCloud.

Leave a Reply

Your email address will not be published. Required fields are marked *