Modern Workflows for Modern Webapps

Automate as much of your workflow as possible

Yeoman Creators

Front-end Tooling Landscape

• Boilerplate
  • HTML5 (HBP5)
  • Twitter Bootstrap
  • Backbone Boilerplate
  • Angular Seed
  • Ember Starter
  • Module-loader
  • Zurb Foundation
• Abstractions
  • CoffeeScript
  • Sass, Less
  • Compass, Jade
  • Haml, Zen coding
  • Markdown
  • Handlebars
  • Iced Coffee
  • TypeScript
  • Traceur
• Frameworks
  • Backbone
  • Angular, Ember
  • YUI, Agility
  • CanJS, Dojo
  • Meteor, Derby
  • Spine, Batman
  • Cujo, Knockout
  • Knockback
  • jQuery Mobile
  • jQuery UI
  • Closure, ExtJS
  • flight
• Workflow
  • Chrome DevTools
  • LiveReload
  • CodeKit
  • Brunch
  • WebStorm IDE
  • watch, Tesling
  • Tincr, JSHint
  • BrowserStack
  • Selenium
  • WebGL Inspector
• Performance
  • JavaScript CSS
  • Heap Profiling
  • GPU,
  • memory tracing
  • PageSpeed
• Build
  • Grunt, Rake
  • Maven
  • Concat, r.js
  • Minification
  • Image optimization,
  • Compresssion
  • Module loading
  • mode_pages peed

FRONT-END TOOLING LANDSCAPE

Modern Webapp Workflow

• Scaffolds

  open_site().find().download().move()([ 'boilerplates', 'libraries' ]);
  config([ 'pacakge.json', '.editorconfig', '.jshintrc', 'Gruntfile' ]);
  

• Dive into Code

  _.loop( function(){
    out_of_date && open_site().find().download().move([ 'libraries' ]);
    (sass && compass) && watch();
    coffee ? coffee().compile() : coding().linting();
    livereload || find_and_switch_browser().reload_by_my_hand();
    debugging().tuning();
  }, time_to_go_home() );

• Build

  linting().compile().min().uglify().optimize().package().dist();
  

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

+Addy Osmani

Yeoman toolset

Yeoman features

• 1.0.0-beta.3 Released
• Scaffolding
• Build Process
• Auto-Compile (CoffeeScript)
• Auto-Lint
• Built-in Preview Server
• Image Optimization
• Package Management
• PhantomJS Unit Testing

Yoeman Workflow - Yo

• Scaffolding Tool - Create a new webapp

# defualt generator
yo webapp

# angular generator
yo angular
yo angular:controller myController
yo angular:directive myDirective
yo angular:filter myFilter

# chromes apps generator
yo chromeapp
yo chrome-extentions

Bower

• Dependency Management - Handle dependecies

#search
bower search backbone

# install one or more dependencies
bower install backbone.layoutmanager

# list installed dependencies.
bower list

# update to the latest version available
bower update lodash

Grunt.js

• Build Tool - Preview, test, build, package
• Task based command line build tool

# build an optimized, production-ready version
grunt

# preview your app (Livereload)
grunt server

# run the unit tests for an app
grunt test

Default Webapp Workflow with Yeoman

# scaffolds
yo webapp

# install default dependencies
npm install && bower install

# install a dependency for your project from Bower
bower install jquery

# test and preview your app
grunt test
grunt server

# build the application for deployment
grunt

Chrome Extension Generator For Yeoman

• Yeoman Official Generator
• Scaffolds new extension, build and compress

Chrome Extension Workflow

• Scaffolds

  var manifest = {
    name: 'my prototype extension',
    assets: [ 'icon16,19,38,128', 'popup.html',
              'option.html', 'main.css' ],
    scripts: [ 'background', 'contentscript' ],
    lib: [ 'boilerplates', 'libraries' ]
  };
  write(manifest);
  prev ? copy(manifest) : make(manifest);
  });
  

• Dive into Code
• Build & Publish

  compile().concat().optimize().COMPRESS().publish();
  

Chrome Extension Workflow with Yeoman

# install with official package
npm install generator-chrome-extension
# install with preview version, via github repo
npm install 'git://github.com/ragingwind/generator-chrome-extension.git'

# scaffolds, generate menifest.json, default script/html/assets
yo chrome-extension

# install default dependencies
npm install && bower install

# test, build and compress
grunt jshint && grunt test
grunt

Chome Extensions

Demo - Page Action

• Review Site with Google+ Moment

  yo chrome-extension
  
  # interacting with options
  Would you like to use UI Action(1: Browser, 2:Page)? 2
  Would you like to use the Options Page? (y/N) y
  Would you like to use the Content Scripts? (y/N) y
  Would you like to declare the "Tabs" permission? (y/N) y
  
  # install default dependencies
  npm install && bower install
  bower insall jquery --save && bower insall oauth2-extensions-for-test --save
  
  # test, lint and build
  grunt jshint && grunt test
  grunt
  

Demo - Browse Action

• Visit Count (History)

  yo chrome-extension
  
  # interacting with options
  Would you like to use UI Action(1: Browser, 2:Page)? 1
  Would you like to declare the "Tabs" permission? (y/N) y
  Would you like to declare the "History" permission? (y/N) y
  
  # install default dependencies
  npm install && bower install
  bower insall jquery --save
  
  # test, lint and build
  grunt jshint && grunt test
  grunt
  

Demo - Omnibox

• Omnibox Dictionary

  yo chrome-extension
  
  # interacting with options
  Would you like to use UI Action(1: Browser, 2:Page)? 0
  Would you like to use the Omnibox? (Please input keyword) dic
  
  # install default dependencies
  npm install && bower install
  
  # test, lint and build
  grunt jshint && grunt test
  grunt
  

Publishing Your App

Thank you