An Introduction to Scaffolding with Yeoman

0
7004

Scaffolding in the computing context refers to two techniques – one is for the generation of code related to database access in some model-view-controller frameworks, and the second is a project-generation technique supported by other tools. Yeoman is an open source scaffolding tool for Web applications that helps developers to get started on a project.

Scaffolding, also called staging, is a temporary structure used to support people working in high, inaccessible places, particularly on construction sites. Scaffolding, when used in computing, refers to one of the following two techniques:

  • A code generation technique related to database access in some model-view-controller frameworks; or
  • A project generation technique supported by various tools.

Code generation

In the technique supported by some model-view-controller frameworks, the programmer can specify how the application database may be used. The compiler or framework uses this specification, together with pre-defined code templates, to generate the final code that the application can use to create, read, update and delete database entries, effectively treating the templates as a scaffold on which to build a more powerful application.

Scaffolding can occur at two different phases of the program’s life cycle—at design time and runtime. Design time scaffolding produces files of code that can later be modified by the programmer to customise the way the application database is used. Runtime scaffolding produces code on-the-fly. It allows changes to the design of the templates to be immediately reflected throughout the application.

Scaffolding techniques based on the application database typically involve server-side frameworks. Server-side Web frameworks commonly perform operations directly against database entries, and code generation for these operations may be considered server-side scaffolding. Client-side development often uses frameworks that perform data transport operations instead of directly accessing the database. The focus of client-side scaffolding is thus more on generating a starter template for the application, as a whole, rather than generating code to access a database.

Project generation

Complicated software projects often share certain conventions on project structure and requirements. For example, they often have separate folders for source code, binaries and code tests, as well as files containing licence agreements, release notes and contact information. To simplify the creation of projects following those conventions, scaffolding tools, such as Yeoman and Cargo can automatically generate these conventions at the beginning of each project.

Yeoman

Yeoman is an open source client-side scaffolding tool for Web applications. It runs as a command line interface written for Node.js and combines several functions in one place, such as generating a starter template, managing dependencies, running unit tests, providing a local development server, and optimising production code for deployment.

Yeoman helps you to kick-start new projects, prescribing best practices and tools to help you stay productive. Yeoman itself is a collection of three tools: Yo, Grunt, and Bower. Combined, these tools provide everything a developer needs to get started on a project.

Bower: One of the tools used by Yeoman is also the very popular Bower. To sum it up briefly, Bower is a package manager for front-end libraries. This means that it allows you to update to the latest version of jQuery, LESS and Bootstrap in just a few minutes.

Grunt: Grunt is a task runner for projects. It does all the repetitive hard work—essentially, work that can be automated, like compiling Less/Sass files.

Yo: Yo is a tool from the same team that maintains the Yeoman project. It offers Web application scaffolding, which also functions as a generator creating all the scaffolding that you commonly include in every project.

Each of these tools is developed independently, but all have great communities that ensure their continued advancement.

The Yeomen core system

There are basically three components to the core system:

  • Yo, the command line interface to use Yeoman.
  • The environment, which finds, registers and runs the generators.
  • The base classes you extend to create your own generators. Those classes contain the helper methods to ease the authoring of your generators.

Installing Yeoman

To install the Yeoman suite of tools, you will need to have npm and Git already installed on your system. If this is not the case, you can install npm by downloading the appropriate version of Node.js for your system. The Node package manager (npm) is included with the install of Node.js. Git can be downloaded from the project website.

Once you have npm up and running, you can install the Yeoman tools using the following command:

npm install -g yo

This will install Yo as well as Grunt and Bower, if they are not already on your system.

Installing generators

Yo works by using generators to scaffold Web applications. These generators define the structure of the application as well as any dependencies you might need. Generators are available for a wide range of different applications, from a standard Web app to an application that uses Angular.js or Backbone. Generators are installed using npm. In this article, we’re going to focus on the standard Web app generator.

npm install -g generator-webapp

Using a generator

Once you have your generator installed, you can use it by calling Yo on the command line and passing it in the name of your generator, as follows:

yo webapp

This will scaffold the Web app in your current working directory. You may want to create a new folder and then change the directory before executing the Yo command.

mkdir my-app

cd my-app

yo webapp

Contributing to Yeomen

It can sometimes be hard to know where to start contributing when looking at a large project like Yeoman. The easiest way to start is to get involved with the community.

  • Hang out in the Gitter rooms (https://gitter.im/yeoman/home).
  • Answer questions on StackOverflow (#yeoman).
  • Attend local meetups and speak with your colleagues!
  • Help people who ask questions on issues related to Yeoman (https://github.com/yeoman/yeoman) and the generator’s repositories.

LEAVE A REPLY

Please enter your comment!
Please enter your name here