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 2: Generating a Backbone.js Project with Yeoman
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!
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.