Potential gotchas in making a backbone app

1,217 views

Published on

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

Published in: Technology, Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,217
On SlideShare
0
From Embeds
0
Number of Embeds
179
Actions
Shares
0
Downloads
6
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Potential gotchas in making a backbone app

  1. 1. Potential gotchas in making a Backbone app JSFoo 2013 - Sep 20, 21
  2. 2. Me Vignesh Nandha Kumar Making Crafting UX for Recruiterbox
  3. 3. Why use Backbone? ➔ robust ➔ tiny ➔ mature ➔ community (plugins & extensions) ➔ There is no magic
  4. 4. 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
  5. 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. 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. 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. 8. 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
  9. 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. 10. 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
  11. 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. 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. 13. ➔ 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
  14. 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. 15. Solution?
  16. 16. Solution? So many plugins available out there https://github.com/jashkenas/backbone/wiki/Extensions,-Plugins,-Resources
  17. 17. Boilerplate gone! var MyModelView = Backbone.Marionette.ItemView.extend({ template: '#jst-some-template', modelEvents: { 'change': 'render', 'destroy': 'remove' } });
  18. 18. Zombies killed! Built-in memory management and zombie killing
  19. 19. Regions & Layouts Managing nested sub-views is a piece of cake
  20. 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. 21. Thank you! https://github.com/vikynandha/ https://github.com/aplopio/
  22. 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/

×