Backbone.js, which gives you a robust framework for making javascript-heavy apps, is very minimal when compared to its counterparts like Angular js. It gives the developer much control over the behavior, but with great power comes great responsibility :)

1. Potential gotchas in making a
Backbone app
JSFoo 2013 - Sep 20, 21

2. Me
Vignesh Nandha Kumar
Making Crafting UX for Recruiterbox

3. Why use Backbone?
➔ robust
➔ tiny
➔ mature
➔ community (plugins & extensions)
➔ There is no magic

5. There is no magic
➔ doesn’t tell you best practices
➔ too much boilerplate
➔ leads to zombies
➔ duplicate copies of data
➔ end up in mess if you don’t plan well

6. There is no magic
➔ doesn’t tell you best practices
➔ too much boilerplate
➔ leads to zombies
➔ duplicate copies of data
➔ end up in mess if you don’t plan well

7. var AnyModelView = Backbone.View.extend({
initialize: function() {
this.model.on('change', this.render, this);
this.model.on('destroy', this.remove, this);
},
render: function() {
var template =_.template(
$('#jst-some-template').html()
);
this.$el.html(template(this.model.toJSON()));
return this;
}
});
Boilerplate

8. var AnyCollectionView = Backbone.View.extend({
initialize: function() {
this.collection.on('add', this.appendItem, this);
},
render: function() {
this.$el.empty();
this.collection.each(this.appendItem, this);
return this;
},
appendItem: function( model ) {
this.$el.append(new AnyModelView({
model: model
}).render().$el);
}
});
Boilerplate [contd]

9. There is no magic
➔ doesn’t tell you best practices
➔ too much boilerplate
➔ leads to zombies
➔ duplicate copies of data
➔ end up in mess if you don’t plan well

10. Zombies
“Whenever I visit the same page more than once,
I see one more copy of the view getting created every time?”
or
“How do I make sure I clean things up when moving to a new
page in my app?”
https://gist.github.com/vikynandha/6540811
https://github.com/vikynandha/BackboneZombieDemo

11. There is no magic
➔ doesn’t tell you best practices
➔ too much boilerplate
➔ leads to zombies
➔ duplicate copies of data
➔ end up in mess if you don’t plan well

12. Duplicate copies
var Article = Backbone.Model.extend({
parse: function( resp ) {
return _(resp).extend({
author: new User(resp.author)
});
}
});
var post1 = new Article(),
post2 = new Article();
post1.get('author').id === post2.get('author').id; // true
post1.get('author') === post2.get('author'); // false

13. Duplicate copies
var Article = Backbone.Model.extend({
parse: function( resp ) {
return _(resp).extend({
author: new User(resp.author)
});
}
});
var post1 = new Article(),
post2 = new Article();
post1.get('author').id === post2.get('author').id; // true
post1.get('author') === post2.get('author'); // false

14. ➔ doesn’t tell you best practices
➔ too much boilerplate
➔ leads to zombies
➔ duplicate copies of data
➔ end up in mess if you don’t plan well
There is no magic

15. ➔ doesn’t tell you best practices
➔ too much boilerplate
➔ leads to zombies
➔ duplicate copies of data
➔ end up in mess if you don’t plan well
There is no magic

16. Solution?

17. Solution?
So many plugins available out there
https://github.com/jashkenas/backbone/wiki/Extensions,-Plugins,-Resources

19. Boilerplate gone!
var MyModelView = Backbone.Marionette.ItemView.extend({
template: '#jst-some-template',
modelEvents: {
'change': 'render',
'destroy': 'remove'
}
});

20. Zombies killed!
Built-in memory management and zombie killing

21. Regions & Layouts
Managing nested sub-views is a piece of cake

22. Marionette
➔ Composite Application Framework
"The secret to building large apps is never build large apps.
Break your applications into small pieces. Then, assemble
those testable, bite-sized pieces into your big application"
-Justin Meyer, author JavaScriptMVC

23. Thank you!
https://github.com/vikynandha/
https://github.com/aplopio/

24. References
1. http://backbonejs.org
2. http://lostechies.
com/derickbailey/2011/09/15/zombies-run-
managing-page-transitions-in-backbone-apps/
3. http://marionettejs.com
4. http://amy.palamounta.in/2013/04/12/unsuck-
your-backbone/