THE WEB’S SCAFFOLDING TOOL FOR MODERN WEBAPPS – Yeoman

Răzvan Ciriclia
Software engineer
@Betfair

PROGRAMMING

Initiating a project can most of the times be boring when it is no longer a challenge.

YEOMAN - how can it help us? When starting a new project, in order to enhance productivity and the pleasure of working, Yeoman is based on three tools:

Yo

It helps creating the files structure and it already specifies general configurations for Grunt and Bower.

Grunt

Wouldn"t you find it interesting to know whether the CSS is valid and it will stay like that on a Friday evening, when you are ready to leave the office and you are reading "not working" between the lines of an email from your boss/ client?
Would you like the CSS, JS, HTML to be already optimized at least one day before getting into production?
Have you tested your code without remembering to check the load time? With the dev environment connected to the same network? Have you forgotten that Romania outranks USA, Germany, Norway, Japan and many other developed countries in international tops regarding the speed of connection to the Internet? Grunt will help you optimize the size of your images, without detracting from their quality!
Do you like to structure your work on modules so that everyone has their own CSS or JS files? Do you like to see files that are bigger than 100 lines only in production, where it is necessary to have as few loaded resources as possible? Grunt can do this for you by compacting CSS or minifying JS.
LESS or SASS - each one of us can choose either one or the other - Grunt knows them both.
The introduction on Grunt is a little short - but some of the qualities of a task runner could only have been presented briefly and to the point.

Bower

It saves time, downloading the libraries that are necessary to the new project, as well as its dependencies.

The correct usage, installation and running of YEO are conditioned by the installation in advance of Node.JS and Git. Also, generator-webapp must be installed via npm (npm install -g generator-webapp).

YEOMAN installation

YEOMAN will be installed just like generator-webapp, by using npm

npm install -g yo

PROJECT STARTUP

At this point, jQuery, Gruntfile.js and HTML5 Boilerplate are automatically installed and, besides these, you also have the opportunity to include in the recently started application, frameworks such as: Bootstrap, Sass or Modernizr. The entire period of time you have to wait in order to get access to the code and to start editing with the project specifications is approximately two minutes.

yo webapp

Practical example:

npm install -g generator-angular

It installs the generator for Angular Js based applications

yo angular:app imdbApp

It creates the basic structure for the current application "imdbApp"

yo angular:route movies

It creates a new path in the application, a view and the associated controller. The result of this command is:

It creates movies.js, the initial version of a controller in app/scripts/controllers

It creates movies.js, the initial version of a test in test/specs/controllers

It creates movies.html - template in app/views

It adds the movies path in the basic module app/scripts/app.js

It automatically generates the code for including movies.js in index.html

yo angular:controller movie

It creates movie.js, the initial version of a controller in app/scripts/controllers

It creates movie.js, the initial version of a test in test/specs/controllers

yo angular:directive
	   sampleDirective

It creates sampleDirective.js, the initial version of a directive in app/scripts/directives

It creates sampleDirective.js, the version of a directive test in test/specs/directives

yo angular:filter boldRed

It creates boldRed.js, the initial version of a filter in app/scripts/directives

It creates boldRed.js, the version of a filter test in test/specs/directives

yo angular:service getepisode

It creates getepisode.js, the initial version of a service in app/scripts/services

It creates getepisode.js, the version of a service test in test/specs/services

yo angular:factory getseasons

It creates getseasons.js, the initial version of a factory in app/scripts/services

It creates getseasons.js, the version of a factory test in test/specs/services

yo angular:provider getmovies

It creates getmovies.js, the initial version of a filter app/scripts/services

It creates getmovies.js, the version of a filter test in test/specs/services

yo angular:view seasons

It creates a view in app/views.

For running the project, from the root of the project, you run:

grunt serve

If the project was cloned from Git, due to the fact that the files from node_models are added in .gitignore, before running this command, you will also need to run:

npm install
bower update
grunt build

It creates the folder of files for production. In this phase, Grunt runs the tasks defined in Gruntfile.js, file that is found in the root of the project.

An example of an application developed with Yeoman can be downloaded here https://github.com/razvancg/yeomanDemo

Conclusions

For someone who has never worked with a code generator before, it may seem difficult to get used to YEOMAN. Given the option we have of no longer searching for the latest versions of some frameworks we need in the project, of downloading them, unzipping and copying them in the project location, besides the automatic generation of the file structure and the tasks we can set for Grunt, we can say that YEOMAN is "something we have lacked so far"!