Introduction to Yeoman

Yeoman describes itself as the ‘The web’s scaffolding tool for modern webapps’. When I first looked at yeoman, a few months ago, I very quickly dismissed it as not for me. The main reason I did is it looked liked a magical wrapper around Grunt and Bower. Calling itself a scaffolding tool I thought I would hide many of the implementation details that I thought I should be learning. I also foresaw very little benefit atop mastering grunt and bower individually, which looked like they were doing the majority of the work.


Well I have started looking again and I have changed my mind drastically. I decided I needed to look again after watch this excellent talk from Paul Irish. Yeoman fulfils one role fantastically and that role is as a demonstrator. When pushing yourself to learn new techniques I find myself looking at a lot of other peoples code. This is great but most of the time you find yourself looking at a finished product. This means that the implementation details such as build steps are hidden around all the actual code. Trying to learn about simple grunt tasks by looking at the JQuery repository will feel overwhelming. Even though you might be aware that you should only need to look through their grunt file you are never sure if something they are running in the gruntfile is dependent on a particular structure elsewhere in the repo. This is were Yeoman steps in, Yeoman’s scaffolds are all the unglamorous bits of a project with all the excitement of the application stripped away.

Being a scaffolding system it is opinionated, many of the individual scaffolds are not overly flexible. Being a relative newcomer however studying these scaffolds has ended up me arriving at the realisation that the workflows promoted in these proto applications are superior to what I was managing on my own. I now make frequent use of Yeomans webapp scaffold.

Getting started with yeoman.

Read about grunt, bower, node & npm. You don’t need a deep understanding of any one of these. However understanding what each is for can be useful when working out how the whole thing fits together. 

With that out of the way lets get started. Assuming that npm is up and running yeoman is installed using

npm install -g yo

yo then becomes a global command. Running yo brings up a helpful list of options which will walk you through things like finding and installing a generator (project template) as well as building a new project from a template.

All yeoman generators are separate packages and can be installed directly with npm. To install the webapp generator and use it.

npm install -g generator-webapp

mkdir newProject

cd newProject

yo webapp

Next steps

Open the project and have a look around. Even if you never use a generator in one of your own projects you will learn a lot.

Some other scaffolds I have found interesting