Tools are the enablers that help us bring our ideas to fruition.
The front-end tooling landscape is constantly evolving.
A brief history of time.
Tools must be changed if they are unable to evolve.

The right tools can make the difference between an artist and a craftsman.

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

A tooling workflow for modern webapp developers

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

Command-line

Your text editor is like an onion app. Keep peeling back layers to reveal more functionality. ~ Paul Irish

Sublime Text #protips

Finding missing semicolons should never be a manual process.

Linting

  • On file save
  • On source control commit
  • At build time
  • Anything better?

Live feedback

WebStorm

  • Live Edit + Chrome
  • JS Language version based suggestions
  • Code inspection and zen coding
  • Suggestions for DRYer code
  • Built in code linting
  • and more

In-browser DevTools

  • Constantly evolving
  • Use Canary channel for development
  • Lots of juicy experimental features

A better authoring workflow

CSS With A Little Programming

  • SASS, LESS, Stylus, Compass
  • Mixins - reusable fragments of CSS
  • Mathematical expression evaluation
  • Old school inspection:
    SASS Sleuth

WAT? Live reloading + SASS Source Maps

  • Editing compiled CSS has little value
  • Enable new SASS hotness
  • BOOM! You can edit SASS source files
  • Changes automatically reload

CoffeeScript + @sourceURL

  • Demo
  • Compile your source
  • Open up the DevTools
  • BOOM! sourceURL comments

Mobile Debugging: Overrides Panel

Extensions: Angular Batarang

  • Get it here
  • Inspect $scope
  • Inspect models
  • Debug bindings
  • Get performance metrics

Charles Proxy

  • Simulate slower connections
  • Great for testing lo-fi, mobile
  • Simpler debugging of Ajax with JSON/JSONP views
  • Debug HTTPS sessions

Unit Testing

Tests can be run anywhere these days:

  • 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 Modernizr/test/index.html -c ~/bunyip/config.js -b ios
    bunyip -f index.html local -l "firefox|chrome|safari|phantomjs"

Scaffolding

Build system

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

New hotness: Grunt.js

Grunt.js:

  • Task based command line build tool
  • Alternative to Rake/Cake/Make/Jake
  • Rich community of build tasks
  • Generates simple skeleton for new projects
  • Lint, test, concat, watch and min out of the box.
  • however..you're still responsible for workflow

GUIs

so much choice! you want flexibility. could we make this any easier?

Introducing Yeoman

Go from idea to a rough prototype in 10 min

Limit the time spent on writing boilerplate for your app

Automate as much of your workflow as possible

Yeoman

  • Authoring abstractions
  • Scaffolds
  • Linting
  • LiveReload
  • Testing
  • Build tools
  • and more.

Built on top of great tools like Grunt and Bower

Package Management

How do you update the libraries you use?

  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

Can we do better?

  • dependency chains are resolved for you
  • automatic wiring using Yeoman with RequireJS
  • easier discovery and management of dependencies you might use

How about...

  • yeoman install backbone
    yeoman install backbone.localStorage
    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.
  • Maturing generators like the AngularJS one

Some of our generators

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

Angular + Yeoman

  • Rapid development process
  • Scaffold modules, directives, filters, views and more
  • Testacular support
  • Help improve the generator
  • An app in 60 mins screencast

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 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: AngularJS + Yeoman
  6. Writing JavaScript.
  7. Build process incl best in class image optimization.

What's next?

Yeoman in 2013

  1. Improved flexibility with tools (Grunt, Bower)
  2. Tasks available to the whole Grunt community
  3. Better editor integration
  4. Support for backends (Rails, PHP)
  5. Better mobile helpers and remote debugging
  6. Support for all of JS.next (Traceur)
  7. Deployment (Heroku, AppEngine)
  8. ..plans for a little more

Yeoman 0.9.5 Just Launched!

Learn to love your workflow and tools

Thank you!