Yeoman – Level-up Your Daily Workflow

After Yeoman was announced in the end of June while it was still in private beta developers were looking forward to use it soon. It was introduced as a tool that helps developers building web-apps while not having to care too much about the general boilerplate-coding to build a solid base for every project and to help performing tasks to bring your project into production.

Now that Yeoman is available for everyone as Open Source the question how to use it in daily projects arises. I’ll try to give you a short overview on what you can expect from it and what will be helpful. If you haven’t had a look at it this article might help you.

To check out how you can install Yeoman, please refer to the Yeoman-homepage, you will find detailed information there. You will also find more information on how to use Yeoman’s features. You might want to check out this article on one of the Adobe blogs. Also Nettuts+ has an article with deep information on how to use Yeoman.
By default Yeoman supports Linux and OSX, but you can also find a way of installing it on Windows.

Paul Irish introduces Yeoman at Google I/O 2012.

Reduce Time Doing Repetitive Tasks

On the project’s homepage you can find some features they are praising. Let’s get a short overview on what Yeoman may help you with:

There are some things that steal your time when you work on a project. Yeoman is here to help you reduce the time you spent on these to focus more on the actual process of writing clean and lightweight code.

Addy Osmani explains the main features of Yeoman.

Starting Projects & Maintaining Them

Starting a project and maintaining it requires some time. You need to manage compiling your CoffeeScript and SASS styles if you use it. Yeoman does this for you. When it’s done it reloads your project-page automatically using its LiveReload functionality – you are used to this from LiveReload or CodeKit apps.
It also lints your JavaScript and ensures that you write straightforward code. Writing code like this requires that you have some proper tests that guarantee that your code is working correctly. Yeoman includes Mocha so you can write unit tests by default and runs your tests on the fly in a headless browser so you can be sure everything runs smoothly. (Yeoman let’s you use Jasmine out of the box too, you just need to set a flag while initializing.)

All that sounds good but you need to start your project somehow. For me building a basis means taking init and extending it to my needs – manually. Manually adding libraries, maintaining their versions. Manually adding styles like these of Twitter Bootstrap.
With Yeoman you get an initial process to lay out your projects by your needs. Apart from that you can pull in plugins and scripts by just running a single command.

When dealing with client-side MV*-frameworks such as Backbone.js or Ember.js you need to create a bunch of files such as models or views from time to time. By using Yeoman generating these can be done automatically and reduces the time you spend writing boilerplate code.

While developing Grunt is there for all my needs to lint my JavaScript, compile SASS and provide a node-based server. These tasks can all be done by Yeoman which is based on Grunt too.

The work I have to do over and over again is something I want to avoid. In fact that’s why I created init. But init may not fit the need of another developer. Kahlil for instance has jumpstart which is pretty similar to init but with some other defaults.
Exactly this point is where Google tries to help out with Yeoman.

Roll Out Apps

When putting the project to production you don’t want your live website to be affected by mistakes you made while developing. That’s what you got tests for. You run them just before you roll out a new feature. Save the time while doing this automated with Yeoman.

On the web you read a lot about performance of an app, especially slow connections on for example mobile devices with slower processors require that you serve the smallest amount of scripts and stylesheets, optimized sources and minified code. But do you really want to think about all this every time you want to deploy your project? Yeoman integrates minifying scripts and stylesheets, optimizing your images insanely and putting it all together in a package for you to deploy. Just run a command and you are all good.
Apart from that you don’t need to worry about your app not being available offline: Yeoman generates an application cache manifest for you.

“I Use Other Tools. Yeoman Can’t Help Me!”

The good thing is that you can extend Yeoman to your needs. If you are using LESS instead of SASS just pull it in. As Yeoman builds upon Grunt you are all free to change the tools Yeoman builds uses. With Yeoman Generators it’s easily possible you extend Yeoman’ initialization process with your needs.
Yeoman has some solid defaults but you are not chained to them.

Save Your Time, Automate

All the above mentioned doesn’t keep you from writing the code for your app. But isn’t this the part where you want to focus mostly on?

When working on a team it is essential to have a solid process of checking the maintainability and code standards, if everyone’s code is working and automated unit testing. Yeoman is a great Open Source project by people who know how to deal with the problems that you may run into and tackles exactly these points.
To ensure you are doing it right and save time doing things over and over again, try using Yeoman, it will help.

12 Replies to “Yeoman – Level-up Your Daily Workflow”

  1. So I don’t usually build web apps but merely, well, web sites. Some of them might be plain old static HTML, some might use a CMS after building a static prototype first. But I don’t use much of all that fancy web app stuff, i.e. Bootstrap, require.js or Backbone.

    Basically, what I need in most of my projects is H5BP, Sass/Compass and jQuery plus maybe some jQuery plugins. I am, however, quite used to using a build tool for optimization before deployment, and I’m a bit tired of the ant-based H5BP build script.

    Given this setting, would you still recommend using Yeoman or is it “too much” for that?

    I guess I could just install it and check it out, I mean, it does install everything via homebrew, so it should be pretty easy to uninstall all the stuff I don’t need if I choose not to use it after all, right?

    1. @Matthias: for the use-case you are describing I made a little thing called jumpstart:

      It uses just Grunt.js with the grunt-compass plugin which is much leaner and definitely works. The thing that Grunt.js doesn’t do is the live-reload. Yeoman has that built-in.

      I would’t recommend against Yeoman though since it’s power might come in handy to you on a different project. Grunt.js may be a good introduction to node-based build systems though.

    2. As Kahlil said it’s quite ok to go with Grunt-integration in the case of building pure websites. That’s what I do at the moment.

      But anyways, if you build a big web-site that has a lot of functionality and you need to have tests, compiling, you rely on JS libs like jQuery and plugins and also scaffolding I think going with Yeoman pays out well after you figured what are the best parts of it.
      With Grunt you always need to define what you need and set it up. But with Yeoman you get everything by default and only take the parts you need.

      1. Right, and if I understand it correctly, yeoman init quickstart will basically just do what I need – H5BP, Modernizr, jQuery. Plus LiveReload and the ability to keep assets up to date with Bower … I guess I’ll give it a spin on the weekend.

        Thanks, guys. :-)

    1. You can. If you use it, you have the advantage of using the build tools and server.
      Personally I’d go with Grunt in such a case. But to be fair, I’m not building Apps without any of these frameworks. For “normal” webpage you could argue that Yeoman is a bit of an overkill and I’d go with a simple Grunt-implementation in this case.

Leave a Reply

Your email address will not be published. Required fields are marked *