The Zero-Config Javascript Build Tool
Update below (August 1st, 2016) regarding create-react-app.
Second update below (January 27th, 2017) regarding Webpack v2.
Grunt, Gulp, Browserify, Webpack, and many more. These are tools that I’ve come across over the years as a web developer. And to be very honest with you, I have always struggled with them.
I know that these tools are supposed to make my life easier, but every time I try to adopt one of these solutions, I have to crawl through a mountain of documentation before I can get an app running.
Maybe you can relate… or maybe I’m just a little slower than most.
Please bear with me as this will start off as a bit of a rant, but I do have a solution for you near the end.
The Problem: Config Hell
Configuration is HARD
The problem with many of these tools is that they require you to jump through many hoops before you can get your app running. And it’ll take even longer if you want to actually understand what is happening.
Let’s take a look at Webpack for example. First, you have to learn the “lingo” of their config files like: loaders, preloaders, modules, tests, etc.
Next, you’ll have to figure out how to compose this new alien language into something that’ll build the thing that you want. I understand that this is a necessary part of any kind of sophisticated tool, but it’s quite a steep learning curve for someone who is completely new to it.
Boilerplates and Starter Projects
Some people might say, “why don’t you just use one of the boilerplates or starter projects that are freely available off of Github?”
Sure, I could easily git clone a starter project and have a working app ready to go.
Simple right? Well… not exactly.
There are a few problems with this kind of solution.
First, while you can easily search Google for React Webpack projects, you’ll quickly find yourself confronted with more than a handful of Github repos that vary in terms of how up-to-date they are, how well-maintained they are, and also what features they support. There are just way too many options in varying degrees of quality and the result is not always ideal.
Secondly, even if you get an app up and running, you still may not be able to understand what’s going on inside the configuration file. This becomes a problem very quickly when you need to tweak a project to accept a new plugin or feature. Something as simple as using ES7 features or having a Stylus preprocessor will require you to have a good understanding as to how the config file works.
Starter projects are a sign that the tool is too complicated
And finally, I think the fact that there are so many different boilerplates and starter projects for the same use case is a sign that the tool itself is not as beginner-friendly as it could be. A beginner-friendly build tool wouldn’t spawn hundreds of starter projects, because the tool itself will naturally cover those cases in a simple and straight forward manner.
Thankfully, my internet perusing has led me to a solution that I am very happy with.
The Solution: Brunch
Brunch is not a new build tool. It’s been around since 2011 (Grunt appeared in 2012) and is very mature in terms of what it can do. Unfortunately, because of many reasons, it hasn’t gained the kind of traction like some other tools.
Side note: Check out a discussion on how it compares to Webpack here.
https://github.com/brunch/brunch/issues/1234
Simple Config Files (optional)
This is completely optional since 90% of the time you’ll use “Skeletons” instead (I’ll talk more about that below). But for when you really need to make some tweaks, there is a simple way for you to do so.
Brunch was built with simplicity and speed in mind. For example, here is a Brunch config file for React:
module.exports = {
files: {
javascripts: {
joinTo: {
‘vendor.js’: /^(?!app)/,
‘app.js’: /^app/ }
},
stylesheets: {joinTo: ‘app.css’}
}, plugins: {
babel: {presets: [‘es2015’, ‘react’]}
}
};
You can easily see how that is a magnitude simpler to understand than current config files out there (let’s not even talk about what Grunt and Gulp config files can look like).
Starter Projects (Batteries Included)
True to the title of this article, you can also use Brunch without any configuration at all (this is often what I do personally).
Right off the bat, Brunch includes “Skeleton” projects that will scaffold your entire project out for you. Simply head over to the Skeleton Registry and choose a project that you like.
Instead of having a million different options to choose from, you have one place to get what you need.
For me, I’d simply type something like this to start a React project:
brunch new myApp -s reactAnd now I have a folder called myApp that has a Babel, ES6, React project ready to go. Then, all I do is type the following into the terminal:
cd myApp
npm startAnd now I can navigate to http://localhost:3333/ to see a React app up and running.
If you work with Coffeescript, SASS, Jade, Ember or even Typescript, there’s probably a Skeleton project you can get started with.
Even if you can’t find a skeleton project that completely fits what you need, Brunch’s simple config language will allow you to quickly comprehend what is going on in each of these projects and you can easily build your own solution.
Just Another Tool
I don’t expect Brunch to be adopted overnight. Nor do I expect Brunch to replace Webpack or some of the other tools out there. Brunch is just another tool you can use in your arsenal. Different tools do different things, and Brunch is no different.
Code splitting and Hot Module Replacement are two things that Webpack does really well, but Brunch has lagged behind on (for various legitimate reasons). That being said, Brunch has recently released an experimental entry point feature and they are also working on its own version of Hot Module Replacement.
It’s hard to find a quicker, easier, and simpler solution.
If all you need is a super simple way to get started developing your app on your favourite frameworks (like React, for example), it’s hard to find a quicker and easier solution than something like Brunch.
So give it a try, maybe you’ll find it as useful as I have found it to be.
Edit (August 1st, 2016)
Facebook has released create-react-app, a new officially supported way to create single-page React applications. It offers a modern build setup with no configuration.
Even with the advent of this release, Brunch still fills an important gap. With create-react-app (CRA), you are given a basic app with almost no special features out of the box. That’s fine, but there’s also no way for you to configure it.
If you really need to configure it, you can choose to eject the app, and your app will be converted into a typical Webpack app with all of the configuration files used to power the basic CRA app.
This is a huge problem.
On the one hand, you have an app that’s very easy to use, but completely non-configurable. On the other hand, you can eject the app, but now you are faced with an enormously complex Webpack app. This is a ridiculous jump in difficulty that we can’t expect beginners to overcome.
For the time being, Brunch is still a fantastic option for building simple, configurable, and powerful React apps.
Small Update (January 26th, 2017)
Webpack v2 has now been released, and it’s a LOT better than before. But going through the migration guide, and building a simple todo app, I still think that the developer experience of Brunch is a lot more pleasing.
Don’t get me wrong, Webpack is certainly much more powerful than Brunch. And now that we have CRA (and it has matured a LOT), maybe it’s not so crucial that we use Brunch after all.
That being said, I still think Webpack has a lot of room to grow from the ease-of-use perspective. These days, I prefer using Next.js. It seems to do everything that I need without requiring me to dive into huge configuration files. Some of my other favourite bootstrapping projects are React-Boilerplate and React Go.
