Potential gotchas in making a backbone app
Upcoming SlideShare
Loading in...5
×
 

Potential gotchas in making a backbone app

on

  • 961 views

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 ...

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

Statistics

Views

Total Views
961
Views on SlideShare
816
Embed Views
145

Actions

Likes
1
Downloads
1
Comments
0

6 Embeds 145

https://hasgeek.tv 63
http://eventifier.co 39
http://librosweb.es 24
http://localhost 11
https://funnel.hasgeek.com 6
https://twitter.com 2

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Potential gotchas in making a backbone app Potential gotchas in making a backbone app Presentation Transcript

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