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

backbone.js-init-lab

 backbone.js-init-lab

My backbone.js presentation at initLab. Code for the demos available at: https://github.com/RStankov/backbone-presentation

Radoslav Stankov

June 23, 2012
Tweet

More Decks by Radoslav Stankov

Other Decks in Programming

Transcript

  1. Radoslav Stankov
    init Lab / SofiaJs 23/06/2012

    View full-size slide

  2. Who am I?
    @rstankov
    http://rstankov.com
    http://github.com/rstankov

    View full-size slide

  3. Model View
    Browser
    Controller
    Сървър

    View full-size slide

  4. Model View
    Browser
    Controller
    Сървър

    View full-size slide

  5. Model View
    Browser
    Controller
    Сървър

    View full-size slide

  6. Model View
    Browser
    Controller
    Сървър

    View full-size slide

  7. Model View
    Browser
    Controller
    Сървър

    View full-size slide

  8. Model View
    Browser
    Controller
    Сървър

    View full-size slide

  9. Model View
    Browser
    Controller
    Сървър

    View full-size slide

  10. Model View
    Browser
    Controller
    Сървър

    View full-size slide

  11. Model View
    Browser
    Controller
    Сървър

    View full-size slide

  12. Model View
    Browser
    Controller
    Сървър

    View full-size slide

  13. Model View
    Browser
    Controller
    Сървър

    View full-size slide

  14. Model View
    Browser
    Controller
    Сървър

    View full-size slide

  15. Model View
    Browser
    Controller
    Сървър

    View full-size slide

  16. Model
    View
    Dom
    Browser

    View full-size slide

  17. Model
    View
    Dom
    Browser

    View full-size slide

  18. Model
    View
    Dom
    Browser

    View full-size slide

  19. Model
    View
    Dom
    Browser

    View full-size slide

  20. Model
    View
    Dom
    Browser

    View full-size slide

  21. Model
    View
    Dom
    Browser

    View full-size slide

  22. Model
    View
    Dom
    Browser

    View full-size slide

  23. Model
    View
    Dom
    Browser

    View full-size slide

  24. Model
    View
    Dom
    Browser

    View full-size slide

  25. Backbone.Events

    View full-size slide

  26. var object = {};
    $.extend(object, Backbone.Events);
    object.on('eventName', function() {
    console.log('1');
    });
    object.on('eventName', function() {
    console.log('2');
    });
    object.trigger('eventName');
    // prints '1' and '2'

    View full-size slide

  27. var object = {};
    $.extend(object, Backbone.Events);
    object.on('eventName', function() {
    console.log('1');
    });
    object.on('eventName', function() {
    console.log('2');
    });
    object.trigger('eventName');
    // prints '1' and '2'

    View full-size slide

  28. var object = {};
    $.extend(object, Backbone.Events);
    object.on('eventName', function() {
    console.log('1');
    });
    object.on('eventName', function() {
    console.log('2');
    });
    object.trigger('eventName');
    // prints '1' and '2'

    View full-size slide

  29. var object = {};
    $.extend(object, Backbone.Events);
    object.on('eventName', function() {
    console.log('1');
    });
    object.on('eventName', function() {
    console.log('2');
    });
    object.trigger('eventName');
    // prints '1' and '2'

    View full-size slide

  30. var object = {};
    $.extend(object, Backbone.Events);
    object.on('eventName', function() {
    console.log('1');
    });
    object.on('eventName', function() {
    console.log('2');
    });
    object.trigger('eventName');
    // prints '1' and '2'

    View full-size slide

  31. Backbone.Model

    View full-size slide

  32. var Person = Backbone.Model.extend({
    initialize: function() {
    console.log("I'm alive!");
    }
    });
    new Person();

    View full-size slide

  33. var Person = Backbone.Model.extend({
    initialize: function() {
    console.log("I'm alive!");
    }
    });
    new Person();

    View full-size slide

  34. var Person = Backbone.Model.extend({
    initialize: function() {
    console.log("I'm alive!");
    }
    });
    new Person();

    View full-size slide

  35. var Person = Backbone.Model.extend({});
    var me = new Person({name: 'Radoslav'});
    me.get('name'); // Radoslav
    me.set({lastName: 'Stankov'});
    me.set(lastName, 'Stankov');
    me.get('lastName'); // Stankov

    View full-size slide

  36. var Person = Backbone.Model.extend({});
    var me = new Person({name: 'Radoslav'});
    me.get('name'); // Radoslav
    me.set({lastName: 'Stankov'});
    me.set(lastName, 'Stankov');
    me.get('lastName'); // Stankov

    View full-size slide

  37. var Person = Backbone.Model.extend({});
    var me = new Person({name: 'Radoslav'});
    me.get('name'); // Radoslav
    me.set({lastName: 'Stankov'});
    me.set(lastName, 'Stankov');
    me.get('lastName'); // Stankov

    View full-size slide

  38. var Person = Backbone.Model.extend({});
    var me = new Person({name: 'Radoslav'});
    me.get('name'); // Radoslav
    me.set({lastName: 'Stankov'});
    me.set(lastName, 'Stankov');
    me.get('lastName'); // Stankov

    View full-size slide

  39. var Person = Backbone.Model.extend({});
    var me = new Person({name: 'Radoslav'});
    me.get('name'); // Radoslav
    me.set({lastName: 'Stankov'});
    me.set(lastName, 'Stankov');
    me.get('lastName'); // Stankov

    View full-size slide

  40. var Person = Backbone.Model.extend({
    defaults: {
    name: 'John',
    lastName: 'Doe',
    }
    });
    var me = new Person();
    me.get('name'); // John
    me.get('lastName'); // Doe

    View full-size slide

  41. var Person = Backbone.Model.extend({
    defaults: {
    name: 'John',
    lastName: 'Doe',
    }
    });
    var me = new Person();
    me.get('name'); // John
    me.get('lastName'); // Doe

    View full-size slide

  42. var Person = Backbone.Model.extend({
    defaults: {
    name: 'John',
    lastName: 'Doe',
    }
    });
    var me = new Person();
    me.get('name'); // John
    me.get('lastName'); // Doe

    View full-size slide

  43. var Person = Backbone.Model.extend({
    defaults: {
    name: 'John',
    lastName: 'Doe',
    }
    });
    var me = new Person();
    me.get('name'); // John
    me.get('lastName'); // Doe

    View full-size slide

  44. var Calculator = Backbone.Model.extend({
    defaults: {
    value: 0
    },
    value: function(){
    return this.get('value');
    },
    sum: function(value){
    this.set(value, value + this.get('value'));
    },
    reset: function(){
    this.set(value, 0);
    }
    });

    View full-size slide

  45. var Calculator = Backbone.Model.extend({
    defaults: {
    value: 0
    },
    value: function(){
    return this.get('value');
    },
    sum: function(value){
    this.set(value, value + this.get('value'));
    },
    reset: function(){
    this.set(value, 0);
    }
    });

    View full-size slide

  46. var Calculator = Backbone.Model.extend({
    defaults: {
    value: 0
    },
    value: function(){
    return this.get('value');
    },
    sum: function(value){
    this.set(value, value + this.get('value'));
    },
    reset: function(){
    this.set(value, 0);
    }
    });

    View full-size slide

  47. var Calculator = Backbone.Model.extend({
    defaults: {
    value: 0
    },
    value: function(){
    return this.get('value');
    },
    sum: function(value){
    this.set(value, value + this.get('value'));
    },
    reset: function(){
    this.set(value, 0);
    }
    });

    View full-size slide

  48. var Calculator = Backbone.Model.extend({
    defaults: {
    value: 0
    },
    value: function(){
    return this.get('value');
    },
    sum: function(value){
    this.set(value, value + this.get('value'));
    },
    reset: function(){
    this.set(value, 0);
    }
    });

    View full-size slide

  49. var cal = new Calculator();
    cal.on('change:value', function(model, value){
    console.log(value);
    });
    cal.on('change', function(model){
    console.log(model.get('value'));
    });
    cal.on('all', function(eventName) {
    console.log('I see everything!', eventName);
    });

    View full-size slide

  50. var cal = new Calculator();
    cal.on('change:value', function(model, value){
    console.log(value);
    });
    cal.on('change', function(model){
    console.log(model.get('value'));
    });
    cal.on('all', function(eventName) {
    console.log('I see everything!', eventName);
    });

    View full-size slide

  51. var cal = new Calculator();
    cal.on('change:value', function(model, value){
    console.log(value);
    });
    cal.on('change', function(model){
    console.log(model.get('value'));
    });
    cal.on('all', function(eventName) {
    console.log('I see everything!', eventName);
    });

    View full-size slide

  52. var cal = new Calculator();
    cal.on('change:value', function(model, value){
    console.log(value);
    });
    cal.on('change', function(model){
    console.log(model.get('value'));
    });
    cal.on('all', function(eventName) {
    console.log('I see everything!', eventName);
    });

    View full-size slide

  53. var cal = new Calculator();
    cal.on('myEvent', function(){
    console.log('KaBoom....');
    });
    cal.trigger('myEvent');

    View full-size slide

  54. var Product = Backbone.Model.extend({
    urlRoot: '/products'
    });
    var chair = new Product({
    name: 'chair',
    price: 10
    });
    chair.save();
    // POST /products

    View full-size slide

  55. var Product = Backbone.Model.extend({
    url: function(){
    return '/products/' + (this.isNew() ? '' : this.id);
    }
    });
    var chair = new Product({
    id: 5,
    name: 'chair',
    price: 10
    });
    chair.save();
    // PUT /products/1

    View full-size slide

  56. http://backbonejs.org/#Model-save

    View full-size slide

  57. И още...
    • validate
    • escape
    • has
    • unset
    • clear
    • hasChanged
    • changedAttributes
    • previousAttributes
    • fetch
    • toJSON
    • clone

    View full-size slide

  58. Backbone.View

    View full-size slide

  59. var UserNameView = Backbone.View.extend({
    tagName: 'input',
    className: 'string optional',
    id: 'user-name',
    attributes: {
    type: 'string',
    name: 'user[name]'
    }
    });
    var userName = new UserNameView();
    console.log(userName.el);

    View full-size slide

  60. var UserNameView = Backbone.View.extend({
    tagName: 'input',
    className: 'string optional',
    id: 'user-name',
    attributes: {
    type: 'string',
    name: 'user[name]'
    }
    });
    var userName = new UserNameView();
    console.log(userName.el);

    View full-size slide

  61. var UserNameView = Backbone.View.extend({
    tagName: 'input',
    className: 'string optional',
    id: 'user-name',
    attributes: {
    type: 'string',
    name: 'user[name]'
    }
    });
    var userName = new UserNameView();
    console.log(userName.el);

    View full-size slide

  62. var UserNameView = Backbone.View.extend({
    tagName: 'input',
    className: 'string optional',
    id: 'user-name',
    attributes: {
    type: 'string',
    name: 'user[name]'
    }
    });
    var userName = new UserNameView();
    console.log(userName.el);

    View full-size slide

  63. var UserNameView = Backbone.View.extend({
    tagName: 'input',
    className: 'string optional',
    id: 'user-name',
    attributes: {
    type: 'string',
    name: 'user[name]'
    }
    });
    var userName = new UserNameView();
    console.log(userName.el);

    View full-size slide

  64. var UserNameView = Backbone.View.extend({
    tagName: 'input',
    className: 'string optional',
    id: 'user-name',
    attributes: {
    type: 'string',
    name: 'user[name]'
    }
    });
    var userName = new UserNameView();
    console.log(userName.el);

    View full-size slide

  65. var UserNameView = Backbone.View.extend({
    tagName: 'input',
    className: 'string optional',
    id: 'user-name',
    attributes: {
    type: 'string',
    name: 'user[name]'
    }
    });
    var userName = new UserNameView();
    console.log(userName.el);

    View full-size slide

  66. var UsersListView = Backbone.View.extend({
    el: '#users-list'
    });
    var userList = new UsersListView();
    console.log(userList.el);

    View full-size slide

  67. var EditBoxView = Backbone.View.extend({});
    var element = $('#edit-box-view').get(0),
    editBox = new EditBoxView({el: element});
    console.log(editBox.el === element);

    View full-size slide

  68. var DocumentView = Backbone.View.extend({
    events: {
    'dblclick': 'open',
    'click .grid .doc': 'select',
    'customEvent .title': 'custom'
    },
    open: function() {},
    select: function() {},
    custom: function() {}
    });

    View full-size slide

  69. var DocumentView = Backbone.View.extend({
    events: {
    'dblclick': 'open',
    'click .grid .doc': 'select',
    'customEvent .title': 'custom'
    },
    open: function() {},
    select: function() {},
    custom: function() {}
    });

    View full-size slide

  70. var DocumentView = Backbone.View.extend({
    events: {
    'dblclick': 'open',
    'click .grid .doc': 'select',
    'customEvent .title': 'custom'
    },
    open: function() {},
    select: function() {},
    custom: function() {}
    });

    View full-size slide

  71. var DocumentView = Backbone.View.extend({
    events: {
    'dblclick': 'open',
    'click .grid .doc': 'select',
    'customEvent .title': 'custom'
    },
    open: function() {},
    select: function() {},
    custom: function() {}
    });

    View full-size slide

  72. var DocumentView = Backbone.View.extend({
    events: {
    'dblclick': 'open',
    'click .grid .doc': 'select',
    'customEvent .title': 'custom'
    },
    open: function() {},
    select: function() {},
    custom: function() {}
    });

    View full-size slide

  73. var DocumentView = Backbone.View.extend({
    events: {
    'dblclick': 'open',
    'click .grid .doc': 'select',
    'customEvent .title': 'custom'
    },
    open: function() {},
    select: function() {},
    custom: function() {}
    });

    View full-size slide

  74. var DocumentView = Backbone.View.extend({
    events: {
    'dblclick': 'open',
    'click .grid .doc': 'select',
    'customEvent .title': 'custom'
    },
    open: function() {},
    select: function() {},
    custom: function() {}
    });

    View full-size slide

  75. <br/><h1><%= title %></h1><br/><time><%= created_at %></time><br/><p><%= text %></p><br/>

    View full-size slide

  76. var NewsView = Backbone.View.extend({
    template: _.template($('#news').html()),
    render: function() {
    this.$el.html(this.template(this.model));
    return this;
    }
    });

    View full-size slide

  77. var NewsView = Backbone.View.extend({
    template: _.template($('#news').html()),
    render: function() {
    this.$el.html(this.template(this.model));
    return this;
    }
    });

    View full-size slide

  78. var NewsView = Backbone.View.extend({
    template: _.template($('#news').html()),
    render: function() {
    this.$el.html(this.template(this.model));
    return this;
    }
    });

    View full-size slide

  79. var view = new NewsView({
    model: {
    title: "News Title",
    created_at: "Today",
    text: "Long text"
    }
    });
    $(’body’).html(view.render().el);

    View full-size slide

  80. <br/><h1><%= title %></h1><br/><time><%= created_at %></time><br/><p><%= text %></p><br/>

    View full-size slide


  81. News Title
    Today
    Long text

    View full-size slide

  82. Model
    View
    DOM

    View full-size slide

  83. Model
    View
    DOM

    View full-size slide

  84. Model
    View
    DOM

    View full-size slide

  85. Model
    View
    DOM

    View full-size slide

  86. Model
    View
    DOM

    View full-size slide

  87. Model
    View
    DOM

    View full-size slide

  88. Model
    View
    DOM

    View full-size slide

  89. Model
    View
    DOM

    View full-size slide

  90. Model
    View
    DOM

    View full-size slide

  91. Model
    View
    DOM

    View full-size slide

  92. Model
    View
    DOM
    View 2

    View full-size slide

  93. Model
    View
    DOM
    View 2

    View full-size slide

  94. Model
    View
    DOM
    View 2

    View full-size slide

  95. Model
    View
    DOM
    View 2

    View full-size slide

  96. Model
    View
    DOM
    View 2

    View full-size slide

  97. Model
    View
    DOM
    View 2

    View full-size slide

  98. Model
    View
    DOM
    View 2

    View full-size slide

  99. Model
    View
    DOM
    View 2

    View full-size slide

  100. Model
    View
    DOM
    View 2

    View full-size slide

  101. Model
    View
    DOM
    View 2

    View full-size slide

  102. Model
    View
    DOM
    View 2

    View full-size slide

  103. Model
    View
    DOM
    View 2
    View 3

    View full-size slide

  104. Model
    View
    DOM
    View 2
    View 3
    View 4

    View full-size slide

  105. Model
    View
    DOM
    View 2
    View 3
    View 4
    View .. N

    View full-size slide

  106. Model
    View
    DOM
    View 2
    View 3
    View 4
    View .. N

    View full-size slide

  107. Model
    View
    DOM
    View 2
    View 3
    View 4
    View .. N

    View full-size slide

  108. Model
    View
    DOM
    View 2
    View 3
    View 4
    View .. N

    View full-size slide

  109. Model
    View
    DOM
    View 2
    View 3
    View 4
    View .. N

    View full-size slide

  110. Model
    View
    DOM
    View 2
    View 3
    View 4
    View .. N

    View full-size slide

  111. Model
    View
    DOM
    View 2
    View 3
    View 4
    View .. N

    View full-size slide

  112. Model
    View
    DOM
    View 2
    View 3
    View 4
    View .. N

    View full-size slide

  113. Model
    View
    DOM
    View 2
    View 3
    View 4
    View .. N

    View full-size slide

  114. var Calculator = Backbone.Model.extend({
    defaults: {
    value: 0
    },
    increment: function() {
    this.set('value', this.get('value') + 1);
    },
    decrement: function() {
    this.set('value', this.get('value') - 1);
    },
    getValue: function() {
    return this.get('value');
    }
    });

    View full-size slide

  115. var ButtonsView = Backbone.View.extend({
    events: {
    'click .plus': 'plus',
    'click .minus': 'minus'
    },
    plus: function() {
    this.model.increment();
    },
    minus: function() {
    this.model.decrement();
    }
    });

    View full-size slide

  116. var DisplayView = Backbone.View.extend({
    initialize: function() {
    this.model.on('change:value', this.render, this);
    this.render();
    },
    render: function() {
    this.$el.html(this.model.getValue());
    return this;
    }
    });

    View full-size slide

  117. var cal = new Calculator();
    new ButtonsView({model: cal, el: '.buttons'});
    new DisplayView({model: cal, el: '.display'});

    View full-size slide

  118. Backbone.Collection

    View full-size slide

  119. var ProductsCollection = Backbone.Collection.extend({
    model: Product
    });
    var products = new ProductsCollection();
    products.fetch();
    products.on('reset', function(list) {
    console.log('Loaded', list.length, 'records');
    });

    View full-size slide

  120. products.on('add', function(model) {
    console.log('new product added');
    });
    products.on('remove', function(model) {
    console.log('item product removed');
    });

    View full-size slide

  121. И още...
    • Underscore Methods
    • add / remove / at
    • sort / comparator
    • reset
    • create
    • url
    • toJSON

    View full-size slide

  122. Backbone.Router

    View full-size slide

  123. var AppRouter = Backbone.Router.extend({
    routes: {
    'pages': 'index',
    'pages/search/:q': 'search',
    'pages/:id': 'show'
    },
    initialize: function() {
    console.log('initialize');
    },
    index: function() { /* code */ },
    search: function(query) { /* code */ },
    show: function(id) { /* code */ }
    });
    var app = new AppRouter();
    Backbone.history.start();

    View full-size slide

  124. var AppRouter = Backbone.Router.extend({
    routes: {
    'pages': 'index',
    'pages/search/:q': 'search',
    'pages/:id': 'show'
    },
    initialize: function() {
    console.log('initialize');
    },
    index: function() { /* code */ },
    search: function(query) { /* code */ },
    show: function(id) { /* code */ }
    });
    var app = new AppRouter();
    Backbone.history.start();

    View full-size slide

  125. var AppRouter = Backbone.Router.extend({
    routes: {
    'pages': 'index',
    'pages/search/:q': 'search',
    'pages/:id': 'show'
    },
    initialize: function() {
    console.log('initialize');
    },
    index: function() { /* code */ },
    search: function(query) { /* code */ },
    show: function(id) { /* code */ }
    });
    var app = new AppRouter();
    Backbone.history.start();

    View full-size slide

  126. var AppRouter = Backbone.Router.extend({
    routes: {
    'pages': 'index',
    'pages/search/:q': 'search',
    'pages/:id': 'show'
    },
    initialize: function() {
    console.log('initialize');
    },
    index: function() { /* code */ },
    search: function(query) { /* code */ },
    show: function(id) { /* code */ }
    });
    var app = new AppRouter();
    Backbone.history.start();

    View full-size slide

  127. var AppRouter = Backbone.Router.extend({
    routes: {
    'pages': 'index',
    'pages/search/:q': 'search',
    'pages/:id': 'show'
    },
    initialize: function() {
    console.log('initialize');
    },
    index: function() { /* code */ },
    search: function(query) { /* code */ },
    show: function(id) { /* code */ }
    });
    var app = new AppRouter();
    Backbone.history.start();

    View full-size slide

  128. var AppRouter = Backbone.Router.extend({
    routes: {
    'pages': 'index',
    'pages/search/:q': 'search',
    'pages/:id': 'show'
    },
    initialize: function() {
    console.log('initialize');
    },
    index: function() { /* code */ },
    search: function(query) { /* code */ },
    show: function(id) { /* code */ }
    });
    var app = new AppRouter();
    Backbone.history.start();

    View full-size slide

  129. var AppRouter = Backbone.Router.extend({
    routes: {
    'pages': 'index',
    'pages/search/:q': 'search',
    'pages/:id': 'show'
    },
    initialize: function() {
    console.log('initialize');
    },
    index: function() { /* code */ },
    search: function(query) { /* code */ },
    show: function(id) { /* code */ }
    });
    var app = new AppRouter();
    Backbone.history.start();

    View full-size slide

  130. var AppRouter = Backbone.Router.extend({
    routes: {
    'pages': 'index',
    'pages/search/:q': 'search',
    'pages/:id': 'show'
    },
    initialize: function() {
    console.log('initialize');
    },
    index: function() { /* code */ },
    search: function(query) { /* code */ },
    show: function(id) { /* code */ }
    });
    var app = new AppRouter();
    Backbone.history.start();

    View full-size slide

  131. var AppRouter = Backbone.Router.extend({
    routes: {
    'pages': 'index',
    'pages/search/:q': 'search',
    'pages/:id': 'show'
    },
    initialize: function() {
    console.log('initialize');
    },
    index: function() { /* code */ },
    search: function(query) { /* code */ },
    show: function(id) { /* code */ }
    });
    var app = new AppRouter();
    Backbone.history.start();

    View full-size slide

  132. var AppRouter = Backbone.Router.extend({
    routes: {
    'pages': 'index',
    'pages/search/:q': 'search',
    'pages/:id': 'show'
    },
    initialize: function() {
    console.log('initialize');
    },
    index: function() { /* code */ },
    search: function(query) { /* code */ },
    show: function(id) { /* code */ }
    });
    var app = new AppRouter();
    Backbone.history.start();

    View full-size slide

  133. var AppRouter = Backbone.Router.extend({
    routes: {
    'pages': 'index',
    'pages/search/:q': 'search',
    'pages/:id': 'show'
    },
    initialize: function() {
    console.log('initialize');
    },
    index: function() { /* code */ },
    search: function(query) { /* code */ },
    show: function(id) { /* code */ }
    });
    var app = new AppRouter();
    Backbone.history.start();

    View full-size slide

  134. app.navigate('pages', {trigger: true});
    app.navigate('pages/search/title', {trigger: true});
    app.navigate('pages/3', {trigger: true});

    View full-size slide

  135. app.navigate('pages', {trigger: true});
    app.navigate('pages/search/title', {trigger: true});
    app.navigate('pages/3', {trigger: true});

    View full-size slide

  136. app.navigate('pages', {trigger: true});
    app.navigate('pages/search/title', {trigger: true});
    app.navigate('pages/3', {trigger: true});

    View full-size slide

  137. site.com/path#pages
    site.com/path#pages/search/title
    site.com/path#pages/3

    View full-size slide

  138. Backbone.history.start({
    pushState: true,
    root: '/path/'
    });

    View full-size slide

  139. site.com/path#pages
    site.com/path#pages/search/title
    site.com/path#pages/3

    View full-size slide

  140. site.com/path/pages
    site.com/path/pages/search/title
    site.com/path/pages/3

    View full-size slide

  141. Plugins
    https://github.com/RStankov/backbone-handlebars
    https://github.com/RStankov/backbone-bind-to
    https://github.com/n-time/backbone.validations
    https://github.com/PaulUithol/Backbone-relational
    https://github.com/thoughtbot/backbone-support

    View full-size slide

  142. Resources
    http://backbonejs.org/

    View full-size slide

  143. Resources
    http://backbonejs.org/
    https://workshops.thoughtbot.com/products/1-backbone-js-on-rails

    View full-size slide

  144. Resources
    http://backbonejs.org/
    https://workshops.thoughtbot.com/products/1-backbone-js-on-rails
    http://recipeswithbackbone.com/

    View full-size slide

  145. Resources
    http://backbonejs.org/
    https://workshops.thoughtbot.com/products/1-backbone-js-on-rails
    http://recipeswithbackbone.com/
    https://github.com/addyosmani/backbone-fundamentals

    View full-size slide

  146. Problems
    Ghost views

    View full-size slide

  147. Problems
    Ghost views
    Plugin system

    View full-size slide

  148. Problems
    Ghost views
    Plugin system
    Template system

    View full-size slide

  149. Problems
    Ghost views
    Plugin system
    Template system
    Subviews

    View full-size slide

  150. Problems
    Ghost views
    Plugin system
    Template system
    Subviews
    Weak conventions

    View full-size slide

  151. Problems
    Ghost views
    Plugin system
    Template system
    Subviews
    Weak conventions
    Backbone.Application

    View full-size slide

  152. Alternatives

    View full-size slide

  153. Alternatives

    View full-size slide

  154. Alternatives

    View full-size slide

  155. Alternatives

    View full-size slide

  156. https://github.com/RStankov/backbone-presentation
    Code & Slides:

    View full-size slide

  157. Thanks for listening :)
    @rstankov

    View full-size slide