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 Slide

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

    View Slide

  3. View Slide

  4. View Slide

  5. View Slide

  6. View Slide

  7. View Slide

  8. View Slide

  9. View Slide

  10. View Slide

  11. View Slide

  12. View Slide

  13. View Slide

  14. View Slide

  15. View Slide

  16. View Slide

  17. View Slide

  18. View Slide

  19. View Slide

  20. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  34. Model
    View
    Dom
    Browser

    View Slide

  35. Model
    View
    Dom
    Browser

    View Slide

  36. Model
    View
    Dom
    Browser

    View Slide

  37. Model
    View
    Dom
    Browser

    View Slide

  38. Model
    View
    Dom
    Browser

    View Slide

  39. Model
    View
    Dom
    Browser

    View Slide

  40. Model
    View
    Dom
    Browser

    View Slide

  41. Model
    View
    Dom
    Browser

    View Slide

  42. Model
    View
    Dom
    Browser

    View Slide

  43. MV*

    View Slide

  44. Backbone.Events

    View Slide

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

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

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

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

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

  50. Backbone.Model

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

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

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

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

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

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

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

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

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

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

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

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

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

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

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

    View Slide

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

    View Slide

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

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

    View Slide

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

    View Slide

  77. Backbone.View

    View Slide

  78. View Slide

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

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

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

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

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

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

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

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide


  101. News Title
    Today
    Long text

    View Slide

  102. Model
    View
    DOM

    View Slide

  103. Model
    View
    DOM

    View Slide

  104. Model
    View
    DOM

    View Slide

  105. Model
    View
    DOM

    View Slide

  106. Model
    View
    DOM

    View Slide

  107. Model
    View
    DOM

    View Slide

  108. Model
    View
    DOM

    View Slide

  109. Model
    View
    DOM

    View Slide

  110. Model
    View
    DOM

    View Slide

  111. Model
    View
    DOM

    View Slide

  112. Model
    View
    DOM
    View 2

    View Slide

  113. Model
    View
    DOM
    View 2

    View Slide

  114. Model
    View
    DOM
    View 2

    View Slide

  115. Model
    View
    DOM
    View 2

    View Slide

  116. Model
    View
    DOM
    View 2

    View Slide

  117. Model
    View
    DOM
    View 2

    View Slide

  118. Model
    View
    DOM
    View 2

    View Slide

  119. Model
    View
    DOM
    View 2

    View Slide

  120. Model
    View
    DOM
    View 2

    View Slide

  121. Model
    View
    DOM
    View 2

    View Slide

  122. Model
    View
    DOM
    View 2

    View Slide

  123. Model
    View
    DOM
    View 2
    View 3

    View Slide

  124. Model
    View
    DOM
    View 2
    View 3
    View 4

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  134. Demo 1

    View Slide

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

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

    View Slide

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

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

    View Slide

  139. Backbone.Collection

    View Slide

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

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

    View Slide

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

    View Slide

  143. Backbone.Router

    View Slide

  144. View Slide

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

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

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

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

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

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

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

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

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

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

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

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  160. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  164. Demo 2

    View Slide

  165. View Slide

  166. View Slide

  167. View Slide

  168. View Slide

  169. View Slide

  170. View Slide

  171. View Slide

  172. View Slide

  173. View Slide

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

  175. Resources

    View Slide

  176. Resources
    http://backbonejs.org/

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  180. Problems

    View Slide

  181. Problems

    View Slide

  182. Problems
    Ghost views

    View Slide

  183. Problems
    Ghost views
    Plugin system

    View Slide

  184. Problems
    Ghost views
    Plugin system
    Template system

    View Slide

  185. Problems
    Ghost views
    Plugin system
    Template system
    Subviews

    View Slide

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

    View Slide

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

    View Slide

  188. Alternatives

    View Slide

  189. Alternatives

    View Slide

  190. Alternatives

    View Slide

  191. Alternatives

    View Slide

  192. View Slide

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

    View Slide

  194. Questions?

    View Slide

  195. Thanks for listening :)
    @rstankov

    View Slide