1 / 26

A Dip in the SPA get wet with Single Page Apps

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?.

lela
Download Presentation

A Dip in the SPA get wet with Single Page Apps

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. A Dip in the SPAget wet with Single Page Apps Ward Bellwww.ideablade.com

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

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

  4. Why not just build a desktop app?

  5. Mobile platforms Anti-plugin bias “Shift in direction”

  6. Not Widgets But they inspire with their responsiveness Brett Victor: http://vimeo.com/36579366 http://worrydream.com/bartwidget/

  7. LOB Apps: forms over data

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

  9. Demo: We might go here Noyes UpshotDataControllerDemo

  10. Demo: We’ll build TOGETHER SPA Demo 3_ExtTmpls

  11. SPA Architecture Visible UIHTML/CSS Web UIHTML/CSS/JS ApplicationJavaScript NavigationJavaScript Data ServicesJSON/XML Data AccessJavaScript Offline Local Storage Server Client

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

  13. MVVM with knockout.js http://jsfiddle.net/wardbell/uzrCN/1/

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

  15. 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/

  16. 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

  17. Web APP not Web Site Web development experience does not prepare you to build SPAs

  18. 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

  19. Not Ready For Prime Time Explore … have fun … beware!

  20. Upshot far from ready Unstable libraries No clear library winners New JavaScript coding practices Weak tooling (intellisense, debugging) Browser incompatabilities

  21. upshot premature Ship date? Documentation Samples (most don’t work) “To Do”severywhere Multi-part keys Model navigation Projections/Includes Metadata anomalies Heavy payload

  22. 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

  23. www.ideablade.com @wardbell wardb@ideablade.com

More Related