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
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"
});
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