Create a New App Faster

with Yeoman + Bower

Yeoman

• http://yeoman.io
• Command line tool for generating apps
• npm install -g yo

Why Yeoman?

• Sets up directory structure
• Adds JavaScript and CSS libraries
• Prompts you with questions like
  "Would you like to use Sass (with Compass)?"
• Sets up Grunt, Bower, Karma for tests, package.json

Creating An App

1. Install a generator, e.g., AngularJS
   npm install -g generator-angular
2. Run the generator in empty directory
   yo angular my_app_name

New Yeoman AngularJS App

Start coding

1. grunt serve
2. http://localhost:9000 opens automatically
3. File changes cause the browser to reload—mysterious!

Bower

• http://bower.io
• Easily include CSS and JavaScript libraries in your app
• npm install -g bower

Why Bower?

• It fetches libraries for you
• Uses bower.json much like package.json for Node
  apps—versioning!
• It downloads the library and updates your index.html
  to include files
• index.html updated → browser reloads with your new libraries

Finding Packages

• Search online: http://bower.io/search
• Search in your terminal:
  % bower lookup fontawesome
fontawesome git://github.com/FortAwesome/Font-Awesome.git

Installing Packages

bower install fontawesome --save

1. Library downloaded to bower_components/
2. app/index.html updated to include library
3. bower.json updated to include library and version—
   bower install is like npm install

+ = Glorious Synergy

• No manual download, unzip, copy, include to use CSS and JavaScript libraries
• Generated Gruntfile combines and minifies everything for production with grunt build
  • View source of evaluatjon.com:
    one CSS file, two JavaScript files, all minified
• Can add other commands to grunt serve, such as to start a Rails app

+ = Fast Development

Two apps in a few days:

• evaluatjon.com
  Ruby on Rails, AngularJS
• palette-producer.herokuapp.com
  AngularJS

Questions?