Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Potential gotchas in making a Backbone app

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

Avatar for Vignesh Nandha Kumar

Vignesh Nandha Kumar

September 21, 2013
Tweet

Other Decks in Technology

Transcript

  1. Why use Backbone? ➔ robust ➔ tiny ➔ mature ➔

    community (plugins & extensions) ➔ There is no magic
  2. 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
  3. 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
  4. 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
  5. 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]
  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. 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
  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. 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
  10. 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
  11. ➔ 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
  12. ➔ 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
  13. 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