Introduction to Yeoman, includes demo of all three tools to build a single page Backbone.js app

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!