Google Yeoman does the heavy lifting for web app creation

Google's Yeoman simplifies configuring and maintaining your application's building blocks. Here's how to use the workflow tool.



The days of developing an application completely from the ground up are over. A big trend in the past year is to embrace application frameworks (e.g., Bootstrap and YAML) and code libraries (e.g., MooTools and Modernizr).

With so many options available, it can be difficult to decide what to use. Then, once you make a choice, setting up the environment and keeping things up to date is quite a chore. The Yeoman project from Google promises to simplify configuration and maintenance of the building blocks, while you focus on application development.

A workflow tool

The Yeoman site and documentation properly describes it as a workflow tool. Yeoman provides a set of web development tools and has three basic elements: scaffolding, build, and package management. The scaffolding can include any number of frameworks and libraries with a solid base of HTML5; that is, it creates the structure of scaffolding for a web application and builds everything necessary (like going from Sass to CSS), along with managing all of the necessary framework and library packages so everything works as planned.

A few commands at the command line and an application's basic shell is ready, but you still need to install all necessary files and tools before properly using Yeoman.

Installation and setup

Yeoman includes three basic tools: Yo, Grunt, and Bower. Yo creates the web application structure and artifacts; Grunt builds the application; and Bower concentrates on package management. The only tool you need to install is Yo, as it will install Grunt and Bower. 

Installation is simple -- just follow the documentation for Yeoman. You do need to install Node.js, Git, and Ruby. The Yeoman documentation says Ruby is optional, but I have yet to find an instance where I didn't need it since Sass requires it. My experience is limited, so I'm sure there are scenarios where it's not necessary.

With everything installed and set up, you install Yo via npm (npm install –g yo). It works on all common platforms; I have it running on my OS X and Windows 7 machines.

Code generation

You have the basics installed, with Yo being the main tool that will be used to create applications, but it requires generators to get this done. The webapp generator is the basic one used for creating front-end web applications.

With the Yeoman environment set up, the Yeoman webapp generator is easily installed via npm (npm install –g generator-webapp). Once this command is entered, you'll see a number of messages scroll across the screen, finishing with information on where it's installed.

In addition to generating web applications, there are a number of generators available for creating other application types; examples include generators for Backbone, AngularJS, and mobile web applications. Using these generators follows the same path as the web application generator: install the generator via npm and use Yo to create an application using the generator. As an example, I'll create a web application to demonstrate how Yeoman works.

Creating a web application

Figure A shows the prompt presented when the web application generator is used via the Yo command; the rudimentary character displayed in Figure A is called the Yeoman. It asks whether you want to use Bootstrap and/or Modernizr (use spacebar to choose items) in your application. After you make your selection, hit Enter, and Yeoman will finish generating the application. The result is the basic scaffolding for a web application in a directory named App -- it's created within the directory in which the Yo command is executed.

Figure A



Using the Yeoman web application generator

Figure B shows the web application's directory structure; there are sub-directories for images, styles, and scripts and the basic index.html file, which is the application home page. 

Figure B



The directory structure for the web application

Figure C shows this page loaded for the web application generated in Figure A.

Figure C



The home page for the website generated by Yeoman.

Learning curve

My brief usage of Yeoman focused on working with web applications. I love the ability to install and update everything necessary, along with generating an application's basic scaffolding with a few commands. I've never used Grunt, so that's been a learning curve, and I'm not at a point where I can fully judge it.

One part of Yeoman that caused me distress is resource paths within the generated code; more specifically, my web applications (like the one in Figure C) have had problems utilizing CSS files (Bootstrap in this case). I tracked the problem to the path used within the generated files. The fix was as simple as updating the file path in the source code. I found online discussions about the issue, so hopefully it will be resolved in future versions.

Overall, I think Yeoman is a huge leap forward in configuring and managing an application environment.



By Tony Patton

Tony Patton has worn many hats over his 15+ years in the IT industry while witnessing many technologies come and go. He currently focuses on .NET and Web Development while trying to grasp the many facets of supporting such technologies in a productio...