# Yeoman

## Summary


Starting a new web app project often involves creating a basic structure of files and folders. Every web framework has its own conventions and recommended project structure. This is commonly called *scaffolding* of the project. Creating such a scaffolding is tedious. Yeoman is a Node.js module that simplifies this process. 

**Generator** is the term used by Yeoman to refer to the packaging and distribution of code that creates scaffolding for a specific type of project. For example, `generator-node` creates a Node.js project while `sls` creates a serverless project. 

For web apps, it automates mundane frontend tasks such as creating navigation, header or footer; or backend tasks such as creating APIs. Initially introduced for web apps, Yeoman's being used today for many types of project. Yeoman is open source, widely used, cross-platform, easy to use and based on the popular JavaScript language.

## Discussion

### Could you outline Yeoman's typical workflow?

A project will often have dependencies with other projects or packages. To bring in dependencies, we have **dependency/package managers** such as npm or Bower. These managers automate the task of downloading dependencies. 

A project will also need a **build system** such as Gulp or Grunt. In web apps for example, these build system will minify CSS and JS, and do other transformations on the code.  

A typical Yeoman workflow starts with setting up the scaffolding using the project's Yeoman **generator**. As part of the setup, a dependency file (`package.json` for npm) is created and the required dependencies are downloaded. Build configuration file is created and relevant build tasks are pulled into the project. 

Note that the generator itself doesn't have dependent packages or build tasks, which are separately developed and delivered by different teams in the open source model. But the generator's author knows what tools are useful for the project. The author may also decide to give users options. For example, when the generator is invoked, user may be given a choice to use Gulp or Grunt. 


### How is Yeoman better than native generators or CLI project tools?

Frameworks typically come with their own tools to create a sample project structure. For example, to build an Angular frontend app, `@angular/cli` provides scaffolding for a basic app with one static page. With Yeoman generators, we get many advanced options including promises, authentication, routing and a choice of desktop, mobile or PWA app.

Take the example of `ngx-rocket` generator for an Angular 7+ project. This includes a complete starter template, improved tooling, extensive base documentation, ready-to-use UI components, API proxy example setup for faster remote debugging, and generator output customization. For UI, we could choose Angular Material, Bootstrap 4 or Ionic. Mobile app uses Cordova, desktop app uses Electron, or we could use both in the same code base. Among output customization are SSO authentication, enterprise theming and service integrations. There's also a built-in development server with automatic reload when source files change. 

Moreover, Yeoman enforces good coding practices since the generators themselves are written by experienced developers. 


### What are Yeoman sub-generators?

A generator creates all the different parts of an application but what if you want to create only one part of the application? For example, a web app based on MVC pattern would include models, views and controllers. What if you want to create an additional view or model in an existing project? This is where Yeoman sub-generators are useful. 

One example is the Joomla3 generator by Diego Castro. The generator creates a Joomla 3.5 component but it also has sub-generators to create CRUD for a component, a module, a plugin, a template, a rule, and so on. Thus, generators create the basic scaffolding and sub-generators can help us add more parts to it as required.

A sub-generator is invoked using the suffix `:subgen-name` followed by instance name. For example, to generator an Angular project we would call `yo angular` but to add an Angular service (a sub-generator), we use `yo angular:service myservice`; or an Angular filter using `yo angular:filter myfilter`. 

It's also easy to pass data from generator to its sub-generator. 


### Which are the core components of Yeoman?

The core system has the following components: 

    + `yo`: This is the main command-line interface to use Yeoman. Users need to install this first and then install generators using this.
    + `yeoman-environment`: This is the runtime environment. It provides high-level API to discover, create and run generators.
    + `yeoman-generator`: This provides base classes that you can extend to make your own generators. These classes make it easier to create generators.All three components are open source and available in separate repositories on Yeoman's GitHub account. By studying the file `package.json` in these repositories, we can see that both `yo` and `yeoman-generator` depend on `yeoman-environment`. Thus, there's no need for developers or users to separately install the Yeoman environment.


### Is Yeoman only for JavaScript-based projects?

While Yeoman started with the idea of improving workflows of JavaScript-based projects, today it's used in many other types of projects. A generator is written as a Node.js module but otherwise it can target any project and create boilerplate code in any language.

An example is `generator-jvm` that creates a Java project. By passing the option `--type java-spring-boot` to this generator we can create a Java Spring Boot project. 

Another example is `generator-joomla3`. Joomla is a Content Management System (CMS) based on PHP and yet we have a generator (and many sub-generators) to simplify the workflow for Joomla developers. 

An interesting example is `generator-sls` that helps create a serverless project. This generator can create scaffolding targeting a number of languages as desired: Go, Node.js, Python, Java, C#. 


### As a beginner, how can I get started with Yeoman?

Head to the official Yeoman site and read Getting Started, Tutorials, and FAQ pages.

Start by installing `yo` CLI tool using the command `npm install -g yo`. Subsequently, you can install any of the thousands of generators already out there. 

Installing a specific generator is easy. To install `ngx-rocket` for example, type `npm install -g generator-ngx-rocket`. Refer to the documentation of that generator to know how to use it and create the project scaffolding. In `ngx-rocket` for example, we would start with the command `ngx new` and then respond to the prompts to customize the app. 


### What's the procedure for creating my own Yeoman generator?

The official documentation explains how to create your own generator. You can start by creating a simple generator that just gives a bunch of boilerplate files. You can also give developers options to create a customized project. Any generator you create must depend on `yeoman-generator`, which in turn depends on `yeoman-environment`. 

It's interesting to note that there's a generator to create a new generator. This is called `generator-generator` and this is probably the best place to start for beginners. Read the API documentation before updating the boilerplate output of this generator. The API documentation talks about modules, classes and mixins. The main class is named `Generator`. 

Note that `generator-generator` depends on the package called `yeoman-generator`, which is the base from which all generators are written. 

## Milestones

Sep  
2012

Yeoman v0.9 is released on GitHub. A project can be scaffolded using the command `yeoman init`. Yeoman is described as "a robust and opinionated client-side stack, comprised of tools and frameworks that can help developers quickly build beautiful web applications". Yeoman is said to be inspired by Rails Generator system. 

Aug  
2013

Version 1.0.0 of CLI tool **yo** is released. This replaces the older commands to execute Yeoman. 

Jun  
2019

As of June 2019, Yeoman has 8000+ generators. Some popular ones at this point include jhipster, loopback, hyperledger-composer, feathers, code, travis, and node.