Slide 1
Slide 1 text
No content
Slide 2
Slide 2 text
No content
Slide 3
Slide 3 text
Not this Kind of Spa
Slide 4
Slide 4 text
Web app that fits on a single web page
providing a fluid UX by loading all
necessary code with a single page load
Slide 5
Slide 5 text
Reach
Rich User Experience
Reduced Round Tripping
3 R’s
Slide 6
Slide 6 text
progressively downloads features as required
mostly loaded in initial page load
persisting state
navigation, history, deep linking
Slide 7
Slide 7 text
No content
Slide 8
Slide 8 text
No content
Slide 9
Slide 9 text
No content
Slide 10
Slide 10 text
ASP.NET Ember Angular Breeze Durandal Hot Towel
Uses Ember Yes
Uses Knockout Yes Yes Yes Yes
Rich Data via
BreezeJS
Yes Yes Yes
Uses Durandal Yes Yes
Navigation and
History
Yes Yes Yes Yes
Samples
Slide 11
Slide 11 text
ASP.NET Ember Angular Breeze Durandal Hot Towel
Uses Ember Yes
Uses Knockout Yes Yes Yes Yes
Rich Data via
BreezeJS
Yes Yes Yes
Uses Durandal Yes Yes
Navigation and
History
Yes Yes Yes Yes
Baseline
Samples
Slide 12
Slide 12 text
HTML / CSS
Hot Towel
Durandal
Knockout
Breeze
CLIENT SERVER
Web API
Entity Framework
SQL Server
Slide 13
Slide 13 text
Because you don’t want to go to the SPA without one!
Slide 14
Slide 14 text
ASP
.NET SPA Templates Recap
www.johnpapa.net/spa
http://jpapa.me/spatemplates
http://jpapa.me/hottowel
Hot Towel is the ideal starting point
Templates are great references
Slide 15
Slide 15 text
No content
Slide 16
Slide 16 text
Declarative Bindings in HTML
Slide 17
Slide 17 text
No content
Slide 18
Slide 18 text
var title = ko.observable();
Title
Slide 19
Slide 19 text
Tracks which
objects are in
the array
Slide 20
Slide 20 text
'services/dataservice' function
var
return
Slide 21
Slide 21 text
Slide 22
Slide 22 text
When You
Need a Value
That Doesn’t
Exist in the
Web Service
Slide 23
Slide 23 text
var hasChanges = ko.computed(function() {
return datacontext.hasChanges();
});
var canSave = ko.computed(function() {
return hasChanges() && !isSaving();
});
Slide 24
Slide 24 text
Bindings
Slide 25
Slide 25 text
Built into
Knockout
Binding for
Element
Attributes
Multiple
Binding
Expressions
Slide 26
Slide 26 text
No content
Slide 27
Slide 27 text
Building and Composing Modules
Slide 28
Slide 28 text
Routing
Slide 29
Slide 29 text
Transition Between Multiple Views
Hook into Navigation
Avoid Page Refreshes
Hook Into Browser History
Slide 30
Slide 30 text
View and ViewModel composition
Dynamically load modules as needed
App Lifecycle
Async programming with promises
Convention based ( customizable )
Page Navigation
Slide 31
Slide 31 text
var 'durandal/plugins/router'
var
'sessions'
'viewmodels/sessions'
'Sessions'
true
'speakers'
'viewmodels/speakers'
'Speakers'
true
Usually in the
shell.js
Ideal for encapsulating
config in a single object
Slide 32
Slide 32 text
var 'durandal/plugins/router'
return
function
return 'sessions'
Map the routes
Activate the router
(start listening)
Slide 33
Slide 33 text
Compose View &
ViewModel
Slide 34
Slide 34 text
Router
Modal Dialog
Setting Activate = true
Slide 35
Slide 35 text
Life Cycle in Durandal 1.2
canActivate *
canDeactivate *
(old module)
activate *
deactivate *
(old module)
beforeBind
afterBind
viewAttached
* When activator
is present
Slide 36
Slide 36 text
Life Cycle in Durandal 2.0
canActivate *
canDeactivate *
(old module)
activate
deactivate *
(old module)
beforeBind
afterBind
viewAttached
* When activator
is present
documentAttached
Activate always
is called in v2
Slide 37
Slide 37 text
No content
Slide 38
Slide 38 text
Rich Data
Slide 39
Slide 39 text
Rich Data - Why Do I Care?
Because we do so much more than
just get and display data
Slide 40
Slide 40 text
Client Caching and Sharing
Queries
Extend the Model
Object Graphs
Works well with Knockout
Async / Promises
Slide 41
Slide 41 text
var query = EntityQuery.from('Speakers')
.orderBy('lastName, firstName');
return manager.executeQuery(query)
.then(querySucceeded)
.fail(queryFailed);
function querySucceeded(data) {
speakers(data.results);
}
Create a query
1
Execute a query
2
Return data as observables
3
Slide 42
Slide 42 text
Track
TimeSlot
Room
Speaker
Session
Slide 43
Slide 43 text
Speaker
Slide 44
Slide 44 text
Rich Data is a Breeze
Slide 45
Slide 45 text
No content
Slide 46
Slide 46 text
See more at
http://www.fotolia.com/johnpapa