Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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
➔...
There is no magic
➔ doesn’t tell you best practices
➔ too much boilerplate
➔ leads to zombies
➔ duplicate copies of data
➔...
var AnyModelView = Backbone.View.extend({
initialize: function() {
this.model.on('change', this.render, this);
this.model....
var AnyCollectionView = Backbone.View.extend({
initialize: function() {
this.collection.on('add', this.appendItem, this);
...
There is no magic
➔ doesn’t tell you best practices
➔ too much boilerplate
➔ leads to zombies
➔ duplicate copies of data
➔...
Zombies
“Whenever I visit the same page more than once,
I see one more copy of the view getting created every time?”
or
“H...
There is no magic
➔ doesn’t tell you best practices
➔ too much boilerplate
➔ leads to zombies
➔ duplicate copies of data
➔...
Duplicate copies
var Article = Backbone.Model.extend({
parse: function( resp ) {
return _(resp).extend({
author: new User(...
Duplicate copies
var Article = Backbone.Model.extend({
parse: function( resp ) {
return _(resp).extend({
author: new User(...
➔ doesn’t tell you best practices
➔ too much boilerplate
➔ leads to zombies
➔ duplicate copies of data
➔ end up in mess if...
➔ doesn’t tell you best practices
➔ too much boilerplate
➔ leads to zombies
➔ duplicate copies of data
➔ end up in mess if...
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: {
'...
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 appl...
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-transitio...
Potential gotchas in making a backbone app
Potential gotchas in making a backbone app
Upcoming SlideShare
Loading in …5
×

1

Share

Download to read offline

Potential gotchas in making a backbone app

Download to read offline

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

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

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/
  • oligoglot

    Sep. 22, 2013

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

Views

Total views

1,356

On Slideshare

0

From embeds

0

Number of embeds

239

Actions

Downloads

6

Shares

0

Comments

0

Likes

1

×