applications: a series of states

Video: https://vimeo.com/65504071

An exploration of application structure patterns, from purely server oriented request/response flow to fully featured client applications in the browser

Transcript

1. applications: a series of states a talk by @trek
7. <a href=”serialize/user/intent.fmt”>
26. GET https://simple.com/activity
29. GET https://simple.com/activity/transactions/3a709ef6- c300-43b4-bca0-af72d1ecd4ba
33. GET https://simple.com/activity/transactions/3a709ef6- c300-43b4-bca0-af72d1ecd4ba/edit
37. PUT https://simple.com/activity/transactions/3a709ef6- c300-43b4-bca0-af72d1ecd4ba HTTP 302 Found GET https://simple.com/activity
40. ⏲
43. http://imgs.xkcd.com/comics/regular_expressions.png
46. GET https://simple.com/activity
49. $('.some-selector').click(function(){ $.ajax({ success: function(response){ var html = $templates.transactionDetails(response); $('#some-section-of-my-page).html(html); } }) })
53. $('.some-selector').click(function(){ $.ajax({ success: function(response){ var html = $templates.transactionDetails(response); $('#some-section-of-my-page).html(html); } }) })
57. $('.some-button').click(function(){ $.ajax({ type: ‘post’, success: function(response){ var html = $templates.transactionDetails(response); $('#some-section-of-my-page).html(html); } }) })
60. decent, not great.
61. {}
62. truth-in-dom JSON, js, html JSON, js, html
63. { vendor: 'Wholefds Kbs', amount: '20.70', isCredit: false, isPending: true, type: 'Groceries', location: { lat: '41.910006', long: '87.657166', address: '1070 N North Branch St,\n Chicago IL 60642' } }
64. success: function(purchase){ var sidebar = $('#more-info'); if(purchase.isPending) { $('.is-pending', sidebar).show(); } $('.name', sidebar).html(purchase.vendor); $('.amount', sidebar).html('-' + purchase.amount); $('.category', sidebar).html(purchase.type); $('.map', sidebar).gMapPlugin(purchase.location); $('.address', sidebar).html(purchase.location.address); }
65. success: function(purchase){ var sidebar = $('#more-info'), template = Templates.purchase; sidebar.html(template(purchase)); $('.map', sidebar).gMapPlugin(purchase.location); }
66. truth-in-dom JSON, js, html JSON, js, html
67. truth-in-dom JSON, js, html truth-in-dom JSON, js, html truth-in-dom
71. success: function(purchase){ var sidebar = $('#more-info'), listItem = $(‘#list .purchase-’ + purchase.id), purchaseTemplate = Templates.purchase.show, purchaseTableRowTemplate = Templates.purchase.row; sidebar.html(purchaseTemplate(purchase)); listItem.html(purchaseTableRowTemplate(purchase)); $('.map', sidebar).gMapPlugin(purchase.location); }
75. <div id=”purchase-list”></div>
76. View
77. Collection of Models
78. View View View View View View View
79. Properties of the collection
80. <div id=”details”> </div>
81. View
82. Aggregation of Collection
83. Different View
84. Single Model
85. GET https://simple.com/activity
87. app.Purchase = Backbone.Model.extend(); app.PurchaseList = Backbone.Collection.extend({ model: app.Purchase }); app.PurchaseList.url = ‘purchases’ app.Purchases = new app.PurchaseList;
88. app.PurchaseListView = Backbone.View.extend({ el: ‘#purchase-list’, initialize: function(){ this.collection = app.Purchases; this.collection.on('change', this.render, this) this.render(); }, render: function(){ this.$el.append(new PurchasesFilterView().render()); _.each(this.collection.models, function (item) { this.$el.append(new PurchaseRowView({model: item}) .render()); }, this); } });
89. app.PurchaseRowView = Backbone.View.extend({ initialize: function() { this.model.on( 'change', this.render, this ); }, tagName: 'li', template: ..., events: { 'click': 'toggleMoreDetails', 'click .edit': 'toggleEdit' }, toggleMoreDetails: function(){ this.model.toggleMoreDetails(); this.$el.toggleClass( 'selected', this.moreDetailsShowing); }, render: function(){ this.$el.html(this.template(this.model)) } });
90. app.PurchaseDetailsView = Backbone.View.extend({ el: ‘#details’, initialize: function(){ this.render(); }, template: '...', render: function(){ this.$el.html(this.template(this.model); } });
91. app.Purchases.fetch();
92. <div id=”purchase-list”></div>
93. render: function(){ this.$el.append(new PurchasesFilterView().render()); _.each(this.collection.models, function (item) { this.$el.append(new PurchaseRowView({model: item}) .render()); }, this); }
97. app.PurchaseRowView = Backbone.View.extend({ ... events: { 'click': 'toggleMoreDetails' }, toggleMoreDetails: function(){ this.model.toggleMoreDetails(); this.$el.toggleClass( 'selected', this.moreDetailsShowing); } });
105. truth-in-data truth-in-data truth-in-data
106. model.on(‘change’)/ collection.on(‘change’) -> render model.on(‘change’) -> render model.on(‘change’) -> render
107. {}
110. <div id=”purchase-list”> <div id=”details”> </div> <div id=”dashboard”> </div> <div id=”sidebar”> </div> <div id=”map”> </div> </div>
111. app.DashboardView = Backbone.View.extend({ render: function(){ this.$el.append(new app.PurchaesView().render().el); this.$el.append(new app.PurchaesMapView().render().el); this.$el.append(new app.PurcaseDetailView().render().el); } });
112. http://lostechies.com/derickbailey/2011/09/15/zombies-run- managing-page-transitions-in-backbone-apps/
113. <div id=”purchase-list”> <div id=”details”> </div> <div id=”dashboard”> </div> <div id=”sidebar”> </div> <div id=”map”> </div> </div>
118. possible, but you must be cautious
122. {{view App.NavigationView}} {{view App.SummaryView}}
123. {{ outlet }}
132. Purchases Index Viewing Editing
133. Purchases Index Viewing Editing
134. Purchases Index Viewing Editing
135. Purchases Index Viewing Editing
136. Purchases Index Viewing Editing
137. Purchases Index Viewing Editing
138. Purchases Index Viewing Editing
139. Purchases Index Viewing Editing
140. Purchases Index Viewing Editing
141. Purchases Index Viewing Editing
142. Purchases Index Viewing Editing
143. App = Ember.Application.create(); App.ApplicationView = Ember.View.extend({ templateName: 'application' }); App.ApplicationController = Ember.Controller.extend(); App.Router = Ember.Route.extend({ root: Ember.Route.extend({}) // this happens for you: ‘shared instance’ // applicationController: App.ApplicationController.create() })
144. {{view App.NavigationView}} {{view App.SummaryView}} {{outlet mainArea}} {{outlet detailsArea}} application.handlebars
145. {{view App.NavigationView}} {{view App.SummaryView}} {{outlet mainArea}} {{outlet detailsArea}} application.handlebars
146. {{view App.NavigationView}} {{view App.SummaryView}} {{outlet mainArea}} {{outlet detailsArea}} application.handlebars
147. {{view App.NavigationView}} {{view App.SummaryView}} {{outlet mainArea}} {{outlet detailsArea}} application.handlebars
148. {{view App.NavigationView}} {{view App.SummaryView}} {{outlet mainArea}} {{outlet detailsArea}} application.handlebars
149. Purchases Index Viewing Editing
150. App = Ember.Application.create(); App.ApplicationView = Ember.View.extend({ templateName: 'application' }); App.ApplicationController = Ember.Controller.extend(); App.Router = Ember.Route.extend({ root: Ember.Route.extend({}) })
151. App = Ember.Application.create(); App.ApplicationView = Ember.View.extend({ templateName: 'application' }); App.ApplicationController = Ember.Controller.extend(); App.Router = Ember.Route.extend({ root: Ember.Route.extend({ purchases: Ember.Route.extend({ index: Ember.Route.extend({ }) }) }) });
152. {{view App.NavigationView}} {{view App.SummaryView}} {{outlet mainArea}} {{outlet detailsArea}} application.handlebars
153. App = Ember.Application.create(); App.ApplicationView = Ember.View.extend({ templateName: 'application' }); App.ApplicationController = Ember.Controller.extend(); App.Router = Ember.Route.extend({ root: Ember.Route.extend({ purchases: Ember.Route.extend({ index: Ember.Route.extend({ }) }) }) });
154. purchases: Ember.Route.extend({ index: Ember.Route.extend({ }) })
155. purchases: Ember.Route.extend({ index: Ember.Route.extend({ connectOutlets: function(router){ var controller = router.get('applicationController'), purchases = App.Purchase.find(), locations = purchases.get('locations'); controller.connectOutlet('mainArea', 'purchaseList', purchases); controller.connectOutlet('detailsArea', 'map', locations); } }) })
156. purchases: Ember.Route.extend({ index: Ember.Route.extend({ connectOutlets: function(router){ var controller = router.get('applicationController'), purchases = App.Purchase.find(), locations = purchases.get('locations'); controller.connectOutlet('mainArea', 'purchaseList', purchases); controller.connectOutlet('detailsArea', 'map', locations); } }) }) where? what? data context?
157. controller.connectOutlet('mainArea', 'purchaseList', purchases);
158. controller.connectOutlet('mainArea', 'purchaseList', purchases); App.PurchaseListView = Ember.View.extend({ templateName: 'purchaseList' }); App.PurchaseListController = Ember.ArrayController.extend();
159. Ember.ArrayController.extend(); proxy/presenter/controller/thingie
160. proxy content
161. proxy content what’s your length?
162. proxy content how are you sorted?
163. controller.connectOutlet('mainArea', 'purchaseList', purchases); App.PurchaseListView = Ember.View.extend({ templateName: 'purchaseList' }); App.PurchaseListController = Ember.ArrayController.extend();
164. controller.connectOutlet('mainArea', 'purchaseList', purchases); App.PurchaseListView = Ember.View.extend({ templateName: 'purchaseList' }); App.PurchaseListController = Ember.ArrayController.extend(); {{#each purchase in controller}} <li> {{purchase.date}} {{purchase.location}} {{purchase.amount}} </li> {{/each}}
165. controller.connectOutlet('mainArea', 'purchaseList', purchases); App.PurchaseListView = Ember.View.extend({ templateName: 'purchaseList' }); App.PurchaseListController = Ember.ArrayController.extend(); {{#each purchase in controller}} <li> {{purchase.date}} {{purchase.location}} {{purchase.amount}} </li> {{/each}}
166. purchases: Ember.Route.extend({ index: Ember.Route.extend({ connectOutlets: function(router){ var controller = router.get('applicationController'), purchases = App.Purchase.find(), locations = purchases.get('locations'); controller.connectOutlet('mainArea', 'purchaseList', purchases); controller.connectOutlet('detailsArea', 'map', locations); } }) })
167. purchases: Ember.Route.extend({ index: Ember.Route.extend({ connectOutlets: function(router){ var controller = router.get('applicationController'), purchases = App.Purchase.find(), locations = purchases.get('locations'); controller.connectOutlet('mainArea', 'purchaseList', purchases); controller.connectOutlet('detailsArea', 'map', locations); } }) }) where? what? data context?
168. controller.connectOutlet('detailsArea', 'map', locations);
169. App.MapView = Ember.View.extend({ templateName: 'googleMap' }); App.MapController = Ember.ArrayController.extend(); controller.connectOutlet('detailsArea', 'map', locations);
170. controller.connectOutlet('detailsArea', 'map', locations); App.MapView = Ember.View.extend({ templateName: 'googleMap' }); App.MapController = Ember.ArrayController.extend();
171. controller.connectOutlet('detailsArea', 'map', locations); App.MapView = Ember.View.extend({ templateName: 'googleMap' }); App.MapController = Ember.ArrayController.extend();
172. controller.connectOutlet('detailsArea', 'map', locations); App.MapView = Ember.View.extend({ templateName: 'googleMap' }); App.MapController = Ember.ArrayController.extend();
173. Purchases Index Viewing Editing
174. Purchases Index Viewing Editing
175. {{#each purchase in controller}} <li> {{purchase.date}} {{purchase.location}} {{purchase.amount}} </li> {{/each}}
176. {{#each purchase in controller}} <li {{action showDetails purchase}}> {{purchase.date}} {{purchase.location}} {{purchase.amount}} </li> {{/each}}
177. purchases: Ember.Route.extend({ index: Ember.Route.extend({ connectOutlets: function(router){ ... } }) })
178. purchases: Ember.Route.extend({ index: Ember.Route.extend({ showDetails: Ember.Route.transitionTo(‘viewing’), connectOutlets: function(router){ ... } }) })
179. purchases: Ember.Route.extend({ index: Ember.Route.extend({ showDetails: Ember.Route.transitionTo(‘viewing’), connectOutlets: function(router){ ... } }), viewing: Ember.Route.extend({ }) })
180. Purchases Index Viewing Editing
181. Purchases Index Viewing Editing
182. purchases: Ember.Route.extend({ index: Ember.Route.extend({ showDetails: Ember.Route.transitionTo(‘viewing’), connectOutlets: function(router){ ... } }), viewing: Ember.Route.extend({ connectOutlets: function(router, context){ var controller = router.get('applicationController'); controller. connectOutlet('detailsArea', 'purchaseDetails', context); } }) }) where? what? data context?
183. purchases: Ember.Route.extend({ index: Ember.Route.extend({ showDetails: Ember.Route.transitionTo(‘viewing’), connectOutlets: function(router){ ... } }), viewing: Ember.Route.extend({ connectOutlets: function(router, context){ var controller = router.get('applicationController'); controller. connectOutlet('detailsArea', 'purchaseDetails', context); } }) })
184. purchases: Ember.Route.extend({ index: Ember.Route.extend({ showDetails: Ember.Route.transitionTo(‘viewing’), connectOutlets: function(router){ ... } }), viewing: Ember.Route.extend({ connectOutlets: function(router, context){ var controller = router.get('applicationController'); controller. connectOutlet('detailsArea', 'purchaseDetails', context); } }) }) {{#each purchase in controller}} <li {{action showDetails purchase}}> {{purchase.date}} {{purchase.location}} {{purchase.amount}} </li> {{/each}}
185. controller.connectOutlet('detailsArea', 'purchaseDetails', context);
186. controller.connectOutlet('detailsArea', 'purchaseDetails', context); App.PurchaseDetailsView = Ember.View.extend({ templateName: 'details' }); App.PurchaseDetailsController = Ember.ObjectController.extend();
187. controller.connectOutlet('detailsArea', 'purchaseDetails', context); App.PurchaseDetailsView = Ember.View.extend({ templateName: 'details' }); App.PurchaseDetailsController = Ember.ObjectController.extend();
188. <div class='actions'> <a {{action editPurchase content}}> Edit </a> <a href='...'>Support</a> </div> {{#if pending}} <h3> This transaction is pending... </h3> {{/if}} {{name}} {{amount}} {{label}} App.PurchaseDetailsView = Ember.View.extend({ templateName: 'details' }); App.PurchaseDetailsController = Ember.ObjectController.extend();
189. App.PurchaseDetailsView = Ember.View.extend({ templateName: 'details' }); App.PurchaseDetailsController = Ember.ObjectController.extend(); <div class='actions'> <a {{action editPurchase content}}> Edit </a> <a href='...'>Support</a> </div> {{#if pending}} <h3> This transaction is pending... </h3> {{/if}} {{name}} {{amount}} {{label}}
190. Ember.ObjectController.extend();
191. proxy content Ember.ObjectController.extend();
192. proxy content are you pending?
193. App.PurchaseDetailsView = Ember.View.extend({ templateName: 'details' }); App.PurchaseDetailsController = Ember.ObjectController.extend(); <div class='actions'> <a {{action editPurchase content}}> Edit </a> <a href='...'>Support</a> </div> {{#if pending}} <h3> This transaction is pending... </h3> {{/if}} {{name}} {{amount}} {{label}}
195. Purchases Index Viewing Editing
196. Purchases Index Viewing Editing
197. <div class='actions'> <a {{action editPurchase content}}> Edit </a> <a href='...'>Support</a> </div> {{#if pending}} <h3> This transaction is pending... </h3> {{/if}} {{name}} {{amount}} {{label}}
198. purchases: Ember.Route.extend({ index: Ember.Route.extend({ showDetails: Ember.Route.transitionTo(‘viewing’), connectOutlets: function(router){ ... } }), viewing: Ember.Route.extend({ connectOutlets: function(router, context){ var controller = router.get('applicationController'); controller. connectOutlet('detailsArea', 'purchaseDetails', context); } }) })
199. purchases: Ember.Route.extend({ index: Ember.Route.extend({ showDetails: Ember.Route.transitionTo(‘viewing’), connectOutlets: function(router){ ... } }), viewing: Ember.Route.extend({ editPurchase: Ember.Route.transitionTo(‘editing’), connectOutlets: function(router, context){ var controller = router.get('applicationController'); controller. connectOutlet('detailsArea', 'purchaseDetails', context); } }) })
200. purchases: Ember.Route.extend({ index: Ember.Route.extend({ showDetails: Ember.Route.transitionTo(‘viewing’), connectOutlets: function(router){ ... } }), editing: Ember.Route.extend({ connectOutlets: function(router, context){ var controller = router.get('applicationController'); controller. connectOutlet('detailsArea', 'editPurchaseDetails', context); } }), viewing: Ember.Route.extend({ editPurchase: Ember.Route.transitionTo(‘editing’), connectOutlets: function(router, context){ var controller = router.get('applicationController'); controller. connectOutlet('detailsArea', 'purchaseDetails', context); } }) })
201. purchases: Ember.Route.extend({ index: Ember.Route.extend({ showDetails: Ember.Route.transitionTo(‘viewing’), connectOutlets: function(router){ ... } }), editing: Ember.Route.extend({ connectOutlets: function(router, context){ var controller = router.get('applicationController'); controller. connectOutlet('detailsArea', 'editPurchaseDetails', context); } }), viewing: Ember.Route.extend({ editPurchase: Ember.Route.transitionTo(‘editing’), connectOutlets: function(router, context){ var controller = router.get('applicationController'); controller. connectOutlet('detailsArea', 'purchaseDetails', context); } }) }) where? what? data context?
202. connectOutlet('detailsArea', 'editPurchaseDetails', context);
203. connectOutlet('detailsArea', 'editPurchaseDetails', context); App.EditPurchaseDetailsView = Ember.View.extend({ templateName: 'edit-details' }); App.EditPurchaseDetailsController = Ember.ObjectController.extend();
204. connectOutlet('detailsArea', 'editPurchaseDetails', context); App.EditPurchaseDetailsView = Ember.View.extend({ templateName: 'edit-details' }); App.EditPurchaseDetailsController = Ember.ObjectController.extend(); <a {{action save context}}>Save</a> <a {{action cancel}}>Cancel</a> {{view Ember.TextField valueBinding="name"}}
205. connectOutlet('detailsArea', 'editPurchaseDetails', context); App.EditPurchaseDetailsView = Ember.View.extend({ templateName: 'edit-details' }); App.EditPurchaseDetailsController = Ember.ObjectController.extend(); <a {{action save context}}>Save</a> <a {{action cancel}}>Cancel</a> {{view Ember.TextField valueBinding="name"}}
206. Ember.ObjectController.extend();
207. proxy content Ember.ObjectController.extend();
208. proxy content what’s your name?
211. Purchases Index Viewing Editing
212. Purchases Index Viewing Editing
213. purchases: Ember.Route.extend({ index: Ember.Route.extend({ showDetails: Ember.Route.transitionTo(‘viewing’), connectOutlets: function(router){ ... } }), editing: Ember.Route.extend({ saveChanges: Ember.Route.transitionTo(‘index’), connectOutlets: function(router, context){ ... } }), viewing: Ember.Route.extend({ editPurchase: Ember.Route.transitionTo(‘editing’), connectOutlets: function(router, context){ ... }) })
214. Purchases Index Viewing Editing
215. Demeter’d
216. https://gist.github.com/3981133
218. > 7 views
223. which pattern, when?
224. • app is just a series of documents • or you’re just coding single page • not a client app • manipulation mostly presentational • few data communications • user interaction brief, simple, infrequent
225. • app is series of documents • with “islands of richness” • occassional data communications • multiple parts of a page need to reflect data • shallow view hierarchy (1-2 levels) • small number of views (~7) • user interaction brief and/or infrequent
226. • frequent data communications • many parts of a page need to reflect data • deep view hierarchy (2-3+) • large number of views • user will remain for large amounts of time • and/or frequently return • server is just an api • you’d *almost* write a desktop/iOS app
227. Mobile Cocoa Touch Android SDK Desktop Cocoa .NET Web ?
228. Mobile Cocoa Touch Android SDK Desktop Cocoa .NET Web
229. User Interface HTML+CSS Data Persistence Application Architecture
230. fin