Potential gotchas in making a Backbone app

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 :)

Transcript

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/