Rewind to 1996

Geocities

For a time this was the best tool available

Tools must be changed if they can't evolve.

We're creatures of habit. By intuition, we remember steps in our workflow and their order. ~ Daniel Kahneman

We've trained our body to follow a workflow. We can do the same with our development workflow. ~ Aaron Jorbin

Craftsmanship is choosing tools well. Difference between a developer that spends 45 minutes getting workflow setup for project and one that spends only 5.

We're seeing the emphasis shift from valuing trivia to valuing tools ~ Rebecca Murphey

As an engineer, there is a short list of tools that you must be rabid about. Rabid. Foaming at the mouth crazy. ~ Michael Lopp, aka Rands

Many tools to choose from

A typical tooling workflow for webapp developers

Your shell

Learn to love the command line. It isn't scary. You know how to use PhotoShop which has 300 buttons. That's scary. ~ Stephen Hay (speaking later!)

Your editor

  • Learn it well, whatever it is
  • A good editor is an onion application
  • Keep peeling back layers to reveal more functionality
  • More than any other tool, prioritize your familiarity with it

Sublime Text

CSS With A Little Programming

  • SASS, LESS, Stylus, Compass
  • Mixins - reusable fragments of CSS
  • Mathematical expression evaluation
  • Variables
  • Checkout SASS Sleuth or
    SASS Inspector



Code Linting is your first unit test.

Realtime feedback

  • Live linting
  • Live recompilation
  • Live reload (soon!)

In-browser Devtools

Scaffolding

Testing

Testing

Execute tests in a variety of settings:

  • In the browser
  • In a headless browser on-demand via cmd line: grunt qunit
  • In a headless browser post-push
  • In multiple browsers in the cloud via cmd line:
    bunyip -f test/index.html -b ios
    bunyip -f index.html local -l "firefox|chrome|safari|phantomjs"

Build system

Resolve your dependency chain. concatenate. compile. Flatten your CSS @imports. Remove debugging statement. Compress images. Precompile templates. Run tests in a variety of environments. Revs asset paths for caching. Affirm code quality.

phew! if only this was more smoothly integrated

Introducing Yeoman

We think you should go from idea to rough prototype in 10 min

Yeoman

  • Limit the time spent on writing boilerplate for your app.
  • Automate as much of your workflow as possible
  • Reduce friction for the things you should be doing, like testing.

 

Yeoman is an open source set of tools to accellerate building compelling webapps.

  • Seamless integration of successful open source projects
  • Authoring abstractions, linting, testing, build tools, generators
  • Smooth developer ergonomics

Built on top of great tools like Grunt.js

Support is included for

  • Abstractions
    • Compass. Sass. Coffeescript.
  • Modules
    • AMD + RequireJS. Experimental support for ES6 module syntax
  • Boilerplates
    • Twitter Bootstrap. HTML5 Boilerplate + Modernizr.
  • Testing & Build Process
    • Mocha. Jasmine. PhantomJS.
    • r.js. OptiPNG. jpegtran.

Package Management

How do you update your dependent libraries?

  1. you read they are out of date
  2. open site
  3. find download
  4. download to ~/Downloads
  5. move to app folder
  6. wire in with script tags, etc

Why do we need package management?

  • Clientside dependencies are a chore
  • Common code duplicated
  • Library fragmentation and disjoint communities

Package management solutions

  • allowing longer dependency chains
  • structured dependencies for smart build systems
  • as a library author, easier for your users, both regular install and install as a dependency

How about...

  • yeoman install backbone
    yeoman install backbone.localStorage

How do you update your dependent libraries?

  1. someone tells you they are out of date
  2. open site
  3. find download
  4. download to ~/Downloads
  5. move to app folder
  6. wire in with script tags, etc

No thanks! How about...

  • Yeoman informs you some of your dependencies are out of date
  • yeoman update backbone

Generators

Super-quick Scaffolding For Your Apps

  • Generators can be written for any framework or workflow
  • They're highly customizable. Our API supports:
    • Remotely pulling and filtering dependencies
    • Wiring, so boilerplate minimization++
    • Sub-generators for creating new models, views etc.
    • and tons more!
  • We're including a bunch of generators out of the box to get you started.

Some of our generators

  • yeoman init backbone
  • yeoman init bbb
  • yeoman init ember
  • yeoman init angular
  • yeoman init chromeapp

Yeoman Demos

  1. curl -L get.yeoman.io | sh
  2. Let's start a project
  3. Example: HTML5 Boilerplate, Bootstrap for free
  4. Sample 1: Generators
  5. Sample 2: Seamless Sass, Compass, Coffeescript - all automatic and live
  6. Writing JavaScript. ES6.
  7. Integration with requirejs and r.js
  8. Build process incl best in class image optimization.

Build System

How do we create an optimized version of your app?

  1. yeoman build
  2. Compiles your CoffeeScript & SASS files
  3. Minifies, concatenates your scripts and styles
  4. Optimizes your AMD projects
  5. Compresses all your images
  6. Generates an Application Cache file

Yeoman: In Summary

  • Scaffold new projects in a snap or easily create your own
  • Watch, Recompile, Live Refresh
  • Yo comprendo Sass, Coffeescript, AMD & ES6 Modules
  • Run all your JavaScript files against JSHint
  • Run unit tests in headless WebKit via PhantomJS
  • Robust build script: filename revisions, image optimization, more
  • Compile AMD modules automatically via r.js

Yeoman 0.9.3 Just Launched!

Tools are your friends and will increase your productivity and save you time. You should use them :)

Thank you!

With special thanks to my talented wife, Elle Osmani, who named my talk title and Paul Irish for inspiring this talk.