Applications: A Series of States

applications: a series of states
a talk by @trek

GET https://simple.com/activity

GET https://simple.com/activity/transactions/3a709ef6-
c300-43b4-bca0-af72d1ecd4ba

GET https://simple.com/activity/transactions/3a709ef6-
c300-43b4-bca0-af72d1ecd4ba/edit

PUT https://simple.com/activity/transactions/3a709ef6-
c300-43b4-bca0-af72d1ecd4ba
HTTP 302 Found
GET https://simple.com/activity

http://imgs.xkcd.com/comics/regular_expressions.png

$('.some-selector').click(function(){
$.ajax({
success: function(response){
var html = $templates.transactionDetails(response);
$('#some-section-of-my-page).html(html);
}
})
})

$('.some-button').click(function(){
$.ajax({
type: ‘post’,
success: function(response){
var html = $templates.transactionDetails(response);
$('#some-section-of-my-page).html(html);
}
})
})

truth-in-dom
JSON, js,
html
JSON, js,
html

{
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'
}
}

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);
}

var sidebar = $('#more-info'), template = Templates.purchase;
sidebar.html(template(purchase));
}

truth-in-dom
JSON, js,
html
truth-in-dom
JSON, js,
html
truth-in-dom

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));
}

View
View
View
View
View
View
View

app.Purchase = Backbone.Model.extend();
app.PurchaseList = Backbone.Collection.extend({
model: app.Purchase
});
app.PurchaseList.url = ‘purchases’
app.Purchases = new app.PurchaseList;

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);
}
});

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))
}
});

app.PurchaseDetailsView = Backbone.View.extend({
el: ‘#details’,
initialize: function(){
this.render();
},
template: '...',
render: function(){
this.$el.html(this.template(this.model);
}
});

render: function(){
this.$el.append(new PurchasesFilterView().render());
_.each(this.collection.models, function (item) {
this.$el.append(new PurchaseRowView({model: item})
.render());
}, this);
}

app.PurchaseRowView = Backbone.View.extend({
...
events: { 'click': 'toggleMoreDetails' },
toggleMoreDetails: function(){
this.model.toggleMoreDetails();
this.$el.toggleClass( 'selected', this.moreDetailsShowing);
}
});

truth-in-data
truth-in-datatruth-in-data

model.on(‘change’)/
collection.on(‘change’)
-> render
model.on(‘change’)
-> render
model.on(‘change’)
-> render

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);
}
});

http://lostechies.com/derickbailey/2011/09/15/zombies-run-
managing-page-transitions-in-backbone-apps/

possible, but you must be cautious

Purchases
Index Viewing Editing

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()
})

{{view App.NavigationView}}
{{view App.SummaryView}}
{{outlet mainArea}}
{{outlet detailsArea}}
application.handlebars

});
root: Ember.Route.extend({})
})

});
root: Ember.Route.extend({
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);
}
})
})

var controller = router.get('applicationController'),
purchases = App.Purchase.find(),
locations = purchases.get('locations');
}
})
})
where? what? data context?

App.PurchaseListView = Ember.View.extend({
templateName: 'purchaseList'
});
App.PurchaseListController = Ember.ArrayController.extend();

Ember.ArrayController.extend();
proxy/presenter/controller/thingie

proxy
content
what’s your length?

proxy
content
how are you sorted?

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}}

App.MapView = Ember.View.extend({
templateName: 'googleMap'
});
App.MapController = Ember.ArrayController.extend();

<li>
{{purchase.date}}
{{purchase.amount}}
</li>
{{/each}}

<li {{action showDetails purchase}}>
{{purchase.date}}
{{purchase.amount}}
</li>
{{/each}}

...
}
})
})

showDetails: Ember.Route.transitionTo(‘viewing’),
...
}
})
})

...
}
}),
viewing: Ember.Route.extend({
})
})

...
}
}),
connectOutlets: function(router, context){
var controller = router.get('applicationController');
controller.
connectOutlet('detailsArea', 'purchaseDetails', context);
}
})
})

...
}
}),
controller.
}
})
})

...
}
}),
controller.
}
})
})
<li {{action showDetails purchase}}>
{{purchase.date}}
{{purchase.amount}}
</li>
{{/each}}

controller.connectOutlet('detailsArea', 'purchaseDetails', context);

controller.connectOutlet('detailsArea', 'purchaseDetails', context);
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}}
});

});
Edit
</a>
</div>
{{#if pending}}
<h3>
</h3>
{{/if}}
{{name}}
{{amount}}
{{label}}

Ember.ObjectController.extend();

proxy
content
Ember.ObjectController.extend();

proxy
content
are you pending?

Edit
</a>
</div>
{{#if pending}}
<h3>
</h3>
{{/if}}
{{name}}
{{amount}}
{{label}}

...
}
}),
editPurchase: Ember.Route.transitionTo(‘editing’),
controller.
}
})
})

...
}
}),
editing: Ember.Route.extend({
controller.
connectOutlet('detailsArea', 'editPurchaseDetails', context);
}
}),
controller.
}
})
})

...
}
}),
controller.
}
}),
controller.
}
})
})

App.EditPurchaseDetailsView = Ember.View.extend({
templateName: 'edit-details'
});
App.EditPurchaseDetailsController = Ember.ObjectController.extend();

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"}}

proxy
content
what’s your name?

...
}
}),
saveChanges: Ember.Route.transitionTo(‘index’),
...
}
}),
...
})
})

https://gist.github.com/3981133

• 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

• 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

• 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

Mobile
Cocoa Touch
Android SDK
Desktop
Cocoa
.NET
Web ?

Mobile
Cocoa Touch
Android SDK
Desktop
Cocoa
.NET
Web

User Interface HTML+CSS
Data Persistence
Application
Architecture

Applications: A Series of States

Recommended

Recommended

More Related Content

What's hot

What's hot (19)

Viewers also liked

Viewers also liked (12)

Similar to Applications: A Series of States

Similar to Applications: A Series of States (20)

Recently uploaded

Recently uploaded (20)

Applications: A Series of States