Improving your Workflow with

About Me

@briantford | github.com/btford | briantford.com

• University of Michigan grad
• AngularJS at Google
• Yeoman Core Team Member

  Thanks for having me!

Let's Talk Tools

• Improve Productivity
• Eliminate Repetitive Tasks
• Make the World a Better Place

  Tools are great, right?

What Other Really Smart Devs Think

"What the hell happened to hacking?"

-Smart Lightning Talk Guy

"Tools are ready to make the jump to hyperspace"

-@reganwald

The Problem

• Tools should Do One Thing Welltm
• Learn All the Things
• Connecting them is non-obvious

Boilerplate/Seed Projects

• AngularJS + Grunt + Bootstrap
• Backbone + Foundation + Handlebars
• Ember.js + Coffeescript + H5BP Clone the repo, hack away!

The Problem with Boilerplates

The Problem with Boilerplates

O(2n) Different Boilerplates = Maintenance Nightmare

Enter Yeoman

Yeoman is tool glue for hackers*

* developers who want to get stuff done

Parts

• Bower
• Grunt
• Libs/Frameworks
• Testing

Bower

Bower

Package manager for the web:

• Install
• Update
• Publish

JavaScript, CSS, HTML

Grunt

Configurable Automation Tool:

• Build
• Lint
• Deploy

Grunt

Grunt

Libs/Frameworks

• AngularJS
• Bootstrap
• Backbone.js
• Ember.js
• jQuery
• Underscore

And many more...

Generators

Inspired by Rails

• Scaffold an app
  • Files (index.html, app.js)
  • Metafiles (package.json, bower.json)
  • Dependencies (via Bower)
  • Build script (via Grunt)
  • Test runner
• Add to the scaffold as you hack

Pick Your Own Adventure Story

Generators

• Write your own!
• Built on Node.js
• Published on npm
  • Try `npm search generator-`

Generators on npm (76)

Writing a Generator

Demo Time

Connecting Generators

Workflow

Watch files:

• Reload browser on save
• Lint on save
• Test on save

Lessons Learned

• Horizontal Architecture
• Conventions are cool
• Modularity

What's Next?

Social

I want tools to tell me "Devs who use Angular often use Underscore"

-@raganwald (paraphrased)

See: http://insight-dashboard.herokuapp.com/

What's Next?

Support Other Things

• FirefoxOS
• npm + Browserify ?
• Polymer ?

What's Next?

Full Stack

• Generate Offline Model Code
• Sync with Database
  • hood.ie ?
  • couchdb / pouchdb ?
  • [your fav db here] ?

Yeoman Summary

• Combines tools
  • Bower
  • Grunt
• Not perfect
  • More Generators
  • Feedback plz

More on Yeoman

• yeoman.io
• github.com/yeoman
• @yeoman

Questions?

@briantford | github.com/btford | briantford.com