, , ,

Creating Web Apps Using Yeoman

yo

As front end developers go we have many tools at our disposal. Among those tools, numerous as they may be, I have been learning one that sticks out. His name is Yeoman, and he is here to make our lives easier. Although he is here to help, he has some strict uses and can be opinionated at times. All that said he gives you the tools to create web applications, test them, and even deploy them with confidence.

In this I will be giving out a quick primer of yeoman. This is in no way a comprehensive look into our good friend, since I am still learning more and more about him. However I would check out the documentation he comes with(http://yeoman.io/) since they are plentiful in knowledge.

 

Introduction

Simpler said than imagined, Yeoman is a set of tools in which someone can create awesome web apps from. To elaborate more, he is a scaffolding application that uses a couple of other tools to help build out your applications. These tools are Bower and the much widely used Grunt. Each one of these has a unique job to perform, and they will be further explained below. I do want to clear up some misconceptions about Yeoman; the first being that it is only a Unix tool. Windows is fully supported, and in fact I use Windows to develop at the present moment and I have yeoman installed and working, generators and all.

One other thing to remember is that yeoman is NOT a one size fits all solution for web development. For example using yeoman for a static HTML page is not recommended as all the tools and scripts that are included will create unneeded clutter on your server.

 

Installation

Installation is pretty simple, you can install Yeoman through the node package manager. As implied you need to have node installed onto your machine (http://nodejs.org/), as well as Git, and to be safe Ruby and Compass.

To install you open up the terminal and throw in the following command and npm will go out and get everything we need.

npm install -g yo

And there you go, of course there’s more, but for now celebrate.

 

Yo

Now that we know some background info on our friend lets dig into what he can do. For those who have used Grunt this does not take the place of Grunt but is a wrapper working alongside Grunt. With Yeoman we have the added benefit of scaffolding out our web app which can be achieved from the Yo command. This scaffolding is achieved through the use of generators. A generator can be thought of as a plugin but with so many possibilities! We have some basic generators that can give us a simple web application, and some that can make use of AngularJS in our applications. Custom generators can also be written to perform tasks that we use on a daily basis. For example a generator can be written to include unit tests, adding dependencies, and can be shared publicly. I may write another tutorial on the subject next time in fact.

In our case we will just be using the webapp generator, this will provide what we need within the scope of this article. Using the terminal you simply call:

yo webapp

Simply calling that command uses the built in web app generator which scaffold out your application giving you the directory you will need. Yeoman will ask you some questions to help you make the application you’re own. I usually select all the options with the exception of using Compass ( I don’t yet know Compass). This will include the usual modernizer and bootstrap!

The directory that was built out for you includes an app folder with all your application files would be. This includes images, styles, scripts, and html pages. outside of that folder you will see the node modules which has all of our grunt, node, and yo files. Lastly on the root of the folder we see some of our config files for the app.

Take note of the package.json file as this will keep a list of all your app information and  dependencies:

"name": "yotodo",
"version": "0.0.0",
"dependencies": {},
"devDependencies": {
"grunt": "~0.4.1",
"grunt-autoprefixer": "~0.4.0",
"grunt-concurrent": "~0.4.1",
"grunt-contrib-clean": "~0.5.0",
"grunt-contrib-coffee": "~0.7.0",
"grunt-contrib-compass": "~0.6.0",
...
}

Now that we have our application scaffolded and ready to be added to lets move to our other new friend Yeoman comes with.

Bower

Bower, created by twitter is our quieter friend. He comes when we need something and runs out to the interwebs to get it. He’s like Ray Liotta in that movie (without the laugh). Bower is our package manager that comes with Yeoman. The idea is, again, when we need something for our application we simply call upon bower to get it. For example if I wanted to pimp my application I wouldn’t call Xzibit (bad joke), I would call:

bower install jquery

And look at that! bower wen and got what I needed, it wasn’t sure version I wanted so it listed the different versions and let me pick, awesome sauce!

Grunt

Finally we come to Yeoman’s best friend Grunt! We use Grunt for many things, some awesome, some really awesome! Grunt is our task manager, we can use him for things such as testing, automation, and distribution. Our tasks can be managed through our Gruntfile.js:

// Generated on 2013-12-17 using generator-angular 0.6.0
'use strict';

// # Globbing
// for performance reasons we're only matching one level down:
// 'test/spec/{,*/}*.js'
// use this if you want to recursively match all subfolders:
// 'test/spec/**/*.js'

module.exports = function (grunt) {

// Load grunt tasks automatically
require('load-grunt-tasks')(grunt);

// Time how long tasks take. Can help when optimizing build times<
require('time-grunt')(grunt);
…
  ]);
};

Grunt is also used for running your application server using the grunt server command. It will boot up your application and open a web page, it will also utilizes livereload as well so we can see our changes in real time.

Best feature ever is the grunt build command. Call this and see the magic happen:

grunt build

This powerhouse command goes through all your files and performs a number of tasks. It starts to minify your scripts, it will also concatenate your script files, and finally optimize your images to load better onto your server. It loads all of this into fun new folder called dist, these files are ready to upload into your server. And that’s all! I love this command because it does most of the back end leg work for us, I love it.

 

Conclusion

In conclusion, Yeoman is a tool that should be on the belts of all web developers. It’s not a one size fits all application since it can be pretty intense with the amount of options that you have at your disposal with this set of tools. I have personally been using it in a couple of applications, in fact I am using it to go along with a blog that I am building using AngularJS, more on that later. Below are some more references that can help you get started with Yeoman.

http://yeoman.io/

http://net.tutsplus.com/tutorials/javascript-ajax/building-apps-with-the-yeoman-workflow/

http://www.html5rocks.com/en/tutorials/webcomponents/yeoman/

http://newtriks.com/2013/06/11/automating-angularjs-with-yeoman-grunt-and-bower/

0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply