Improved Developer Tooling and Yeoman

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

• Know your text editor inside out
• What key bindings/shortcuts can help you complete tasks more quickly? Do you know them all?
• How can your editor be extended? Packages?
  • Zen coding (st2: ZenCoding package )
  • Automatic linting (st2: SublimeLinter)
  • Source style formatting (st2: Sublime Closure Linter, jsBeautifier)
  • Syntax detection (st2: DetectSyntax package)
  • Markdown -> HTML and preview (st2: MarkdownBuild)
• Your command-line build process and editor can integrated. Are you doing this? (for Sublime users, do you actually hook up to the built-in build system?)
  • The unofficial Sublime docs have a good write-up about this
  • Wes Bos has a guide for it in his Sublime Text Build Scripts post (using Node.js and CoffeeScript)
  • Other snippets:
    • LessCSS Build system for st2

Scaffolding

• Do you have a scaffolding tool?
• If not, you’re missing out. Scaffolding tools save you time creating parts of your application.
  • grunt-bbb (backbone)
  • brunch (backbone)
  • brunch for ember
  • Ember.gem
• Others (specific to server-side frameworks)
  • angular + grails
  • ember + grails

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:

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

Testing

• Mocha
  • Also check out: Grunt Mocha
• Jasmine
  • and of course it’s related Grunt ask: Jasmine-grunt
• From Pauls talk (thanks to Ryan). Automated client-side testing in the cloud
  • Bunnyip

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:

  • Using AMD? You should be running those modules through r.js, ideally without forcing non-AMD projects to do this if you’re not using them.
    • grunt-requirejs
  • Headless unit testing (PhantomJS, Zombie.js)
    • Node-Zombie Connect Socket
  • Compile Compass, LESS, CoffeeScript files
    • grunt-less
    • grunt-compass
    • grunt-coffee
  • Image optimization (we’ve benchmarked the below two as the best)
    • OptiPNG
    • JPEGTran
  • File versioning
  • Generating an application cache manifest
    • Confess.js helps with this greatly

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