Backbone.js

Backbone.jsWhat it is, what it does, and why we use it at Usable.

Backbone.js• Not a magic bullet.• Not tiny once you make it useful (139kb).• Not perfect, some things are hard.• Not suitable for some applications.

Backbone.js• MVC - Model,View, Controller• (Backbone.js calls the controller a Router)• Collections, Sync, History, and more• Underscore.js, json2.js, jQuery (or Zepto)

Backbone.jsModels - Objects that represent a thing. • Models are objects • Core of Backbone.js • Contains an array of attributes • Listens for events

Backbone.jsModels - Objects that represent a thing.var Cat = Backbone.Model.extend({ defaults: { name: ‘Cat’, breed: Moggy, colour: ‘Ginger’, legs: 4 }, initialize: function(data) { },});

Backbone.jsUsing a model - Getting attributes.var Purrkins = new Cat({ name: ‘Purrkins’,});console.log(Purrkins.get(“breed”)); //Moggyconsole.log(Purrkins.get(“colour”)); //Gingerconsole.log(Purrkins.get(“name”)); //Purrkins

Backbone.jsUsing a model - Setting attributes.Purrkins.set({name:‘Mister Purrkins’, age: 6});console.log(Purrkins.get(“name”)); //Mister Purrkins

Backbone.jsUsing a model - Saving. • Saving a model is easy • Backbone Sync • Restful interface - GET, POST, PUT, DELETE • Up to you to write the server side stuff

Backbone.jsUsing a model - Saving to an API.var Cat = Backbone.Model.extend({ url: ‘/api/cat/’, defaults: { name: ‘Cat’, breed: Moggy, colour: ‘Ginger’, legs: 4 }, initialize: function(data) { },});

Backbone.jsUsing a model - Saving to an API.Purrkins.save({name:‘Mister Purrkins’, age: 6});POST http://localhost/api/cat/PAYLOAD: { "name":"Mister Purrkins", "breed":"Moggy", "colour":"Ginger", "legs":4, “age”: 6}

Backbone.jsUsing a model - Validating. • Should you just save everything? • Models need to be validated • No helper functions for validation • Underscore.js provides some

Backbone.jsUsing a model - Validating before saving.var Cat = Backbone.Model.extend({ url: ‘/api/cat/’, defaults: { name: ‘Cat’, breed: Moggy, colour: ‘Ginger’, legs: 4 }, initialize: function(data) { }, validate: function(attrs) { var errors = {}; if (attrs.age < 5) { errors.age = ‘Must be below 5’; } if (!_.isEmpty(errors)) { errors.invalid = true; return errors; } },});

Backbone.jsUsing a model - Validating before saving.Purrkins.save( {age: 6}, success: function(){ console.log(‘Kitty saved’); }, error: function(model,error){ if (error.invalid==true) { $.each(_.keys(error), function(i,el){ console.log(el+”:”+error[el]); }); } else { console.log(“Error status: ”+error.status); console.log(“Error response: ”+error.responseText); } });age:Must be below 5

Backbone.jsUsing a model - API errors.Purrkins.save( {age: 4}, success: function(){ console.log(‘Kitty saved’); }, error: function(model,error){ if (error.invalid==true) { $.each(_.keys(error), function(i,el){ console.log(el+”:”+error[el]); }); } else { console.log(“Error status: ”+error.status); console.log(“Error response: ”+error.responseText); } });Error status: 500Error response: Internal Server Error - Database not found

Backbone.jsCollections - Groups of objects. • Collections are ‘arrays’ of models • Add, push, shift, pop, unshift, etc • Built on Underscore.js • Filter, sort, etc

Backbone.jsCollections - Groups of objects.var Glaring = Backbone.Collection.extend({ model: Cat});Collective noun for a group of cats: a glaring

Backbone.jsUsing a collection - Adding models.var CrazyCatLady = new Glaring([ {id: 1, name: ‘Purrkins’, legs: 3}, {id: 2, name: ‘Napoleon’, colour:‘Tabby’}, {id: 3, name: ‘Josey’, colour:‘Tabby’, legs: 100}, {id: 4, name: ‘Coco’, breed:‘Siamese’, colour:‘Chocolate’}, {id: 5, name: ‘Charlie’},]);console.log(CrazyCatLady.get(2).get(“name”)); //NapoleonCrazyCatLady.add({id: 6, name: ‘Augustus’});console.log(CrazyCatLady.get(6).get(“name”)); //Augustus

Backbone.jsUsing a collection - Underscore.js rocks.var TabbyCats = CrazyCatLady.where({colour: “Tabby”);console.log(TabbyCats); //Napoleon, Joseyvar fourorfivelegs = CrazyCatLady.filter(function(Cat){ var legs = cat.get(“legs”); return (legs > 3 && legs < 6);});console.log(fourorfivelegs); //Napoleon, Coco, Charlie, Augustusvar names = CrazyCatLady.pluck(“name”);console.log(names); //Purrkins, Napoleon, Josey, Coco, Charlie, Augustus

Backbone.jsViews - Displaying a model. • Views are not HTML • Views are a description of a model • The HTML code comes from templates • Works with any template system

Backbone.jsViews - Displaying a model.var Catview = Backbone.View.extend({ initialize: function() { _.bindAll( this, render ) }, render: function() { this.$el.html(templates.catview(this.model.toJSON())); return this; },});var c = new Catview({model: CrazyCatLady.get(1) });$(‘div#cat’).html(c.render().el);

Backbone.jsViews - Displaying a collection. • Collections can have views • Actually a view containing views • Nested? Sort of. • Think in terms of partials/blocks

Backbone.jsViews - Displaying a collection.var CatRowView = Backbone.View.extend({ tagName: "div", initialize: function() { _.bindAll( this, render ) this.model.bind(change, this.render, this); }, render: function() { this.$el.html(templates.catrowview(this.model.toJSON())); return this; },});

Backbone.jsViews - Displaying a collection.var CatListView = Backbone.View.extend({ initialize: function(data) { this.collection = data.collection; this.collection.bind(add, this.addOne, this); this.collection.bind(all, this.render, this); this.collection.each(this.addOne); }, render: function() { }, addOne: function(cat) { var view = new CatRowView({model:cat}); $("div#cats").append(view.render().el); },});

Backbone.jsViews - Displaying a collection.var catslisting = new CatListView({collection: CrazyCatLady});CatListView CatRowView - Purrkins CatRowView - Napoleon CatRowView - Josey CatRowView - Coco CatRowView - Charlie CatRowView - Augustus

Backbone.jsViews - Binding events. • Views are not just about displaying things • Binding events to View elements • Stuff happens when you click things • Or double click, press a key, whatever

Backbone.jsViews - Binding events.var Catview = Backbone.View.extend({ initialize: function() { _.bindAll( this, render ) }, events: { "click a.edit": "edit", }, render: function() { this.$el.html(templates.catview(this.model.toJSON())); return this; }, edit: function(){ app.navigate(#/cats/+this.model.id, true); }});

Backbone.jsRouting - Backbone.js’ controller.var Router = Backbone.Router.extend({ routes: { “/cats”: “cats”, “/cats/:catid”: “catview”, “*path”: “default”, }, cats: function(){ //Something to do with cats }, catview: function(catid){ //Something to do with a specific cat }, default: function(path){ //Everything else }});

Backbone.jsRouting - Backbone.js’ controller. cats: function(){ var catlisting = new CatList({ collection: CrazyCatLady }); $(div#content).html(catlisting.render().el); }, catview: function(id){ var catview = new CatView({ model: CrazyCatLady.get(id) }); $(div#content).html(catview.render().el); }, default: function(path){ var template = path.substr(1); //strip the initial / if (template==) { template = base; } ui.display(path, template); },

Backbone.jsHistory - Handling hashchange eventsBackbone.history.start();Important notes:• Must start after the router object.• Must start after the HTML is done. Wrap it inyour favourite ﬂavour of jQuery.ready();• If you can get pushState to work, tell me how.

Backbone.jsWho’s using it? • UsableHQ (that’s me!) • Foursquare, Stripe, DocumentCloud • LinkedIn, Basecamp, AirBnB (for mobile) • Flow, Wunderkit, Khan Academy

“Don’t let the perfect be the enemy of the good.” Voltaire

Chris NealeTechnical Director, UsableHQ chris@usablehq.com @usablehq or @onion2k

Backbone.js

by onion2k

Accessibility

Categories

Upload Details

Usage Rights

2 Embeds 2

Statistics

Backbone.js Presentation Transcript

https://si0.twimg.com	1
http://faavorite.com	1