A Dip in the SPA

get wet with Single Page Apps

Ward Bell www.ideablade.com

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

Single Page Application Rich and responsive like a desktop app but built with HTML5 and JavaScript

Why not just build a desktop app?

Mobile platforms Anti-plugin bias “Shift in direction”

Not Widgets

But they inspire with their responsiveness

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

LOB Apps: forms over data

Single Page Application A web page hosts layout & content composed dynamically on the client with JavaScript

DEMO: WE MIGHT GO HERE

Noyes UpshotDataControllerDemo

DEMO: WE’LL BUILD TOGETHER

SPA Demo 3_ExtTmpls

Web UI HTML/CSS/JS Data Services JSON/XML Server SPA Architecture Visible UI HTML/CSS Application JavaScript Data Access JavaScript Local Storage Client Offline Navigation JavaScript

Client JavaScript Libraries DOM / AJAX MVVM Data & Model Management Navigation jQuery & friends knockout.js

upshot.js

history.js

nav.js

MVVM with knockout.js

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

knockout (ko) on jsfiddle Explore Ryan Niemeyer’s fiddles: http://www.knockmeout.net/2011/08/all-of-knockoutjscom-live-samples-in.html

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 Similar problems and solution patterns • Async services • Client-side application & business logic • Long-lived client-side state • 2-way data binding (MVVM) • Coping with bad connections

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

upshot premature Ship date?

Documentation Samples (most don’t work) “To Do”s everywhere Multi-part keys Model navigation Projections/Includes Metadata anomalies Heavy payload

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 PluralSight http://www.pluralsight-training.net/microsoft/Courses/TableOfContents?courseName=knockout mvvm • Brian Noyes DevConn Demos http://briannoyes.net/2012/03/28/DevConnectionsSlidesAndDemosndashUpshotAndPrism.aspx

www.ideablade.com

@wardbell [email protected]