Want more? Subscribe to my free newsletter:

Improved Developer Tooling and Yeoman

June 28, 2012

Did you guys enjoy Paul Irish’s talk at Google I/O?

In case you missed it, yesterday we announced Yeoman - a project we’ve been working on to greatly help improve developer workflow, spanning everything from a comprehensive build process to package management. If you’d like to read more about it’s features, check out Yeoman.io.

How does Yeoman build upon Grunt?:

One common question we’ve been asked if how Yeoman differs from Grunt. Ben Alman’s Grunt is an excellent baseline and with this project we wanted to build on it, addressing:

  • An opinionated workflow we feel will simplify achieving common tasks more quickly
  • Improved scaffolding (our most basic scaffolding supports stripped HTML5 Boilerplate, Twitter Bootstrap (with Compass support) and AMD). We’re working on improving this further. You easily kick this off with yeoman init
  • Integrated package management - on the front-end this is huge. No more having to manually go opening up your browser or GitHub to find dependencies like jQuery or Backbone. Just do yeoman install jquery or upgrade using yeoman update
  • Wiring and integration of a number of commonly used grunt tasks (getting these to play nicely is not always straightforward)
  • Experimental support for EcmaScript 6 module syntax (works with CoffeeScript, vanilla JS, AMD)
  • An improved watch process - Yeoman has LiveReload support and falls back to a simple watch/reloader if you aren’t using LR. We also automagically compile your CoffeeScript and Compass files whenever you change them.
  • A comprehensive build process including benchmarked Image optimization, app cache manifest generation and a bunch of other pieces we think you’ll find very useful

Tooling tips and Yeoman Screencast (18 mins):

In this supplemental video, I discuss some more tips for developer tooling and ways in which Yeoman (and related projects) help us spend less time on process and more time building more awesome applications.

httpv://www.youtube.com/watch?v=3s6Yv9pVXZc

tl;dr: do what you can to automate as much of your workflow as possible. 

We’re looking at a number of additions we might make to Yeoman in the future, but we’re aiming to get a release out the door in the next month or so.

(Special thanks to Grunt, HTML5 Boilerplate and more without whom this project wouldn’t have been possible)

Video notes and further recommendations:

Editor

Scaffolding

Watch process

  • Are you still manually refreshing your apps/pages on every change? Still having to compile CoffeeScript etc. each time too? Get a file watcher in place to automatically reload for you.

  • LiveReload, CodeKit, Brunch and Grunt also do this well:

  • Grunt Reload tries to offer a better watch process for Grunt and also has some basic support for the LiveReload extension

Testing

Build process

  • We all need a solid build process for production
  • The basics (which Grunt covers very well):

    • Linting
    • Unit testing
    • Concatenation
    • Minification
    • Optimization
  • These days there are a few more steps worth considering:

Extra

Interested in automated distributed CI for JS? Checkout this guide from the jQuery project.

Thoughts?

We’ve had a great response to Yeoman since we announced it yesterday and would love to hear more about what you guys think of the idea. Do you see yourself using it based on the feature list and teaser? Anything else you wish it could try addressing?.