Yeoman
- Summary
-
Discussion
- Could you outline Yeoman's typical workflow?
- How is Yeoman better than native generators or CLI project tools?
- What are Yeoman sub-generators?
- Which are the core components of Yeoman?
- Is Yeoman only for JavaScript-based projects?
- As a beginner, how can I get started with Yeoman?
- What's the procedure for creating my own Yeoman generator?
- Milestones
- References
- Further Reading
- Article Stats
- Cite As
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 callyo angular
but to add an Angular service (a sub-generator), we useyo angular:service myservice
; or an Angular filter usingyo 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 bothyo
andyeoman-generator
depend onyeoman-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 commandnpm 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, typenpm install -g generator-ngx-rocket
. Refer to the documentation of that generator to know how to use it and create the project scaffolding. Inngx-rocket
for example, we would start with the commandngx 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 onyeoman-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 namedGenerator
.Note that
generator-generator
depends on the package calledyeoman-generator
, which is the base from which all generators are written.
Milestones
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.
2013
References
- Assad, Arnaud. 2016. "Yeoman : Passing data from generator to sub generator." Le blog d'Arhuman, April 27. Accessed 2019-06-27.
- Bill, Matthew. 2019. "Generating code with Yeoman js." ITNEXT, via Medium, January 27. Accessed 2019-06-27.
- Castro, Diego. 2017. "diarcastro/generator-joomla3." On GitHub, April 10. Accessed 2019-06-27.
- Elboim, Noam. 2016. "How Using Yeoman Changed the Way We Work." CSS-Tricks, June 03. Updated 2017-04-10. Accessed 2019-06-27.
- Hemanth. 2016. "Creating a custom yeoman generator." tagtree, via YouTube, September 06. Accessed 2019-06-27.
- Mishra, Sumant. 2016. "Angular Project Setup Using Yeoman." C# Corner, April 19. Accessed 2019-06-27.
- Osmani, Addy. 2013. "An Introduction To Yeoman Sub-generators." YouTube, October 03. Accessed 2019-06-27.
- Santiago, Antonio. 2014. "7 reasons to use Yeoman's angular-fullstack generator." DZone, October 26. Accessed 2019-06-27.
- Shaleynikov, Anton. 2017. "JavaScript Build Tools and Automation Systems." DashMagazine, via Hacker Noon, December 06. Accessed 2019-06-27.
- Soliman, Muhammad. 2019. "msolimans/generator-sls." On GitHub, June 25. Accessed 2019-06-27.
- West, Matt. 2014. "Improving Your Development Workflow with Yeoman." Blog, Treehouse, January 03. Accessed 2019-06-27.
- Yeoman. 2019a. "Contributing." Accessed 2019-06-27.
- Yeoman. 2019b. "Generators." Accessed 2019-06-27.
- Yeoman. 2019c. "Homepage." Accessed 2019-06-27.
- Yeoman. 2019d. "Frequently Asked Questions." Accessed 2019-06-27.
- Yeoman GitHub. 2012. "yeoman/yeoman." v0.9, September 10. Accessed 2019-06-27.
- Yeoman GitHub. 2019a. "yeoman/yo". July 01. Accessed 2019-06-27.
- Yeoman GitHub IO. 2019. "Generator." v3.2.0, NPM yeoman-generator, v4.0.1, May. Accessed 2019-06-27.
- Zhao, Jerry. 2018. "How To Use Yeoman To Scaffold Java Spring Project." October 21. Accessed 2019-06-27.
- ngx-rocket GitHub. 2019. "ngx-rocket/generator-ngx-rocket." Commit 459d876, June 27. Accessed 2019-06-27.
Further Reading
- Nwamba, Chris. 2016. "Create A Custom Yeoman Generator in 4 Easy Steps." Scotch.io, July 10. Accessed 2019-06-27.
- Bill, Matthew. 2019. "Generating code with Yeoman js." ITNEXT, via Medium, January 27. Accessed 2019-06-27.
- Mishra, Sumant. 2016. "Angular Project Setup Using Yeoman." C# Corner, April 19. Accessed 2019-06-27.
Article Stats
Cite As
See Also
- Dependency Manager
- Package Manager
- Rails Generators
- Node Package Manager
- Gulp
- Grunt