Hasty Treat - Bundlers in 2020

Monday. Monday. Monday.

Open wide dev fans. Get ready to stuff your face with JavaScript, CSS, Node modules, barbecue tips, get workflows, breakdancing, soft skill, web development, the hastiest, the craziest, the tastiest web development treats coming in hot. Here is Wes, barracuda, Bos, and Scott, el toroloco, Tolinski.

Welcome to Syntax on this Monday, hasty treat. We're gonna be going all down the list of bundlers in 2020, bundlers and tools that you can use in your projects. We're gonna be going into them quite a bit. Personally, I'm dealing out a couple of Scott's picks, which is something that I just made up for this episode. So my name is Scott Tolinski. I'm a full stack developer from Denver, Colorado. And with me, oh, it's just the Wes Bos. Hey.

Hey, West. That's it. That's all I got. Yeah. I know. We, we both had sort of rough nights last night. Kids, man. It's amazing that there's still people on the planet given how rough kids can be sometimes.

It is very rough, especially when they come up in the middle of the night and wake you up. That's exactly what we had too. Yeah.

It is hard. It is hard. Courtney and I both woke up this morning, and we're just like, she said something about going to work. And I I was like, we don't have to go to work. It's Sunday. She's like, it's not Sunday. I was like, oh, Node.

However, let's just say if you had a poor cold child coming into your room in the middle of the night to wake you up, that might be conceived as a bug in your program. And you might wanna be able to see that while it happens so you can prevent it in the future. And you might be able to do that with one of our sponsors today, and I'm talking about LogRocket.

Now LogRocket is the perfect place for you to see your bugs and errors happen as they happen in a real browser scrubbable window.

It's so fascinating to me. I'm such a visual person. So when a tool like this pops up in my radar and it allows you to solve bugs by having a scrubbable video with the network tab and all that stuff that all of the tools that you know and use for your own debugging flow, man, it really catches my eye. So you're gonna wanna check this out at log rocket .com. It works with all the stuff you know and love. There's an on premise or in cloud version of this thing, and it is a fantastic tool. So check it out at log rocket.comforward/syntax, sign up, and you will get 14 days for free.

So bundlers, you wanna start off you have a nice little what is a bundler

little business here, and we can start off there and then get into them? Real quick for for anyone who doesn't necessarily know. Like, I Scott a actually, it's funny. I got an Instagram message this weekend. Someone JS just like like, what do I do to make my code go live? Like, what is the process? And, generally, you have a bundler that will help you both in development mode while you're working on the website and as well as when you get ready to ship that thing for production and and send it out to the masses. So what does a bundler do? On one hand, you can just write HTML, CSS, and plain JavaScript to open it up in the browser, and, that's certainly one really great way to do things. But as you get ESLint to more complicated apps, you generally need a tool that will handle all of the JavaScript that you write, And often, in many cases, it will also handle all of the templating and CSS that you write. So, like, what goes into a bundler? You gotta configure it. Right? You gotta choose what language you're using, whether you're templating in JSX or Pug or Vue or any of these other things out there, those need to be converted into the templates that they're used in, whether that's just HTML or whether that's a a React application.

You need to choose what JavaScript you're writing in and what you're compiling to. So whether you are writing in modern JavaScript, e s 6, 7, 8, 9, 10, and compiling to e s five is is pretty common right Node, so you support older browsers.

TypeScript, CoffeeScript, you're using different features, decorators, nested, prop drilling. What what's that one called again? Oh, optional chaining. Optional chaining. There you go. So if you're gonna use that, you need to convert that to something that's gonna work in all the browsers. Polyfills, environmental variables, loading CSS, compressing images, and then probably the 2 of the most important one is asset chunking.

So chunking into smaller JavaScript bundles that you can load as you need them, and tree shaking, which is it will take out, unused JavaScript. So if you import something from a library,

you don't use all the methods. It will just cut out those unused methods for you. So that's kinda all the work that a bundler does for you. Yeah. Tree shaking to me is one of the ones that I think is a killer feature that people should be looking for right now, specifically because Totally. You can import one little thing. Right? I mean, just think about the possibilities of having, like, something like Lodash in your project.

And I know Lodash exports each individual function, but maybe you could just, like, not even think about that library at all. Just be like, oh, I just want this Node in a little tiny piece and not have to worry about the size of anything like that. I mean, you you get those kind of benefits.

So to get into it, Webpack, the first and foremost one we wanna be talking about specifically because, 1, version 5 just came out, and, 2, it's probably the most used between all of the different frameworks that use it. And, you know, I think there was a time when Webpack was the sort of de facto, so everybody jumped on it. This one to me is the hardest to learn, but it is also the most used. Now I wonder if it's the most used because it's used in so many libraries or if individual projects are are really going hog wild with this, but to me, Webpack is just it's very difficult to grok. You you know the word grok? Yeah.

To understand, to kinda get the idea of of everything, it it encompasses.

Yeah.

I would say it's by far the most popular one out there. It was first on the scene.

Not very first, but it was first on the scene when we when we sort of moved to these bigger builds, and and they did a whole lot. It can do absolutely anything you want. It's a Swiss army knife of this type of thing. I think the frustration with it comes with that. The fact that it can do everything is it's very hard to configure because almost all of us are just doing the same stuff. Like, we're all writing React or View or Svelte apps, and we're all bundling them and we're all kicking them out the other side. And, yeah, on some cases, there are some edge cases, but I think, like, just regular developers like Scott and I, and probably a lot of you listening to this podcast, we're all just writing the same type of JavaScript at the end of the day, so it doesn't make sense for us to to actually have to configure it. So because of that, I haven't written a webpack config in probably 2 years now, and that's no shade on Webpack. That's just because either other packaging tooling is much easier to get up and running with. Or in if you look at something like Next. Js or Gatsby, they just use Webpack under the hood for you, and they have somebody much smarter than us that knows how to configure this thing, and they just do it for you. It's part of the build step of whatever framework you're using. Yeah. I'm gonna go in the same way. I I don't think I've ever written

once, not single time, written a webpack config file from scratch.

It's, certainly, I I've usually just copied and paste 1 or exported from Query React app or something like that to actually use it. So, yeah, Webpack is there. It is very powerful, very used, and there will be a lot of blog posts and stuff teaching you how to do it. It's just, again, a lot to a lot to pick up.

Alright. Next step is roll up. Now roll up is Scott's pick for the best option of most features versus ease of use, as in roll up can do just about everything that exists. Just like web packet is definitely a Swiss army knife, roll up gives you, you know, the all the hot module reloading, the ESM stuff, the the tree shaking. It gives you just about every single major feature that you could possibly want. And, in fact, I think quite a bit of projects are starting to use Rollup now. I know Svelte uses Rollup. I know t s d x. Are you familiar with t s d x west? It's like a starter for creating React libraries. It's it's you could think of it as, like, the Create React app for creating libraries and push publishing them to npm. It's very, very good, and it's TypeScript primarily. But that uses Rollup Vercel successfully because it gives you the smallest bundle sizes possible.

So I I really like roll up myself, and if I was, like, picking a Swiss army knife Node to go with, then I would most likely pick roll up myself. So this is Scott pick for most features for ease of use.

Yeah. I've actually never used roll up directly. Like, I'm sure I've used it in some sort of underlying build command, but I've never went in and did it myself. Is there a, like, a roll up config, or how does that work? Yeah. There's a roll up config, and the roll up config

see, the thing with roll up is that by default, it's it's meant to just be a bundler.

So by default, it's just going to be a bundler, and then there's plug ins to do all sorts of transpiling in in whatever of your code as needed. Oh, yeah. So it's it's really neat. Basically, yeah, the config file can just be like a a JavaScript object that you're exporting Wes you give it an input and an output and what that format should be, and then you can toss around plug ins along the way whether or not those plug ins are analyzing your code. Maybe it's analyzing your CSS. Maybe it's trans piling it. Maybe it's testing it, whatever.

But you can have as many outputs or inputs as you want, which makes bundling really nice and easy if you wanted to have multiple builds of your project based on necessary features, browser requirements, whatever.

It's neat. I I like Rollup.

Next one we have here is Parcel.

Parcel JS my favorite out there, and it is a bundler. It supports all of the popular things out of the Bos, TypeScript, CoffeeScript, all of your CSS, all of your React, Vue, Hug, and then you can just go and add plugins for for any other languages that it it doesn't support. But I've I've never run into anything that it doesn't support for me, which is awesome. It just works. So you the way that it works is you install the Vercel CLI, and then you just give it your URL of index.html or of a React application or of a JavaScript file, and it will run both. It also JS a bundler, but also JS, like, a whole development environment. So it does hot reloading and environmental variable injection and, local server.

Whenever I need to just quickly work on something, like, even if it's just HTML and CSS, I will quickly just say Vercel pnpm dot HTML, and then you can type Tolinski source equals, and you can link to SASS files. You can, like, link to TypeScript files, and it will just detect those and and load them all in, and you can you can run the build. And it's just so easy. I've never had to configure it with a custom parcel config. I don't even know if that exists. You just use your package JSON for things like which browsers you're supporting. Or if you have a custom babel config, you can just pop that into your your package JSON or babel config tool, which is great. So big fan of Vercel. Parcel 2 is gonna come out at some point, and I think that's gonna make it even even easier. I'm not sure what the the features are for parcel 2, because but I'm a big fan of parcel 1.

Yeah. Parcel is my pick.

This is the Vercel is Scott's simplicity winner pick of the week. So I I do I like I like Parcel. It's the easiest to get started with by far. It just makes things nice and easy. I have found some issues sometimes where I hit, like, a bug with it, and I'm like, I don't know what to do next. And then you have to start diving into the config or something. But for the most part, I I think it's very, very solid. Alright. Next Node is going to be npm yarn and yarn 2. Now these are not bundlers themselves.

You can certainly use them as part of your build process by writing custom scripts yourself. And I remember when, like, Gulp started coming out, peep there was, like, an audience that was just like, I don't get why you would use the tool for this. Why don't you just use npm scripts? And that's certainly possible to have the scripts to do these types of things for you. I don't know if I'd personally recommend it as the standard now that things are so complicated with browser support, modules, and tree shaking and all that stuff. I I would pick a bundler if I were you, but, you can certainly try to do it. Your npm and Yarn are just for

installing your dependencies and then having just, like, agnostic commands, like pnpm Scott. And then under the hood, it will run Vercel or roll up or or whatever. Funny that you said gulp, though. I forgot. I took a 160 line gulp file and just converted it. It was for the slides, for the talk that I do. And Yeah. I just converted it just to parcel.

Just it just says just type the word Vercel index Scott pug, and it worked. I was like, holy smokes. I have to convert my wife's WordPress website over to Parcel, and I think I'm gonna do a video on how to do it because she has a pretty big Gulp file behind it as Wes, and I I'm pretty sure I can get it down to no config with Parcel.

That's nice. Yeah. I definitely dig that approach. So next Node I have in here is going to be snowpack. Now snowpack is Scott's speedy pick of the week, and, it's sort of like Sonic after he's had 3 espressos. Snowpack is very fast because by default, it's only compiling the actual code file that you're touching at any given point because it uses the ESM imports by default.

Everything is very, very fast. So, like, most of these bundlers, when you save a file, it's gonna be, alright, scanning your project, compiling all the files as fast as possible, then performing that hot refresh. What Snowpack does, if you modify header Scott JS, it transforms or even header dot Wes, it transforms header dot ts, and it transforms it into whatever it needs to be. And then Hot module reloads it into your browser as fast as possible, allowing you to just have it there just about instantly. In terms of, like, save file, see update, I think Snowpack is by far the fastest, especially for dev builds, at least out of the ones that I've tried. And, recently, Svelte just announced that they are going to be moving their main bundler for dev mode to be in snowpack.

So it's definitely reached the big time, and I think that's a a good sign of things to come for snowpack. It's very nice. Remember Wes had Fred on the show, and that was a great episode. So I don't have the the numbers pulled up in front of me. Maybe maybe I can do that. Yeah. The the Snowpack

is from, like like Scott says, the devs behind Peekapackage, Frederik Keysh Scott. Episode 212.

Beauty. Yeah. Go back and listen to that one because this is, like, definitely, like, a next gen piece of JavaScript tooling because what it does is it just go it does away with common JS modules and possibly even NPM and just says, okay. What if everything was a URL and everything is the ES module? What can we do there? And so along with Snowpack, there is Snowpack CDN, Skypack, which allows you just to load in your dependencies from URLs, which is the same approach that Deno is taking as well. We'll talk about that in just a second. So I would definitely keep a eye on if if there's any one of these that you wanna check out in terms of, like, I wanna see the future of JavaScript, I would say Snowpack JS it.

Yeah. Yeah. Snowpack, very cool. You can also do production bundles with it. Although, I have not tried myself. Next Node is going to be ISO build. If you have not heard of ISO build, that's because it's the name of the bundler that's built into Meteor.

And Meteor version 2, which I wanna do a whole episode on, Wes, is is about to to drop soon ish. And so ISO build is gaining 2 really important features that most people might not know, tree shaking and Scott module reloading, hot module refresh or whatever. So Meteor's build times are gonna be way faster with those 2 new tools. I have it in my my code Bos right now. It's really nice. Might be wondering if I need to use Meteors, a whole bunch of stuff to use this. You don't. In fact, basically, level up tutorials is just about only using ISO build as a build tool and just about none else of Meteor currently. So this is my underdog pick of the litter.

I like these picks. Yes. Thank you very much. This JS, ISO build for Meteor. Again, hot module reloading, all that stuff is dropping in Meteor too. So I'm I'm really psyched about this. And to me, the build times, at one point warp not super great. So now they're getting better and better.

Next Node we have here is Rome. This is pretty cool. This is a project that is a bundler, but it also is going to be a linter, which replaces ESLint, a compiler, which replaces your webpack. It replaces your babble. Prettier, so it's a formatter. It's a it replaces Wes, so it is a test runner. And this is really interesting. So it's, like, Node tool to rule them all just to replace all of the stuff that we have, and that seems very appealing to me because I can definitely get a little overwhelmed with all of the tooling that is necessary. Sometimes you open up a a project, and there's, like, 400 Scott config files. And you're like, holy smokes.

Like, what is going on in in here? And, obviously, like, we've done that to ourselves because I'd rather do a project with things like Prettier and ESLint, but sometimes the thing needed to get up and running with these things is really frustrating. So it looks like Rome is just gonna replace all of that. And I was talking to some folks on Twitter about this because Deno is taking the the same approach. Dino is Ryan Dahl who created Node. Js. He's creating this new JavaScript runtime that is TypeScript from the beginning. It's built on Rust. It's kinda cool, but it does the same thing. It gives you a linter. It gives you a formatter. It gives you a bundler. It's all in Node. And I was like, oh, Milik, will that work where somebody just comes along and says, here's all the tooling, or are we gonna start to see people being like, cool, but can I have a config for x, y, and z? And a couple of people said in in, like, Go world, Go is another programming language, they just use the tooling that's given to them, and you don't fuss with it. You just standard. Yeah. You just it's sort of like when Prettier came out. You're like, just use what Prettier gives you and be happy.

That's what Rust is like too. And, in fact, one of the things I love so much about Rust is that there is a way to do everything, an explicit way to do everything. In fact I like that. You can write your tests directly below your code in each individual file, and there is no config to do it. You just do it. Oh. You just write your test right below it. Okay. That's done. Oh, yeah. Also, guess what? Since there's a standard for everything, it auto documents your code too. Oh, okay. Great. It, like, it all works together in a very cohesive manner, and it is really depressing when you think about just all of the hoops and mental challenges we have to, you know, go through to figure out exactly what to pick here. Yeah. I have not used Deno yet or Deno or Dino. I know. I know it is Deno. We had that whole thing before this callback.

I have not used this myself, but it seems pretty neat. It's one of those ones that's like, once the community JS there, maybe in a little while, I'll take a stronger look at it. But, like, right now, there's, like, no reason for me to dive too deeply into it. It is it is pretty fast. I listened to an episode of

Software Engineering Daily about Deno, if you can find it, is very, very good. I built a couple things here and there. We'll do a whole show on, you know, but while we're talking about it, I don't see, like, the killer feature yet. And, also Yeah. I think I kinda like npm installing rather than having to import from the URL.

I do. I'm going to be honest. I do. Yeah. Yeah. Because, like, you just import whatever from

React and not h t d p whatever c d n.comforward/15.0.1 forward side because, like I'm like, what? How do you update that? Or like, do you have to copy paste that every time? I'm sure like that will that will be solved. I'm like, I'm probably being silly here. And they also are mapping all of the Node. Js API so that I bet you probably can run Node modules in in Deno at some point, which is kinda cool. We'll do a whole show on it. I I think it's kinda interesting,

but I don't think it's something you should jump on just yet. Yeah. We should get a Deno show on the books. I would love to do a deep dive in it myself. Alright. Lastly is going to be the let the tool take care of it for you JS in, hey. We have a lot of these projects that are whether it's using some of the other Vue projects like a grid sum, but there's also Gatsby and Next. Js. A lot of these things just use Webpack under the hood, or they just use roll up under the hood. And these are just projects that are layers on top of the framework and layers on top of the bundler so that you don't have to think about it at all. And to me, personally, this is the best way to go because you don't have to think about it. Now granted, I I use the ISO build setup, which for the large part doesn't require any config files, and you can start throwing them in there when you need Node, kind of like Parcel. Right? Yeah. But these kind of tools, like, almost the config even happens at a, like, a plug in layer on top of that. Like, you're doing a Gatsby plug in to get that kind of functionality that you need, not a webpack plug in. So these tools do use these bundlers. However, they just sit on top of them in a hope to make them a little bit easier so you don't have to touch those monster config files.

Yeah. Yeah. It's it's pretty nice that, in most cases, it can just be tucked away for you, and it does all of the hard work for you. So that's pretty awesome. So Node don't know. Hopefully, that was a good, little primer on bundlers. There's also oh, there's 1 more I forgot, which is broccoli. I don't know if that one is still I think that one's still under development.

Broccoli is a compressor, I think. Fast, reliable asset pipeline

supporting constraint time rebuilds.

It's hard to Google broccoli.

Broccoli.build.

I just ended up getting a, a Google image of broccoli popping up in here. That's good too. How about this 1? Veet. How about and what about Veet? Veet? Yeah. There there's a handful of people out here How do you spell that? Screaming at their v I t e.

It is created by Evan Yu, the creator of Vue, and it is built on Rollup.

It's an opinionated web dev build tool that serves your code via Wes module imports. So, Veet, I wanna I wanna say, if there is a, Scott's speedy pick of the week pick of the week part 2, this is, like, number 2 in that line. Like, if there's a race, I'm gonna pick Snowpack to come in 1st, and then I'm gonna pick Vite, Beat, whatever it is. I'm gonna pick that to come in in 2nd. It is a very fast Has all those things like hot module reloading. And I have used this on a Svelte project myself too, and and I really enjoyed the speed of which. Also, there's, like, a neat create react template from here. So you could do, like, creates Vite app template react, and it basically spits out the exact same template as create react app except for the dev experience JS much better. So Okay. You know, this Vite looks like

Parcel. Parcel is the bundler, but it's also the tooling, and Vite looks like the same thing as Vercel where it just uses roll up under the hood, but then it adds all this tooling on top. So this is awesome. Yeah. I I would say if you're gonna try roll up, probably just go for this then. It's very good. Yeah. It's very, very good.

Beautiful. Alright. Should we end it again?

Let's end it again. My apologies. I thought about that Wes I knew we were gonna get some comments. So, well, thank you so much for tuning in to this Monday Sanity Treat. In the next episode on Wednesday, what are we gonna be getting into, Wes? We're gonna be getting into 300.

300.

It's gonna be our 300th Node, and, by the time you're listening to us, we would have already recorded it. We're doing a live call in show. It's gonna be a lot of fun. So, yeah. We'll see you on Wednesday for number 300.

Alright. Peace.

Peace. Head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show.