Yeoman

Article Info

Contributed by
2 authors

Last updated on
2019-07-02 03:07:59

Dependency Manager
Package Manager
Rails Generators
Node Package Manager
Gulp
Grunt

Article Versions

18 2019-07-02 03:07:59
1469,1425 18,1469

By arvindpdmn

Completed article. One answer rewritten as a milestone. Improve summary.
17 2019-06-04 12:55:35
1425,1424 17,1425

By mallikarjunasai995

nothing done
16 2019-06-04 11:38:55
1424,1423 16,1424

By mallikarjunasai995

added command line arguments
15 2019-06-04 11:35:55
1423,1422 15,1423

By mallikarjunasai995

corrected image attachement
14 2019-06-04 11:30:06
1422,1421 14,1422

By mallikarjunasai995

added image

Chat Room

Submitting ...

You are editing an existing chat message.
2019-06-12 02:47:45
-

By arvindpdmn

Requesting volunteer authors to improve this article. Click "Show messages" to see areas of improvement.
2019-06-05 05:22:32
-
1

By arvindpdmn

Thanks for your contribution. I will improve it when I get time and publish it.
2019-06-04 16:02:50
-

By mallikarjunasai995

Hi Arvind

i have included the references in said format but still am getting the below error

Remove references not cited in main content. Github
2019-06-04 15:33:25
-
1

By arvindpdmn

When you're editing the article, click on Help & Sample for References. It will show some examples on how to write references. Also, the syntax for a link in Markdown is [text](url)
2019-06-04 13:05:47
-

By mallikarjunasai995

once I added the reference I want to submit this article for review. Thanks

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?
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.
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.
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.

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.

References

Article Stats

1307

Words

Authors

Edits

Chats

Likes

4795

Hits

Cite As

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

Contributed by
2 authors

Last updated on
2019-07-02 03:07:59

web web framework typescript

Dependency Manager
Package Manager
Rails Generators
Node Package Manager
Gulp
Grunt

Yeoman

Discussion

Milestones

References

Further Reading

Article Stats

Cite As

See Also

Yeoman

Discussion

Milestones

References

Further Reading

Article Stats

Author-wise Stats for Article Edits

Cite As

See Also

Login