Transcript A Dip in the SPA get wet with Single Page Apps Ward Bell www.ideablade.com.
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]