Modern JS Toolchains (Biome, Oxc + More)

My son is home with pink eye, so that's great.

We're just, like, you know, hoping that the pink eye does not spread.

Oh, yeah. So that's, you know, that's how it is. But, Node, all things could be Wes. You know, there's, I think there's worse kid sicknesses than pink eye maybe. Right? Like, there's no vomit involved.

There you go. Yeah. Node fever JS involved. I think I think we're doing okay. So, yeah, I'm doing alright over here. Yeah. Not a whole Scott. Node. Not a whole lot to complain about.

And specifically, I don't have that much to complain about because I'm learning all kinds of new stuff on the Syntax YouTube channel. That's right. We're on YouTube folks. Youtube.comforward/atsyntaxfm.

Check it out. Subscribe.

We have a lot of content going up there. In fact, CJ has been doing a lot of great videos, really getting deep into some of the topics that we've been covering on this show, like has, or he's, he's going into to Docker or self hosting or all kinds of cool stuff. So check it out at Syntax on YouTube.

So tooling, you know what? Like you mentioned, like, do we really need tooling? And that's like a big topic of conversation, especially on, like, tech Twitter Wes people are always like, my tools are making my life miserable.

You don't need tooling. I mean, they're they're all fine. But, like, sometimes, you know, it's like the way I think about tooling in the in the JavaScript ecosystem is like, alright. We're cutting wood. Right? Is that is a hand saw gonna do just fine? Sure. A hand saw will do the job, but might not do as good of a job. The end result might be a little bit sloppier.

It's going to take more effort.

And, you know, sometimes it's it's worth it to go out and have a little bit of pain of researching which circular saw you want and, finding out the correct one, and then just Node clean-cut. So to me, I I think the tooling is worth investing your time into.

And like you also said about there being new tools. Right? Wes, you never know exactly the pain points of your tools until you try the new thing, and the new thing is a 100 times faster. I remember in the meteor days, I was like, meteor's build process is fast enough. Why would anybody complain about this? And then I tried something else and it was way faster.

And then I tried Vite eventually Yarn down the road. Then I'm like, I can't even take 1 step backwards from Vite. Everything is so much faster and nicer with Vite.

I'm never going back to WebKit. I'm never going back to Webpack.

Yeah. Oh, Webpack. Yes. I'm never going to back to WebKit either. Never going back to Wes Webpack and doing any of that stuff. So, yeah, the the tools, you don't need need them, but they can make your life a little bit easier every step of the way even if they do add an incremental amount of pain as you go.

And and I I used the that's the whole thing for me. As a guest, I I started out with what Grunt and Gulp and all those. You're writing configs. And then I got to go to Meteor where there was no config whatsoever.

Even to install packages, you just added a string to a file and Meteor's build tool was like, oh, there's a change in this file. Let me go get that package for you. Yeah. So when I saw people using Webpack and you have these like, I don't know, a massive config file that's, you know, 10 feet long and all these devices. Like, this is loaders for absolutely every file type.

This is the wrong direction, folks. I I like, I did not understand that at all. So, thankfully, I got to avoid most of that. But, you know, most folks did come from config, config, config, and things have gotten easier. But not only things getting easier config wise, they're also getting way faster.

And so what kind of stuff can tooling do for us? You mentioned all these different words. Right? But I think that the core way of thinking about the tooling here, JS they make your code smaller, they make your code look nicer, they make it run better, they make it easier to work in. That's really what this tooling is doing for us. And those all sound like positives to me at the end of the day. And like you said, there might be some pain here and there getting this stuff up and running, but the pain is worth it if the end result is that your process is that much nicer.

Yeah. Big, big fan of of all kinds of JS tooling. And I'll I'm the type of guy who I'll find the latest tooling and just toss it in there. Alright. It's not ready yet. I'll come back later. You know? Totally.

timer on your microwave. You're cooking a pizza and your hands aren't ready yet. Well, we'll let you know. We'll all say, beep, beep, beep. Alright. Now it's time to figure out which, which of these tools to use. So let's talk about some of the existing tools that exist in our workflows today.

One big one that a lot of people have been using for a long time is ESLint. Linters let you know Wes there's potential mistakes, or potentially issues within your code, or even just, like quality issues, or potentially, accessibility issues, or potentially, formatting issues in some sort of ways. And linters are they've they've undergone some changes. We had like JSHint and JSLint and all this stuff. But it really feels like for the past 10 years or so, everybody's been really kind of settled on ESLint as being the linter of choice for so long. And only now are we starting to see competitors to ESLint pop up. Everybody's been pretty stoked on it for a while. Yeah. Yeah. ESLint is the reason why ESLint is is so popular is because it works with works with TypeScript. It works with JavaScript. It works with different,

Yeah. And I I see more and more people occasionally being, like, maybe we shouldn't be using all these different linting, you know, frameworks and libraries because they're a pain in the butt. But let's not throw the baby out with the bathwater because I think there is, like you said, a lot of really positive things to be gleaned from that. And it's not like you can't turn the rules off that you don't want to follow.

It's pretty easy to do that inside of the config. So, you know, you don't have you don't have to be beholden to the red squiggles.

You are the master of the squiggles. They are not yeah.

No. And, frankly, I don't care.

So I don't. Yeah. It's not a big deal to me. Yeah. But, you know, I I think it is it's one of those things that it's used so interchangeably at this point. They they might as well just be the same thing. Yeah. I I think

Formatters are basically the thing that makes your code look nice. And in a large part, you know, format based languages like Python or something like that, where the format is very explicit, formatting has always been very important, but JavaScript developers have always been kinda like, yeah, you know, It's the way I author it. Until Prettier came along, and Prettier is like, you know what? Here's the standard way we're gonna format. And, yeah, you can you can tweak it these following ways, but, hey, install Prettier, and I'm just going to snap your code into place.

Personally, hey, I, I love a format.

I format on save.

I like my code to be formatted. One thing that formatting does for me is it ensures that I have not missed something like missing a bracket. That's a common error that can be solved with a formatter. There's so many of these little things that are micro bugs that especially new developers hit when they're working like, Hey, why doesn't my code work? Well, so many of that can be solved with linters and formatters because they'll show you essentially if your code is snapped into place correctly, then you know that everything is as it should be.

Can you imagine being concerned

Yeah. I largely haven't picked up macros for any particular reason, but thank you for explaining it like that because that was one of those ones. I see the word macro and it always like, I get macros in gaming. I get macros in Rust. But in JavaScript world, I'm always like, I got no idea where this fits into my life. So, thank you for that. Let's talk about the new tools because that's obviously what this episode is supposed to be about. Now that we've explained all of the different tools that we're using and the types of tools. We're gonna be diving into some of these newer tools that you can have on your radar. Some of these are ready to go. You can drop them in with caveats.

Others are very, like you said, pie in the sky.

So let's let's get started with the first one. I think one that a lot of people have been hearing about for a little bit is Biome.

And Biome does a few things. It's a formatter ESLint, and it's very fast.

It it tends to be oh, they it says 35 times faster, and they even have one of those little movie charts on their site, so you know that it's fast.

That's a word of warning. Sometimes when we say that, it's a little bit sarcastic because oftentimes these performance benchmarks are are here to make their product look good. Yeah. They cherry pick a specific situation.

They cherry pick a specific situation. So don't always rely on these things. That said, I think for all intents and purposes, Biome is very fast and much faster than any of the linting tools that we have today. Node, Biome is very, very usable.

That said, there is some big caveats here.

And the reason why I'm not using Biome personally right now is that it does not work in your entire application. One of the cool things about Prettier and ESLint is as, as a tag team, it's going to format my Svelte files. It's going to format my CSS. It's going to format all of my stuff, not just my JavaScript code, not just my React code. Yeah. I looked it up earlier because I think we should maybe explain what Biome does is it is

Yeah. I I like all of that. I would like to replace all the different piecemeal things with 1 thing that just does all the thing, the everything tooling.

I posted in the show notes an image, although Wes can just pile a link to this.

And if you're watching a video, maybe Randy can throw it up on video. But it really what what it is here is this table of what's being supported right now and what's on the way. Right now, they're working on in progress HTML parsing.

They haven't started working on formatting or linting, but it's clearly on the table.

Vue, Svelte, and Astra are all partially supported.

CSS has, parsing, but not formatting and not linting, nothing for markdown. So it's it it isn't the thing that's going to replace everything for you right now, which is why I'm not using it today.

Because, yeah, straight up, if if if I have to have Prettier installed it anyways in my project, you know, next thing you know, I have, I have Prettier IVS ESLint and Biome, and that that's, like, a little too much for me. So that's why I trying to get your Versus Node to, like, use the proper

Partially supported with some caveats. Yeah. Oh, yeah. Yeah. So this table JS up to date, but, yeah, it's better than the the red x that was here, like, a month ago. So, yeah, I I'm hopeful for Biome. And you you said you're not gonna you Node, Prettier JS never the thing that's slow in your process, but there is something that Prettier is doing by being slower. And it's taking up more processing, more battery.

It's slowing your computer down whether you know it or not. So if you can have a more efficient tool, heck, your computer might just last a little bit longer. You know, I don't I don't know if you you get this, Wes, but, like, anytime I'm losing a rapid amount of battery, I feel like it's always Versus Node. And who knows what it is in Versus Code? It could be the the formatters. It could be any sort of language library. It could be literally anything. There's ways to to find that out, and I did find one of my plug ins was one of those things. But if you Sanity the way, for those of you listening, that plug in was import cost. If you're using the import cost plug in, go maybe disable that thing because it it is a big batteries, battery suck. It is a performance suck, and it's yeah. I don't know what's going on there, but it's not good. So disable that plug in, and you might get some extra life out of your editor. Act actually, that's a a really good

Totally. Alright. Next 1 on the list here is 0xc.

This is the JavaScript oxidation compiler, which is again a collection of tools. This would be kind of seen as a direct competitor to Biome. It is written in Rust.

It's very fast. Again, it's a parser, a linter.

They even say it's going to be a formatter. It's going to be a transform minifier.

It is an RS pack bundler, and it is going to be a roll down bundler.

This one is interesting, but it's it's been on my radar for some time. Because, obviously, it is trying to solve some of these same problems, and it is trying to, do so in a very, very fast way, which Scott love that. That said, they've explicitly stated that HTML is not on their road map, and it's not in their plans. They had no planning on adding that type of thing.

So for me, personally, I'm interested in it. But if I'm looking at replacing my setup with something that can't do everything, then, yeah, I, you know, I I don't know how I feel about that. So for me, that there's definitely, like, something to keep in mind with this project.

Regardless, though, the performance, everything, if you're looking for something that is fast, this is a project to keep your eye on, for sure.

over an hour to simply just Tolinski your code base. And Talking about fanning out, you'd have to fan me out because I'd faint if my code base took that long to, to link. Holy cow.

It's not it's not super cheap when you when you do a whole lot with it. And if you're using a lot of GitHub actions, can certainly, save you a lot of only a lot of time, but a lot of money for sure. Alright. GitHub

Mhmm. Yeah. You they could simply make them easier, but that would bankrupt them.

Yeah. Next one is the Deno Formatter.

Node I haven't done, anything with Deno format.

Do you know a little bit about Deno Formatter?

Yeah. Maybe it just baked into the JSR platform. You know, I think that's a cool thing about Deno JS they are taking lessons from Rust in that regard where, you know, Rust has so many of these things baked into the platform itself. Deno seems to be taking that same approach.

ES build is also a a new tool that we've been talking about here. This is a bundler.

It will take your code. It's written in Go, and it will very, very, very quickly bundle your code for you. It will transpile or compile your code, do all that sort of stuff.

This is what Vite uses to be so fast. Vite is very fast because of a couple things. ECMAScript modules and ES build are are 2 of the main reasons.

But move over, ES build, but there is a new fast bundler in town, roll down. Have you seen a roll down, Les?

the new hot ticket in town, and it is it is going to be it's going to replace Wes build in Vite. It is written by the Vite folks. It is written by Vite, and it's written in Rust.

And it's supposed to be compatible with Rollup.

So, basically, what they said JS, we like Rollup.

Let's just make a Rollup compatible Rust based bundler and have it be our own. So that way Wes have full control of the direction of this thing. And it is very, very, very enticing. It is, recently announced, and I'm excited to see where this goes because to me, this this seems like it's going to be the future. And it's probably not even going to be the future that you need to even think about if you're using Veeet because it's probably at some point just gonna be Vite. You know? They'll just swap it. Yeah. Like, the these some of these things are so low level that you don't really have to care

You know, the Vee folks seem to do a really good job with that where like, that's what made VeeT so great in the 1st place. It's like, oh, what if we took this really fast ES build, and then we put, like, a dev server on top of it? We made it be ESM, everything forward, and that's, you know, what makes it so fast. And that's really cool. Okay. I didn't see that. Yeah. It says that currently Vite relies on 2 bundlers, ES build and roll up, and this kind of takes that 2 bundler problem out of it. So, interesting stuff.

JavaScript. Whoever Unless, there's Wait wait a second, Wes. Why would I ever wanna do that? Isn't TypeScript there to save me?

Wow. That's really quick. Wow.

Yeah. I think, man, all this stuff give me hyped. I didn't know too much about that. You know, there there's also beyond just, like, even bundlers or tools. There's, like, a bunch of, like, interesting projects that are taking a bigger view in terms of how you're doing your projects. It's bundling a bunch of stuff together, making your dev process easier. And, like, we're talking about things like Vite specifically. Right? Vite is a whole dev server.

It it handles a lot of stuff. But then you have projects like SvelteKit that handle the whole request and response cycle for you. And one that has been kind of taking a little bit of, little bit of the the juice lately is this whole Pnpm JS project.

And Un JS seems to do a massive amount of stuff. When I first saw this, I was like, well, I have not been paying attention to this. This does a whole lot of things.

It it handles a ton of stuff for you, whether that is, like, your your dev server you're building or whatever. It even handles, like, WebSocket support and stuff. I mean, the the thing's pretty amazing. It's actually what powers Nuxt.

So if you've heard of Nuxt JS, which is the Vue version of Next JS, this is the thing that powers that, but you don't have to use Vue JS for it. So, this is a a newer dev tool that allows you to do a whole lot of interesting stuff for building building sites and, again, from the folks over, you know, the Vue JS folks. So it JS, it's pretty cool project.

ES build is written in Go. Yeah. But, you know, it's trend of not writing things in JavaScript. And, you know, sure enough, there is the conversation of, like, is JavaScript, you know, good enough to handle these tools? And I think, you know, there is pretty clear evidence that tools can be better written in other languages. So, you know, I'm not I'm not the the right person to say that you can't write super fast tools in JavaScript. But, it is an interesting trend, and certainly one that we're we're seeing a little bit more and more these days. And I honestly don't mind because at the end of the day, I just install the thing anyways. If there's a config file, I'll configure it there.

Yes. Yeah. Totally.

I do. It's a YouTube not only just a YouTube channel, but a YouTube video specifically.

And this one's for my movie heads out there.

Man, this video was really super good. So this is it's an hour long. So it's a type of video you're gonna wanna you're gonna wanna pull up some popcorn for. But it's called Shinobi Gedan, the 19 eighties ninja craze, and this guy really breaks down, like, film by film, the 19 eighties ninja craze from, these I mean, massively films you've never heard of. But things where they were, like, splicing together, like a certain director was splicing together films from a bunch of different films and then adding new scenes that they were recording.

They talk a lot about, like, the mustachioed American actors that appear in these films and stuff. They they talk about, just in general, the the ebbs and flows of the 19 eighties. They talk about, like, Sanity films and stuff. So this thing was really deep dive. And and the type of YouTube video that I really prefer where it's like, wow, exhaustive. It is really intense.

And this entire channel is called The Bad Movie Bible, is really great. And don't let the name get it's not like a, it's not like a how did this get made type of thing. They'll do things where it's like, here's an hour long on all of the alien knockoffs of the 19 eighties, all of the James Bond knockoffs. And he'll just go through an hour talking about all the different actors, every different country that's producing these things, the studios, and it's so so deep. And I've watched every video on this channel multiple times, and, the Shinobi Get In one is my my favorite one. The newest one, so check it out. Tons of tons of really cool stuff here.

Nightmare on Elm Street knockoffs, Die Hard knockoffs.

Just so many cool things. Great great channel.

highly, highly recommend you check that on out. It's super good. We'll we'll put it on, like, salmon. We'll put it on stir fries. We're just putting on everything. Yeah. It it's got a little sweet to it. It's a little teriyaki, a little soy. It's Yeah. It's not not quite anything that you can do for. Yeah. But not not too wild in itself. So, yeah, huge fan. And their their logo is darn cute. I wanna get one of these T shirts now that I see these T shirts with the Octopus. They got a hoodie. This JS done well. Their website in general, this is a really nice looking website.

Cool.

Yeah. Shameless plugs. Check out the Syntax YouTube channel. We we set it at the drop. Check out Syntax on all the socials.

You know, get us on TikTok before they make it illegal, all that stuff. Come to Canada. We don't have Bakken sauce, but we we'll have TikTok.