- Episode 111
Alternatives to build tools
In today’s episode, I talk about whether or not build tools are still useful.
- Podcast Episode: How teams choose the tools they use
- Build tools aren’t required to be a good developer (but they can be useful)
- An intro to ES Modules
- CSS Variables
- CSS Nesting
- WTF is gzipping (and how is it different from minification)
- Tree Shaking
- My Build Tool Boilerplate
Today, I’m talking about alternatives to build tools. Let’s dig in.
And a few years back, I actually wrote an article for my newsletter over at gomakethings.com about how build tools aren’t required to be a good developer, but how they can be nice to have. A lot has changed on the web in two years.
So are build tools still useful? That’s kind of what I wanna talk about today and I wanna really unpack.
CSS variables let you define properties once and reuse them throughout your CSS, something that you used to need SAS for. And again, I will link to the MDN reference for CSS variables or custom properties as they’re now called down in the show notes. CSS nesting is something that’s in the works and when it’s implemented, it’s going to provide native support for something that you also used to need SAS for. I’m really looking forward to that one.
And I’m going to drop a link to an article on kind of GZipping versus minification and how they both work down in the notes as well. It’s possible to build in a modern way and never touch a build tool, but you still may want to. Here’s some reasons why.
Native ES modules don’t do any sort of tree shaking and I will drop a link to what tree shaking is and how that works down in the show notes as well. If you’re not familiar with tree shaking though, just at a really high level, it’s the process of when building a file from a bunch of ES imports.
A lot of build tools now will drop out any files that aren’t or any functions or variables rather in those files that aren’t needed or used. So the file that you get out ends up being potentially smaller than the files you import in.
If you import one function from a file with dozens of functions in it though, just using straight up native ES modules, the browser is still downloading all dozen of those functions even though it’s only using one.
While minification isn’t as impactful as gzipping, the two together is better than just one or the other, especially on large sites or apps. It can have a pretty significant impact. And there’s no native process for reducing the size of images or SVG files. You still need a build tool or some sort of before deployment process for that.
Build tools don’t require the command line. So they don’t have to be big or complicated or dramatically change how you develop. My favorite tools let me develop the way I always have and spit out a slightly enhanced version of my code at the end. For me, that means I don’t use things like Babel or TypeScript.
And while I use a command line tool, you don’t need command line at all. There are GUI tools like CodeKit for Mac OS or pre-pros for Mac OS Windows and Linux that do most of the same things with a visual interface instead of a terminal window.
So I still think that build tools have their place. I think that a modern developer’s toolkit has a build tool process that’s maybe a lot smaller and leaner than what we’ve done in the past or what’s potentially common or viewed as a best practice today.