A Dip in the SPA get wet with Single Page Apps
26
Ward Bell www.ideablade. com A Dip in the SPA get wet with Single Page Apps
description
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?. - PowerPoint PPT Presentation
Transcript of A Dip in the SPA get wet with Single Page Apps
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
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
knockout (ko) on jsfiddle
http://www.knockmeout.net/2011/08/all-of-knockoutjscom-live-samples-in.htmlExplore Ryan Niemeyer’s fiddles:
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
