Yeoman is a tool for modern web development workflows that consists of three key components: Yo, Bower, and Grunt. Yo is a scaffolding tool that generates project structure and files. Bower is a package manager for front-end components. Grunt is a JavaScript task runner for automating development tasks like testing, building, and previewing projects. The document provides examples of using Yeoman, Bower, and Grunt together to generate the structure and dependencies for a sample Backbone application, add testing with Mocha, and build and preview the project.

1. Yeoman
Introducing the 3 wise men of
web development

2. Intro
• Web Developer
• Mobile Developer
• @jrcryer

3. three wise men?

4. Yeoman
• Modern Workflows for Modern Apps
• Version 1.0 RC1
• Three key components
• Yo
• Bower
• Grunt

5. Yo
• Scaffolding tool
• Similar Rails Generators
• Scaffolds project structure, defaults and Gruntfile
• Existing generators for:
• AngularJS, Chrome App, Flask, Silex, Sinatra, Firefox OS...

6. Yo: Generators
• Node Modules
• Available via NPM
• Rolling your own
npm search yeoman-generator
http://yeoman.io/generators.html#writing-your-first-generator

7. Bower
• Package Manager for the web
• Created at Twitter
• Runs over Git
• No system wide dependencies
• No cross project dependencies
• Flattens dependency tree

8. Bower: Dependencies
• Dependencies are documented in bower.json
• Bower CLI tool allows:
• Searching for dependencies
• Installing dependencies
• Registering packages
• Packages available for:
• jQuery, D3, three.js, Backbone, Modernizr,AngularJS...

9. Grunt
• JavaScript Build tool
• Automation of repetitive developer tasks
• Allows developers to test, preview and build projects
• Plugins used to mix and match per project
• Configurable tasks

10. Grunt: Plugins
• Node Module
• JavaScript / CoffeeScript
• Creating a plugin:
• Plugins available for:
• HTMLmin, Mocha, PHPUnit, RECESS, SCSS / LESS
http://gruntjs.com/creating-plugins

11. Grunt DevTools

12. Demo Time!

13. Getting Started!
• InstallingYo, Grunt and Bower:
• Installing a Generator
npm install -g yo grunt-cli bower
npm install -g generator-backbone generator-mocha

14. Creating a project
• Create a new empty project folder
• Scaffolding the project
mkdir -p ~/projects/backbone && cd ~/projects/backbone
yo backbone

15. building App
• Create a Model
• Create a Collection
• Create aView
• Create a Router
yo backbone:model url
yo backbone:collection url
yo backbone:view url
yo backbone:router url

16. The Router
var UrlRouter = Backbone.Router.extend({
routes: {
"" : "onAppLoad"
},
onAppLoad: function() {
var url = new UrlCollection();
var view = new UrlView({
el: '#urls',
collection: url
});
}
});

17. TheView
...
events: {
"submit form": "create",
},
create: function(e) {
e.preventDefault();
var input = this.$el.find('input');
var value = input.val();
if (value) {
this.collection.create({longUrl: value});
input.val("");
input.focus();
}
}
...

18. The Model
var UrlModel = Backbone.Model.extend({
defaults: {},
url: "https://www.googleapis.com/urlshortener/v1/url"
});

19. Updating theView
initialize: function() {
this.collection.on('change', this.render, this);
},
render: function() {
var list = this.$el.find('.items');
list.html('');
_.each(this.collection.models, function(model) {
list.append(this.template({model: model.toJSON()}));
}, this);
return this;
},

20. Adding a URL Template
<div class="url">
<span class="long">
<a href="<%= model.longUrl %>"><%= model.longUrl %></a>
</span>
<span class="short">
<a href="<%= model.id %>"><%= model.id %></a>
</span>
</div>

21. Adding a Dependency
• Finding a dependency:
• Installing a dependency:
bower search backbone.localStorage
bower install backbone.localStorage

22. The Collection
var UrlCollection = Backbone.Collection.extend({
cache: new Backbone.LocalStorage("urls"),
model: UrlModel,
initialize: function() {
this.on('change', this.cacheUrl, this);
this.add(this.cache.findAll());
},
cacheUrl: function(model) {
this.cache.create(model);
}
});

23. Testing
• Mocha + Expect
describe('Give a URL', function () {
it('should have a URL for Google Shortener API', function () {
var model = new UrlModel();
expect(model.url).to.eql("https://www.googleapis.com/urlshortener/v1/url");
});
});
• Running the tests:
grunt test

24. Preview + Building
• Previewing:
• Building:
grunt server
grunt build

25. Fin!