Outdated content! This is a snapshot of my website pretty much as it was before a new version replaced it some time in 2016. As far as I could recover, this is the earliest version of this site.

You can find the most up to date content at: https://romaricpascal.is

Front-end toolbox: Grunt and Bower

Modern web apps are becoming bigger and bigger. And bigger apps means we need to think more about how to structure them, and also how we structure our development process: how do we build the app? how do we test it?...

Fortunately, we get more and more tools to make our development process easier through automation. There are two I find particularly helpful:

Grunt

Grunt logo

Grunt is a tool for running Javascript tasks, which comes pretty handy to define the different steps needed to build your project. Think of it like the equivalent of Ant for Java (minus the verbose XML syntax), or Rake for ruby... You list the tasks your build needs to perform in a file called Gruntfile.js and let Grunt run them.

In itself, Grunt is just the task runner. It relies on a big catalog of plugins to bring in the actual build steps from concatenating and minifiying your scripts to optimizing images, or even making your browser reload when you make changes in your code (will save the life of your F5 key ;)).

Bower

Bower logo

Bower is a dependency manager for Javascript client applications. A little like what NPM is for Node.js. You list the libraries you need in a file called bower.json and bower will get them all for you when you type bower install.

It might not sound as big as what Grunt brings to the table, but I find it really worth it:

  • it saves the hassle of going to each library website and download them one by one (obviously),
  • it makes upgrading library versions easier,
  • it provides a clear view of the library the project uses,
  • it makes the repository leaner, as it no longer needs to contain the libraries, just the bower.json file.

The available libraries are listed in a central registry. But in case you need a library that's not there, Bower support Git or even simple HTTP urls to get your library.

Other tools on my radar

I now use Bower and Grunt in all my Javascript projects. There's also a few projects I keep an eye on and might try at some point:

  • Yeoman for scaffolding apps and files and start projects faster
  • CasperJS for headless browser testing
  • The Intern to help with testing

It's exciting to see people coming up with amazing new tools to help us develop faster. What tools do you use to make your front-end developer life easy?

comments powered by Disqus