Web App Development Tools: Scaffolding Web Apps with Yeoman
When creating high-quality web applications, it's important to make sure that your toolset is ready to bring your A-game as a web app developer. Yeoman is a tool that allows us to kick-start all kinds of projects easily. In a matter of seconds, you end up with the skeleton of an application ready so you can start coding right away.
Why should you use it Yeoman?
Well, having an efficient workflow is a key step in a modern web app development process. Why spend time and effort creating every single file and folder from scratch on every new project you work on? You may think saving snippet files and copy and pasting from older projects is the efficient way. Just wait until you try Yeoman.
Maybe you already are using some tools as part of your workflow. Are you using livereload to automatically send your changes to the browser? Cool! Are you minifying your files before moving them to production? Great! Are you linting your files before checking in your files? You should! Now, how do all those tasks fit together? Are you running each manually? This is where a tool like yeoman comes in handy.
Creating a good workflow is not always straightforward, so get some help from experts! Yeoman tasks are created by some of the best developers in the industry like Paul Irish, Addy Osmani, and Sindre Sorhus.
Yeoman is a Node package, so it requires to have installed at least version 0.10.0, along with its package manager npm. Yeoman work together with two other great tools: Grunt and Bower, but installing Yeoman will also install them if you don’t have them already, so don’t worry about it.
Using npm we run:
> npm install -g yo
Yeoman, Grunt and Bower are now installed. But we’re not there yet! To start initializing projects we would need to install GeneratorsWe can run this from any directory. Since we are passing the global flag the package is going to be installed in the node path.
Generators are add-ons that tell Yeoman what is needed to be done in order to generate a we application. There are hundreds of generators ready to be used. The cool thing about generators is that anybody can create their own. If you’re interested, there’s an official tutorial.
With so many generators chances are, you can find one that fits your needs. Backbone? Checked. AngularJS? Yes. Chrome extensions? Sure! You can search for them using npm:
|> npm search yeoman-generator|
That will give you a list of every package in the npm registry with the tag “yeoman-generator”. If you prefer a nicer interface try searching on the npm registry where you can also find links to most project sites or repositories.
Once you have chosen one, install it:
> npm install -g generator-backbone
Some generator packages will register several sub-generators. To list them all, execute:
> yo --help
That’ll give you a list of everything you can use:
Now we’re ready to generate! Create and/or move to the folder you want your app to be:
> mkdir backboneapp && cd backboneapp
Then execute the generator
> yo backbone:app
You’ll be received by our new friend, Yeoman. He will inform you what will be installed and shows you other options to add.
Next, Yeoman will start its magic. Creates every file and directory you’ll need:
- - A main app folder, which contains everything but config files.
- - An image folder
- - A scripts folder
○ Subfolders for backbone collections, models, routers and views.
○ Subfolder for templates using on the client side.
- - A style folder for your css files.
- - A test folder for mocha tests.
It also creates config files including three very important:
- package.json: Contains all the information that describes our application as a node package, including what dependencies it has.
- bower.json: Lists the front end components our app needs.
- Gruntfile.js: The configuration file of our task runner.
Yeoman will automatically try to fetch all your dependencies by automatically running:
> npm install
> bower install
If it fails to do this (most of the time it won't) just run those commands yourself.
At this point you are ready to start working. Simply run any of the default Grunt tasks (described below) and you can start with what you really want to do, code your app.
> grunt server
> grunt build
> grunt test
Now let's see what’s under the hood.
Dependency Management & Tasks Runner
Dependency Management: Bower
Following npm style, we can search, install and uninstall dependencies using the command line:
> bower search bootstrap
> bower install bootstrap
> bower uninstall bootstrap
Task Runner: Grunt
Yeoman writes for us a set of awesome and helpful tasks. They’re all preconfigured but still easily customized. Some of them are:
- grunt server: It will start a server instance, open a browser tab pointing to this server, watch all the files for changes in real-time and reload those files in the browser automatically on each file change.
- grunt test: It will start a server instance, open a browser tab pointing to it, run our whole suite of Mocha tests, watch for changes in the files and report back to us the results of those tests.
- grunt jshint: runs jshint and shows a detailed report on all the error it found.
As you can see, it only takes a few seconds to pass from zero to the bare bones of your next app. Improving your workflow can make a big difference in your efficiency. I urge you to try Yeoman. Dive into its tasks, see what you can learn from them, what you can improve for your particular situation, and come up with a workflow that fits all your needs.
About The Author
Celso Juarez is a Software Engineer with 3+ years of experience with web development. He's specialized in Front-end Development.
Written by Oscar Salas
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 to play the piano and listening to Led Zeppelin He's currently leading the iTexico Demand Gen strategies.