• Yeoman workflow includes create, manage and build. Source: Shaleynikov 2017.
    Yeoman workflow includes create, manage and build. Source: Shaleynikov 2017.
  • Developer is prompted by generator to customize project components. Source: Devopedia 2019.
    Developer is prompted by generator to customize project components. Source: Devopedia 2019.
  • Folder structure created for a Java project. Source: Zhao 2018.
    Folder structure created for a Java project. Source: Zhao 2018.

Yeoman

Avatar of user arvindpdmn
arvindpdmn
1077 DevCoins
User avatar
mallikarjunasai995
405 DevCoins
2 authors have contributed to this article
Last updated by arvindpdmn
on 2019-07-02 03:07:59
Created by mallikarjunasai995
on 2019-05-30 09:28:58

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.

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.

Discussion

  • Could you outline Yeoman's typical workflow?
    Yeoman workflow includes create, manage and build. Source: Shaleynikov 2017.
    Yeoman workflow includes create, manage and build. Source: Shaleynikov 2017.

    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?
    Developer is prompted by generator to customize project components. Source: Devopedia 2019.
    Developer is prompted by generator to customize project components. Source: Devopedia 2019.

    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?
    Introduction to Yeoman sub-generators. Source: Osmani 2013.

    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?
    Folder structure created for a Java project. Source: Zhao 2018.
    Folder structure created for a Java project. Source: Zhao 2018.

    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?
    Creating a custom yeoman generator. Source: Hemanth 2016.

    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.

References

  1. Assad, Arnaud. 2016. "Yeoman : Passing data from generator to sub generator." Le blog d'Arhuman, April 27. Accessed 2019-06-27.
  2. Bill, Matthew. 2019. "Generating code with Yeoman js." ITNEXT, via Medium, January 27. Accessed 2019-06-27.
  3. Castro, Diego. 2017. "diarcastro/generator-joomla3." On GitHub, April 10. Accessed 2019-06-27.
  4. Elboim, Noam. 2016. "How Using Yeoman Changed the Way We Work." CSS-Tricks, June 03. Updated 2017-04-10. Accessed 2019-06-27.
  5. Hemanth. 2016. "Creating a custom yeoman generator." tagtree, via YouTube, September 06. Accessed 2019-06-27.
  6. Mishra, Sumant. 2016. "Angular Project Setup Using Yeoman." C# Corner, April 19. Accessed 2019-06-27.
  7. Osmani, Addy. 2013. "An Introduction To Yeoman Sub-generators." YouTube, October 03. Accessed 2019-06-27.
  8. Santiago, Antonio. 2014. "7 reasons to use Yeoman's angular-fullstack generator." DZone, October 26. Accessed 2019-06-27.
  9. Shaleynikov, Anton. 2017. "JavaScript Build Tools and Automation Systems." DashMagazine, via Hacker Noon, December 06. Accessed 2019-06-27.
  10. Soliman, Muhammad. 2019. "msolimans/generator-sls." On GitHub, June 25. Accessed 2019-06-27.
  11. West, Matt. 2014. "Improving Your Development Workflow with Yeoman." Blog, Treehouse, January 03. Accessed 2019-06-27.
  12. Yeoman. 2019a. "Contributing." Accessed 2019-06-27.
  13. Yeoman. 2019b. "Generators." Accessed 2019-06-27.
  14. Yeoman. 2019c. "Homepage." Accessed 2019-06-27.
  15. Yeoman. 2019d. "Frequently Asked Questions." Accessed 2019-06-27.
  16. Yeoman GitHub. 2012. "yeoman/yeoman." v0.9, September 10. Accessed 2019-06-27.
  17. Yeoman GitHub. 2019a. "yeoman/yo". July 01. Accessed 2019-06-27.
  18. Yeoman GitHub IO. 2019. "Generator." v3.2.0, NPM yeoman-generator, v4.0.1, May. Accessed 2019-06-27.
  19. Zhao, Jerry. 2018. "How To Use Yeoman To Scaffold Java Spring Project." October 21. Accessed 2019-06-27.
  20. ngx-rocket GitHub. 2019. "ngx-rocket/generator-ngx-rocket." Commit 459d876, June 27. Accessed 2019-06-27.

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.

Tags

See Also

Further Reading

  1. Nwamba, Chris. 2016. "Create A Custom Yeoman Generator in 4 Easy Steps." Scotch.io, July 10. Accessed 2019-06-27.
  2. Bill, Matthew. 2019. "Generating code with Yeoman js." ITNEXT, via Medium, January 27. Accessed 2019-06-27.
  3. Mishra, Sumant. 2016. "Angular Project Setup Using Yeoman." C# Corner, April 19. Accessed 2019-06-27.

Article Stats

Author-wise Stats for Article Edits

Author
No. of Edits
No. of Chats
DevCoins
1
8
1077
1307
Words
13
Chats
18
Edits
12
Likes
715
Hits

Cite As

Devopedia. 2019. "Yeoman." Version 18, July 2. Accessed 2019-12-12. https://devopedia.org/yeoman