Say Yo to Yeoman

According to yeoman.io, “Yeoman is a robust and opinionated set of tools, libraries, and a workflow that can help developers quickly build beautiful, compelling web apps.” Let’s dig in and see exactly what this means!

Yeoman

        _   .--------------------------.      _|o|_ |    Welcome to Yeoman,    |       |_|  |   ladies and gentlemen!  |     / \Y/ \ o_________________________|    ||  :  |//    o/ --- \      _\ /_

A great deal of work goes into building web apps these days. There’s countless libraries out there to use, patterns, styles, grids, boilerplates, bootstraps…the list goes on! Yeoman is an answer to some of these issues. Rather than having to waste a bunch of time getting an application up and running, Yeoman does the brunt of the work for you – only requiring a few commands.

Before we move forward, we have to install it!

The fastest way to begin using Yeoman is by running the following script.

curl -L get.yeoman.io | sh

So, that was easy. What just happened? Lots of things! The install.sh file off ,get.yeoman.io, has a header that describes exactly what occurred.

# * Detect Mac or Linux, pick which package manager to use# * On Mac, install homebrew if it's not present# * Then install these: git optipng jpeg-turbo phantomjs# * Make sure Ruby >= 1.8.7 is around, install if not (for Compass)# * Install the latest NodeJS package# * Install Compass# * Download Yeoman zip to a temporary folder# * Install it as a global node module

And there ya have it!

Use it

Yeoman is installed as a global Node module, so pop open your TOC (Terminal of Choice), and run yeoman.

The first time this runs, it will enquire if you want to allow them to keep stats on your Yeoman usage. They actually have a Google Analytics account setup to track all kinds of interesting usage statistics.

Simply running yeoman from now on will print out a list of the commands that are available to execute.

yeoman init

This is where the scaffolding magic happens. Run the following command for a basic scaffolded app.

                yeoman init            

This command will ask five questions:

Out of the box, running init will include HTML5 Boilerplate, and jQuery and Modernizr. Here’s a more expanded list.

• HTML5 Boilerplate for the main base
• Compass Twitter Bootstrap for the SASS files as the CSS files are authored in SASS
• Twitter Bootstrap for the optional list of JavaScript plugins (optional)
• RequireJS for AMD module and script loading support (optional)
• RequireHM for experimental EcmaScript 6 module syntax support on top of RequireJS (optional)

It will also compile CoffeeScript and Compass files right out of the box!

Generators are the magic behind all of the scaffolding. The init command, itself, is based on a generator. There is a separate repository for them. There are many available already, including Backbone, Ember, and Angular to name just a few of them. To view a list of all them, simply run…

yeoman init --help

Generators are a huge part of Yeoman, and are meant to be modified and added to.

If you want to create your own Backbone.js application, you could simply run:

mkdir backboneapp && cd backboneappyeoman init backbone

This will build a project with several boilerplate models, views, collections, preloaded with Lodash, Mocha, jQuery and HTML5 boilerplate.
You can do the same with angular and ember as mentioned previously.

There are various sub generators as well, which allow you to do things, like:

yeoman init backbone:view awesomeViewyeoman init backbone:model awesomeModelyeoman init backbone:collection awesomeCollectionyeoman init backbone:router awesomeRouter

Then BAM, you’ll have some new codez to work with, rather than wasting a bunch of time rewriting boilerplate code!

yeoman build

Under the covers, you’ll find Grunt, which a popular framework, created by Ben Alman (Cowboy), for building JavaScript applications. It relies on a grunt file of configuration options that configure tasks to perform various operations, such as linting, combining, minifying, etc.

Yeoman is built on top of Grunt, but extends it to provide some new modifications and features. These include:

• JSHint
• Compiling CoffeeScript and SASS
• Building RequireJS applications, using r.js
• Concatenating, minifying, and compressing PNGs and JPEGS
• Running tests with PhantomJS
• Building an application cache manifest
• And a few others.

The configuration will be placed within a gruntfile.js file in the generated app. When you’re finished developing, run the following to build the app.

yeoman build

Your newly built app will be placed within a dist/ folder. One cool feature is how Yeoman will take script references, such as:

            <!-- build:js scripts/scripts.js -->            <script src="scripts/vendor/jquery.min.js"></script>            <script src="scripts/vendor/lodash.min.js"></script>            <script src="scripts/vendor/backbone-min.js"></script>            <script src="scripts/main.js"></script>            <script src="scripts/views/application-view.js"></script>            <script src="scripts/models/application-model.js"></script>            <script src="scripts/collections/application-collection.js"></script>            <script src="scripts/routes/app-router.js"></script>            <script src="scripts/models/photo-model.js"></script>            <script src="scripts/collections/photos-collection.js"></script>            <script src="scripts/views/flickr-view.js"></script>            <script src="scripts/views/photoItem-view.js"></script>            <!-- endbuild -->            

And, after running the build, concat and minify those files down to a single script reference. That’s twelve HTTP requests down to one!

            <script src="scripts/47ce0679.scripts.js"></script>            

Each of the steps for the build process can be found in gruntfile.js, which is generated when the app is created. There are several build target options as well.

yeoman server

Yeoman also offers a built-in hosting server to test your app locally. LiveReload or simple file watching if you don’t have LiveReload also ensures that, when running the server, any changes to files in the app will automatically reload the browser with the new changes. By default, the port that it will run on is 3051. By running the following…

                # Run this for the non-built versionyeoman server                                # Or this for the built version                yeoman server:dist

A new browswer window will pop up with your app running. The server will also compile Coffee and Sass assets, and place them within a temp directory. So you don’t have to worry about compiling! There are several other server targets; be sure to check them out.

yeoman test

Mocha is a popular unit testing framework and is built into Yeoman. When a project is scaffolded, a test folder with an index.html file is created with Mocha and Chai for assertions. Simply run:

yeoman test

Yeoman will then run Mocha against PhantomJS, which is a headless webkit browser that runs inside of Node.js. Then, you can feel free to add new tests into the index.html file. Unit testing can greatly enhance any application, and Yeoman makes the process as easy as possible. So there’s no excuses anymore! You can also use Jasmine, if you prefer, by passing --test-framework jasmine to the yeoman init command.

yeoman install

To install new client libraries into your application, Yeoman uses a library, called Bower which is developed by some of the folks at Twitter.

Bower is a package manager for the web. Bower lets you easily install assets such as images, CSS and JavaScript, and manages dependencies for you.

Yeoman allows for the following commands:

# Install any package(s) space delimitedyeoman install jquery # Uninstall thingsyeoman uninstall jquery# Update thingsyeoman update jquery# Installs underscore also since backbone depends on ityeoman install backbone# List out all of the installed thingsyeoman list# Go find stuff specifically based on a nameyeoman lookup mocha# Go find stuff based on a keywordyeoman lookup underscore

Bower is an excellent addition to Yeoman, and solves the workflow issue of having to constantly retrieve libraries, when building apps. It alsoensures that they are up to date. Here’s an example of how you could use Bower.

            bower install jquery            bower install git://github.com/maccman/package-jquery.git            bower install https://code.jquery.com/jquery-1.7.2.js            bower install ./repos/jquery            

The apps installed with bower will be stored in a component.json file at the root of the application.

Put it All Together

Let’s create a simple Backbone application from start to finish.

# Create a new appyeoman init backbone# Create a new model and collectionyeoman init backbone:model photoyeoman init backbone:collection photos# Create a some new views for flickr public photosyeoman init backbone:view flickryeoman init backbone:view photoItem# WAVES HAND AND ADDS LOTS OF CODE# https://github.com/jcreamer898/yeomanbbappyeoman server# Build ALL THE THINGS!yeoman build# Check out the new build man...yeoman server:dist

Wow, it’s almost too simple – and don’t forget that you can create Bash aliases to further shorten this code. The hardest part was creating the sample app! But, that’s the beauty of it. Yeoman takes you away from
the boilerplate code, and allows you to focus exclusively on the hard stuff!

If you’d like, take a look at the app to see how things went. I’d say pretty well.

Conclusion

Yeoman can rapidly speed up the development process for a new application. Rather than wasting time gathering libraries and writing boilerplate code, instead, type a few commands, and you’re up and running! Even better, it’s open source and written by a couple of guys you may know! (Addy Osmani and Paul Irish).

Enjoy!