backbone.js-init-lab

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

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