Building a Web App with Yeoman

Released in 2012, Yeoman is an efficient open-source software system for scaffolding web applications, used for streamlining the development process. It is known primarily for its focus on scaffolding, which means the use of many different tools and interfaces coordinated for optimized project generation. GitHub hosts Yeoman.

The Basics of Yeoman

The Yeoman experience is three-tiered. Though they work together seamlessly, each part of Yeoman was developed separately and works individually. Primarily, Yeoman includes "Yo," the command line utility form used with Yeoman. This is the baseline of the Yeoman software platform. Next, Yeoman has "Grunt," and "Gulp," which are application builders to help automate your application development. Finally, the Yeoman software features "npm", which is a package manager. Package managers manage code packages for back-end and front-end development and their dependencies for you to develop your application. Yeoman provides developers with many options to combine in their development process.

Yo

Yo is the glue that keeps an application together. Yo works with different operating systems such as macOS, Windows, and Linux. Yo is designed to work with the generators you choose to create the baseline for your application via a Gruntfile. Yo is your starting point for understanding how Yeoman works.

Grunt versus Gulp

Grunt is an innovative part of Yeoman due to its primary feature — automation. Both Grunt and Gulp plugins are managed and installed through npm, the package manager of Node.js. As a task runner, Grunt will make your job as a developer as easy as possible. This build system is employed to build, preview and test projects. Repetitive tasks such as compilation, minification, linting, or unit testing can be performed by Grunt. Saving your team with the nitty gritty of app development means you can focus on the important, complex parts of what makes your app unique. In particular, Grunt can do compilation, linting, unit testing, and minification, and other basic tasks to make your life easier. Many companies use Grunt, including big names like Walmart and Wordpress.

Grunt also works with plugins to customize your app. There are hundreds of plugins available that can perform various tasks. For example, the cc-templates-generator plugin allows you to generate templates based on components. Or you might want to run grunt tasks concurrently, which you will use the concurrent plugin. It is important to note that if existing plugins do not fit your needs, you can create your own plugin on Grunt through the grunt-init plugin and then publish it in the database for others to use as well. The exact content and files created is dependent on the template you choose.

Gulp is very similar to Grunt in purpose and use as an automated task runner for building your applications.Gulp is designed to use multiple plugins to complete each task, while Grunt is made to utilize plugins that each do multiple tasks simultaneously. Next, Gulp is significantly faster. For instance, Grunt took 2.348 seconds to perform a Sass compilation while Gulp only 1.27 seconds. Gulp is faster by utilizing node streams, meaning that it doesn’t have to write intermediary files to disk.

Your team should consider the needs of your application when choosing between Grunt and Gulp.

npm

Npm is a package manager. Npm is a software platform that features groups and packages of code, which can be used to streamline and customize your application. Availability to code is often given through code libraries "hosted" through npm, including jQuery, React, and Angular. As the application architect, you are able to pick and choose the code you need for your application development. Another feature for npm is that, like with Grunt, if the code or code packages found with this platform do not suit your needs, you can create your own package and share it with others; this is true of any open

Yeoman's Advantages

• Yeoman combines multiple beginner functions in its process, making web app development easy for unseasoned developers and streamlined for the pros.
• Yeoman can be used to develop any type of web application. This affords an amazing amount of freedom to potential developers.
• This software was made to be extremely user-friendly. It is usable by even the most inexperienced developer, making it a great choice for web application development.
• This software also offers some automated processes for building applications. Streamlining the complex development process is a win for every type of developer with every experience level.
• Yeoman has tools for other parts of the web application development process than just scaffolding, such as code for debugging. You can either use Chrome Devtools or your preferred IDE. Yeoman generators can also provide debug modes that log relevan This means Yeoman can cater to different parts of your needs; you don't have to use innumerable software platforms to create the perfect application.
• Yeoman can create applications in any programming language, including Java and C#. The versatility afforded by this polyglot software can be extremely useful for developers who wish or need to diversify their application.
• Yeoman integrates generators. There are many options of generators that Yeoman users can choose from, and they act as "plugins" for the Yeoman development process. Different generators are used for scaffolding. For example, a user will work with different generators to "scaffold" their project by coordinating and collaborating among them. Generators can also be consider the barebones of a project before customization and development. Popular generators include:
  • Backbone.js : Gives a web application structure and a common base to handle data, views, events, REST APIs and more.
  • AngularJS: Widely-used and popular JavaScript framework capable of supporting models, views routes and more. This generator also includes sun-generators for other functions such as controllers, directives, services, providers, decorators, etc.
  • Bootstrap Generator: Popular CSS framework that leverages it simplicity by being super efficient. It starts off with 4 choices for a Bootstrap project: CSS, LESS, SASS and Stylus. From your choice, the generator will download the chosen framework in the bower components of your project.
  • JHipster Generator: Works to develop and deploy Spring Boot and Angular/React web apps.
  • Hyperledger-composer: Uses Hyperledger Composer business network definitions as input to create artifacts related to writing new applications.
• Yeoman is open source. This means that users are benefitting from the free market of software development; they are able to reap the benefits from the best of the best developers when they pool their talent to create the best, most optimized system.

Yeoman's Disadvantages

• Being able to use any programming language and catering to amateurs means that Yeoman may not be the best system for experienced developers who want to streamline and customize the process as much as possible while offering advanced development options. Yeoman's platform could be too generic for some.

• Related to the last point, some developers may find that due to Yeoman's generator setup, they spend too much time tailoring and testing generators instead of working on the actual application development.

• Another common complaint about Yeoman is the required upkeep. It is important for developers to make sure they continually have the most updated programs, generators, and other tools to produce the best product. Thus, a project or application is never truly finished. Best practices change constantly; in order to remain competitive it is essential that developers keep up.

Yeoman’s clear API is a great option for those just getting started or wanting to explore building an app. Additionally, it can also help automate some common tasks to help improve developer workflow.

Although there are some limitations, Yeoman has a growing community behind it, and is being integrated into the developer workflow for continuous integration, version control, and more, in order to make building applications much less daunting and time-consuming for everyone. Yeoman also allows for a great number of choices — such as with Grunt or Gulp and npm — to make sure that you have the software combination that best meets your teams' desires for your web application development process.

Now that we know more about Yeoman, let's get to building. Here is an example on how to use Yeoman to create a sample app. This particular sample appt will be an implementation of TodoMVC.

Step 1: Set up Dev Environment

The majority of interactions with Yeoman will be by the command line.

Before you begin installing the Fountain Webapp Generator, make sure you have the following installed:

• Node.js 6 or higher
• npm 3 or higher
• Git
• Yeoman toolset

Consult this guide if you experience permission or access errors.

Step 2: Install a Yeoman generator

Install a generator used for FountainJS projects to lower time spent in setting up boilerplate code and folder structure. Through the npm command, install generator-fountain-webapp using the command  npm install --global generator-fountain-webapp.

Additionally, use the Yeoman interactive menu to search for other generators. Run the yo command, select install a generator, and proceed to searching for other published generators.

Step 3: Use a generator to scaffold out your app

This step will show how Yeoman generates files specifically for the library or framework of your choosing. There will also be options to use external libraries like Webpack, Babel and Sass.

Begin by creating a project folder. Create a mytodo folder for your codelab work using the code: mkdir mytodo && cd mytodo . Your scaffolded project files will be placed here by the generator.

Now access your generators through the Yeoman menu by running yo . Although you may have multiple generators installed, highlight the Fountain Webapp and hit enter for this example.

Some generators have optional capabilities to customize your app with developer libraries. Start configuring your generator to speed up setup of the development environment.

Here are some FountainJS generator choices to use:

• module management (Webpack, SystemJS)
• framework (React, Angular2 or Angular1)
• css preprocessor (SASS, LESS)
• javascript preprocessor (Babel, TypeScript)
• three sample app (a landing page, hello world, and TodoMVC)

For this example, select SaSS, React, Babel, Webpack and Redux TodoMVC with your arrow keys and hit enter. Your app will automatically be scaffolded by Yeoman and grab the dependencies.

Step 4: Review the Yeoman-generated app directory structure

View what has been scaffolded through your mytodo directory. You will be able to view the following:

• src
  • app
  • index.html
  • index.js
• conf
• gulp_tasks
• gulpfile.js
• .babelrc
• package.json
• node_modules
• .gitattributes
• .gitignore

After all of the generation and installation, a new git repository should be initializing. Use the command git add --all && git commit -m 'First commit' to add the first commit that will save the current state.

Step 5: Preview your app in the browser

You will need to run an npm script that will help create a Node-based, local http server in localhost:3000 (or, on some configurations, 127.0.0.1:3000) by typing in the following: npm run serve. Using localhost:3000, open a new tab.

(Note: You can use Ctrl+C keyboard command if you need to stop the server and quit your CLI process.)

To watch your files, open up your preferred text editor and begin making changes. A browser refresh will automatically be forced after each save, called live reloading. This is available to you through configured Gulp tasks in gulpfile.js and configured in Browsersync via gulp_tasks/browsersync.js.

Step 6: Use Karma and Jasmine to Test

Karma is a Javascript test runner for test framework agnostics. Test framework Jasmine has been included in the fountainjs generator that you are using in this example. The yo fountain-webapp that was ran earlier generated *.spec.js patterned scaffold files within the mytodo folder, creating a conf/karma.conf/js file. This pulled Node modules for Karma.

Go to your command line and use Ctrl+C to kill all local servers. Run unit tests using scaffolded npm script from the package.json. Use npm test to initiate the tests.

You can find your scaffolded unit tests by opening up the src/app/reducers/todos.spec.js in the src folder.

Step 7: Get ready for production

Start by optimizing files for production by creating a production version of the application. Run npm run build to streamline the following processes:

• Lint the code
• Link and minify scripts and styles
• Compile the output of preprocessors
• Make application very lean

After running the npm run build script, you can access the production ready application through the dist folder from the root of the mytodo project. These files are ready to be put on your server using your preferred deployment service.

Finally, preview your produced app locally by running the npm script npm run serve:dist. This will build and launch your project on a local web server.

About the Author

Oscar Salas is a B2B Digital Marketing Specialist with 5 years of experience, who has helped organizations to grow and expand through strategic brand development and marketing programs. Analytical thinker, cat lover, he enjoys playing the piano and listening to Led Zeppelin. He's currently leading the iTexico Demand Gen strategies.