Ward Bellwww.ideablade.com

A Dip in the SPAget wet with Single Page Apps

http://channel9.msdn.com/Events/TechDays/Techdays-2012-the-Netherlands/2159

Single Page Application

Rich and responsive like a desktop appbut built with HTML5 and JavaScript

Why not just build a desktop app?

Mobile platformsAnti-plugin bias“Shift in direction”

Not Widgets

But they inspire with their responsiveness

http://worrydream.com/bartwidget/

Brett Victor: http://vimeo.com/36579366

LOB Apps: forms over data

http://www.hipmunk.com/

Single Page Application

A web page hosts layout & contentcomposed dynamically on the client

with JavaScript

DEMO: WE MIGHT GO HERE

Noyes UpshotDataControllerDemo

DEMO: WE’LL BUILD TOGETHER

SPA Demo 3_ExtTmpls

SPA ArchitectureVisible UIHTML/CSS

ApplicationJavaScript

Data AccessJavaScript

Offline

Web UIHTML/CSS/JS

Data ServicesJSON/XML

Server Client

NavigationJavaScript

Local Storage

nav.jshistory.js

knockout.js

upshot.js

jQuery & friends

Client JavaScript Libraries

Navigation

MVVM

Data & Model Management

DOM / AJAX

http://www.knockoutjs.com/

MVVM with knockout.js

http://jsfiddle.net/wardbell/uzrCN/1/

knockout (ko) on jsfiddle

http://www.knockmeout.net/2011/08/all-of-knockoutjscom-live-samples-in.htmlExplore Ryan Niemeyer’s fiddles:

http://www.pluralsight-training.net/microsoft/players/PsodPlayer?author=john-papa&name=knockout-mvvm-m6&mode=live&clip=6&course=knockout-mvvm

upshot.js• Microsoft client JavaScript library • By ASP.NET team• Pre-beta! • Learn: http://

www.asp.net/single-page-application • Open source:

http://aspnetwebstack.codeplex.com/

upshot.js• Client-side data management– call services (query, save)– cache data as model objects– change tracking & validation

• Plays nice with KO• Open data source (potentially)– ASP.NET Web API Data Controller– WCF RIA Domain Services

Web APP not Web Site

Web development experience does not prepare you to build SPAs

Closer to Silverlight apps

• Async services• Client-side application & business

logic• Long-lived client-side state• 2-way data binding (MVVM)• Coping with bad connections

Similar problems and solution patterns

Not Ready For Prime Time

Explore … have fun … beware!

Upshot far from ready

Unstable libraries

No clear library winners

New JavaScript coding practices

Weak tooling (intellisense, debugging)

Browser incompatabilities

Ship date?

Documentation

Samples (most don’t work)

“To Do”s everywhere

Multi-part keys

Model navigation

Projections/Includes

Metadata anomalies

Heavy payload

upshot premature

Resources• Steve’s SPA video

http://channel9.msdn.com/Events/TechDays/Techdays-2012-the-Netherlands/2159

• Steve Sanderson blog http://blog.stevensanderson.com

• ASP SPA http://www.asp.net/single-page-application

• Bart Jolling Tutorial http://bartjolling.blogspot.com/2012/02/building-single-page-apps-with-aspnet.html

• John Papa Knockout video course on PluralSighthttp://www.pluralsight-training.net/microsoft/Courses/TableOfContents?courseName=knockout-mvvm

• Brian Noyes DevConn Demoshttp://briannoyes.net/2012/03/28/DevConnectionsSlidesAndDemosndashUpshotAndPrism.aspx

www.ideablade.com

@wardbell

wardb@ideablade.com