Yoooman! Generating a Backbone.js Project with Yeoman (Part 2)

This tutorial series will teach you the basics of Yeoman ; how to set it up on Windows, how to use the tools and generators, how to create your own generators. I will also share my top 5 favorite yeoman generators along with a short review. You are expected to know HTML5.

Level: Beginner to Intermediate. Part 1: Getting Started with Yeoman

Part 2: Generating a Backbone.js Project with Yeoman

Part 3: 5 Awesome Yeoman Generators You Should Use Now

Part 2 – Generating a Backbone.js Project with Yeoman

Welcome to Part 2 of my Yeoman Tutorial Series! In this part, I will explain what yeoman generators are and show you how to generate a Backbone.js project using yeoman’s scaffolding tool and generators.

What are Yeoman Generators?

Yeoman is a tool designed for front-end web developers. It helps you start new projects right by providing a generator ecosystem. A generator helps define the scaffold for your projects and generates useful code for your starter project. Some generators are multipurpose and allow you to further scaffold more pieces of your applications (they are called sub-generators).

There is a huge ecosystem of open source generators created by a community of contributors.

Generating a Backbone.js Project

Backbone.js is an open source front-end web framework that gives structure to web applications by providing models with key-value binding and custom events, collections with a rich API, views with declarative event handling, and a lot more. It is a very popular and easy to read front-end framework. It doesn’t require a ton of effort to understand.

Installing Ruby and Compass

Now there’s a few extra things you will need to get the grunt tasks working as they rely on Ruby and Compass being installed on the path. You will also need jpegtran. To install Ruby and Compass using Chocolatey, you can simply run:

choco install ruby

Restart the Command Prompt and run:

choco install compass

choco install jpegtran

Otherwise, you will have to install Ruby using the RubyInstaller and execute the following on the Command Prompt to install Compass. Make sure that the Ruby bin folder is in the PATH environment variable.

gem install compass

You will also need to download the jpegtran.exe executable and put it in a folder on the PATH.

Using the Backbone Generator

To get started you will need to install the Backbone generator using NPM in the same way as in Part 1.

npm install -g generator-backbone

The next step is to generate the basic scaffold of a HTML5 Backbone project and you can pass it an application name.

yo backbone [app-name]

Now that your project is up using the scaffold, you can use sub-generators to create models, views, collections, routers.

yo backbone:model blog

yo backbone:collection blog

yo backbone:router blog

yo backbone:view blog

To run the server, you just need to run ‘grunt serve’. Voila!

clip_image002 clip_image004

Conclusion

Yeoman is a great tool designed for front-end web developers. It helps you start new projects on the right foot and is a very powerful addition to every front-end developer’s arsenal. Stay tuned for Part 3!

You can stay up to date by following my twitter account @ramisayar.