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
- 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 jqueryor upgrade using
- 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.
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.
Video notes and further recommendations:
- 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?
- 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?)
- Do you have a scaffolding tool?
- If not, you’re missing out. Scaffolding tools save you time creating parts of your application.
- Others (specific to server-side frameworks)
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
- Also check out: Grunt Mocha
- and of course it’s related Grunt ask: Jasmine-grunt
- From Pauls talk (thanks to Ryan). Automated client-side testing in the cloud
- We all need a solid build process for production
The basics (which Grunt covers very well):
- Unit testing
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.
- Headless unit testing (PhantomJS, Zombie.js)
- Compile Compass, LESS, CoffeeScript files
- Image optimization (we’ve benchmarked the below two as the best)
- File versioning
- Generating an application cache manifest
- Confess.js helps with this greatly
Interested in automated distributed CI for JS? Checkout this guide from the jQuery project.
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?.