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 4. There is no magic doesnt tell you best practices too much boilerplate leads to zombies duplicate copies of data end up in mess if you dont plan well 5. There is no magic doesnt tell you best practices too much boilerplate leads to zombies duplicate copies of data end up in mess if you dont plan well 6. 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 7. 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] 8. There is no magic doesnt tell you best practices too much boilerplate leads to zombies duplicate copies of data end up in mess if you dont plan well 9. 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 10. There is no magic doesnt tell you best practices too much boilerplate leads to zombies duplicate copies of data end up in mess if you dont plan well 11. 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 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. doesnt tell you best practices too much boilerplate leads to zombies duplicate copies of data end up in mess if you dont plan well There is no magic 14. doesnt tell you best practices too much boilerplate leads to zombies duplicate copies of data end up in mess if you dont plan well There is no magic 15. Solution? 16. Solution? So many plugins available out there https://github.com/jashkenas/backbone/wiki/Extensions,-Plugins,-Resources 17. Boilerplate gone! var MyModelView = Backbone.Marionette.ItemView.extend({ template: '#jst-some-template', modelEvents: { 'change': 'render', 'destroy': 'remove' } }); 18. Zombies killed! Built-in memory management and zombie killing 19. Regions & Layouts Managing nested sub-views is a piece of cake 20. 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 21. Thank you! https://github.com/vikynandha/ https://github.com/aplopio/ 22. 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/