Paul.Irish--HTML5.Developer.JSConf.2012--WebApp.Dev.Workflow.md

Paul Irish on Web Application Development Workflow

JSHint OR JSLint

Yeomen; LiveReload; CodeKit

get your console rolling to dev mode {obviosuly}

• Paul Irish's DotFiles collection
• Console Aliases
• SSH Pub-Priv Key usage
• GITHUB Hooks

Editor Config : http://editorconfig.org/

Setup a style guidelines for code and let Editor take care of that

JSHint

Use .jshintrc to implement code-quality

Yeomen

Built on tools like

• Yo : scaffolds a new app and manages the workflow
• Grunt : build, preview, test
• Bower : dependency management

Includes

• Compass, Sass, CoffeeScript
• AMD Module Support, RequireJS, ES6 Module Experiment
• Bootstrap, Stripped HTML5 Boilerplate, Modernizr
• Mocha, PhantomJS
• r.js, OptiPNG, jpegtran, confess.js

Usage

INIT

  $ yeomen init   {now yo webapp}

• Out of the box includes HTML5 Boilerplate, jQuery and Modernizr.
• Asks options for more. Interactive enough.
• It changed a lot since this talk: so FOLLOW http://yeoman.io/gettingstarted.html

Summary

• Scaffold in a snap
• Live recompile, Live refresh
• Sass, Coffeescript, AMD & ES6 modules
• Run unit tests in headless Webkit via PhantomJS
• Robust build scripts

Testing

• Localtunnel : quick way to test your local app everywhere
• Testem : txt-ui auto-rerun-on-save for mocha, qunit, jasmine
• BrowserStack : Live Web Based Browser Testing
• AppThwack : testing your apps on 100s real devices
• OpenDeviceLab.com ; Lab-Up.org give to community for community

Style Iteration

• Sass + LiveReload : Chrome DevTools > Settings > Experiment > Support for Sass
• Wing it with guard : https://github.com/guard/guard

Chrome DevTools

• Chrome DevTools > Sources > Navigator > Snippets :: gives multi-line console, add JS to your page and play
• Can pause
• Chrome DevTools > Ctrl + Shift + F {search against all}
• Chrome DevTools > Settings > Override > UserAgent, Device Metrics, Enable Touch Events

Styled console messages :

    console.log('%c is styled', 'background: #222, color: #bada55')

    var msg = "Overkill for console log, put any CSS in style", style;
    style = ['display: block; padding: 100px 0; text-align:center; font-size: 50px'].join(' ')
    console.log('%c' + msg, style);