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 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:
- 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
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.
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.