Modern Workflows for Modern Webapps

This chapter will cover the three core tools that make up the Yeoman workflow, how to use these tools in development, and how to incorporate this workflow into new or existing projects.

In this chapter, you will learn the following topics:

  • The Yeoman tools and architecture

  • Downloading and installing Yeoman

  • Features of Yeoman

  • Using the Yeoman tools

An overview of Yeoman

The term modern webapps is a relatively new thing, as the Web is still in its infancy stage. As the Web matures, so does the need for developer tools and workflows, thanks to some modern-day Web pioneers over at Google. Paul Irish and Addy Osmani have developed a modern workflow that goes by the name of Yeoman.

The Yeoman workflow is a collection of three tools to improve developers' productivity when building web applications: Yo is the scaffolding tool, Grunt is the build tool, and Bower is the package tool.

  • Yo is used to scaffold things such as projects and files from templates

  • Grunt is used for task management, testing, code linting, and optimization

  • Bower is used for package management and to manage client-side dependencies

Yeoman's architecture

The Yeoman toolset runs in the Node.js environment and is invoked from the command line. Each tool is installed using Node's package manager (npm) and uses the npm repository to manage all plugins.

Node's package manager

Node.js is a platform that is built on Chrome's JavaScript runtime engine. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight, efficient, and perfect for real-time applications that run across distributed devices.

The official package manager for Node.js is npm. From Node versions 0.6.3 and up, npm is bundled and installed automatically with the environment. The npm package manager runs through the command line and manages the application dependencies that are available on the npm registry.

Note

The current Node.js version used in this book is v0.10.28.

Features of Yeoman

Before we dig deep into using each tool of the workflow, let's take a look at some of the Yeoman tooling features that will help you in your next project:

  • Quick install: Easily installs all three tools from the npm repository using one command

  • Scaffolding: Fast and easy-to-use command-line tool to create new projects or files from templates that individual generators provide

  • Build process: Tasks for concatenation, minification, optimization, and testing

  • Preview server: Connect LiveReload server to preview your application in the browser

  • Package management: Search, install, and manage project dependencies via the command line

  • Code linting: Scripts are run against JSHint to ensure language best practices

  • Automation: A simple watch task to compile CoffeeScript, LESS, or SASS, and reload the browser upon changes

  • Testing: Executes JavaScript code in multiple real browsers with the Karma runner

  • Optimization: Images are optimized using OptiPNG and JPEGtran, and HTML is optimized using the HTML minifier

The preceding features are dependent on what the individual generators provide via Grunt tasks. By default, the Angular, Backbone, Ember, and other webapp generators provide tasks to perform all the features listed.

Note

Grunt tasks are individual plugins that perform specific operations on files or folders.