I recently started working on a new web app, and instead of just cloning one of my previous efforts, I scanned the forums to see what sort of tools and templates are hot right now. I’ve used the HTML5 Boilerplate as a template before, and there is nothing wrong with it, but I wondered whether there was a simple way to customise it for my needs. That’s when I came across Yeoman – The web’s scaffolding tool for modern webapps.
Yeoman not only generates a template for your web application or website, but also includes an entire front-end stack – a customised set of tools and frameworks for whatever kind of application you are building. By default it includes Grunt (a build tool) and Bower (a package manager). I had never used either of these before, but I have used build tools before, like Maven and Ant (with Java), and package managers like npm and Homebrew. So I thought great, lets get started.
It all started off rather well… I had my new web app template generated within a few minutes by running Yeoman’s ‘yo’ command and picking the options I thought I wanted. Next I needed to configure Bower and Grunt…
Like Grunt, Bower is also a Node.js command-line tool, but with the express purpose of managing packages for your project. It will download them for you, install them, manage dependencies between them and tell your application where to find them. And it keeps track of all of this in your bower.json file. For this app I am only really using JQuery and JQuery Mobile so I didn’t spend too long playing around with Bower, apart from trying to remove some packages that were included and that I didn’t need. So, I have yet to see the possible benefits.
Regarding Yeoman, I haven’t needed to go back to it since scaffolding the original template for my app, but I will certainly check it out again for the next one. I might just be a bit more discriminating about the options I pick… and only pick what I know I need. Grunt I have gotten to know a lot better now and will most definitely be using again. I particularly like the live reload feature – so I don’t have to keep hitting the refresh button. Bower, I probably need to try tinker with a bit more before I make up my mind.
It’s about the journey, not the destination.