Yoooman! 5 Awesome Yeoman Generators You Should Use Now (Part 3)

  • Article

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

Welcome to Part 3 of my Yeoman Tutorial Series! In this part, I will explain what yeoman generators are and share my 5 favorite Yeoman 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 generators 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. These are my five favorite yeoman generators.

#1 – Backbone.js Generator

Install: npm install -g generator-backbone

Usage: yo backbone myapp Backbone.js is a popular framework for giving your web applications a structure and common base for handling data, views, event-handling, REST APIs and more. This generator provides the boilerplate for a front-end application using Backbone and it comes with sub-generators for models, collections, views and routers.

A couple of things you should know:

  • It is important for you to pass an app name to the generator or else all the namespacing the JavaScript code becomes odd.
  • You can choose to include Twitter Bootstrap but oddly enough it only gives you the SASS version. Although, it will generate the Grunt task to compile it for you, however it uses the Compass project to do that so that’s an additional dependency you should remember.
  • The views will also generate templates that are meant to be compiled with the grunt-contrib-jst plugin by default which can be annoying for some who don’t want to rely on grunt serve or grunt build to develop their projects.

#2 – AngularJS Generator

Install: npm install -g generator-angular

Usage: yo angular AngularJS is a popular JavaScript framework with support for models, views, routes, etc. that is has grown tremendously over the last year. It takes a different approach towards structuring complex apps than Backbone.js. The generator includes sub-generators for controllers, directives, filters, routes, services, providers, factories, decorators, views, etc.

A couple of things you should know:

  • The generator will give you the option to include Bootstrap with SASS and Compass.
  • You have to run generators from the root directory of your app.
  • It comes with additional modules, you need to look at the bower.json file.

#3 – Reveal.js Generator

Install: npm install -g generator-reveal

Usage: yo reveal

If you're giving a talk about web technologies, it is convenient to run your presentation straight in the browser. Reveal.js is an awesome presentation framework. As you might guess, there is a specific structure your HTML and styling your CSS needs to take for the presentation framework to work. As a result, the yeoman generator framework can scaffold the code for your slides. You can just use the slide sub-generator.

#4 – Ionic Generator

Install: npm install-g generator-ionic

Usage: yo ionic

If you are building hybrid HTML5 mobile apps with the Ionic Framework, you need to take a look at this generator. The generator supports browser and emulator LiveReload, integration with the ionic cli and support for AngularJS.

#5 – Bootstrap Generator

Install: npm install -g generator-bootstrap

Usage: yo bootstrap

Twitter Bootstrap is a popular CSS framework, so popular that it has become instantly recognizable. The Bootstrap generator is fairly simple and presents you with 4 choices to start a Bootstrap project: CSS, LESS, SASS, Stylus. You can choose any one of these CSS frameworks and the generator will download them for you in the bower components of your project. You should be using this generator in conjunction with other generators.

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.

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