A dip in the spa get wet with single page apps
This presentation is the property of its rightful owner.
Sponsored Links
1 / 26

A Dip in the SPA get wet with Single Page Apps PowerPoint PPT Presentation


  • 44 Views
  • Uploaded on
  • Presentation posted in: General

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

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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


A dip in the spa get wet with single page apps

A Dip in the SPAget wet with Single Page Apps

Ward Bellwww.ideablade.com


A dip in the spa get wet with single page apps

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


Single page application

Single Page Application

Rich and responsive like a desktop app

but built with HTML5 and JavaScript


Why not just build a desktop app

Why not just build a desktop app?


A dip in the spa get wet with single page apps

Mobile platforms

Anti-plugin bias

“Shift in direction”


Not widgets

Not Widgets

But they inspire with their responsiveness

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

http://worrydream.com/bartwidget/


Lob apps forms over data

LOB Apps: forms over data


Single page application1

Single Page Application

A web page hosts layout & content

composed dynamically on the client

with JavaScript


Demo we might go here

Demo: We might go here

Noyes UpshotDataControllerDemo


Demo we ll build together

Demo: We’ll build TOGETHER

SPA Demo 3_ExtTmpls


Spa architecture

SPA Architecture

Visible UIHTML/CSS

Web UIHTML/CSS/JS

ApplicationJavaScript

NavigationJavaScript

Data ServicesJSON/XML

Data AccessJavaScript

Offline

Local Storage

Server

Client


Client javascript libraries

Client JavaScript Libraries

history.js

jQuery & friends

nav.js

DOM / AJAX

knockout.js

MVVM

Data & Model Management

upshot.js

Navigation


Mvvm with knockout js

MVVM with knockout.js

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


Knockout ko on jsfiddle

knockout (ko) on jsfiddle

Explore Ryan Niemeyer’s fiddles:

http://www.knockmeout.net/2011/08/all-of-knockoutjscom-live-samples-in.html


Upshot js

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 js1

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 APP not Web Site

Web development experience does not prepare you to build SPAs


Closer to silverlight apps

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

Not Ready For Prime Time

Explore … have fun … beware!


A dip in the spa get wet with single page apps

Upshot far from ready

Unstable libraries

No clear library winners

New JavaScript coding practices

Weak tooling (intellisense, debugging)

Browser incompatabilities


Upshot premature

upshot premature

Ship date?

Documentation

Samples (most don’t work)

“To Do”severywhere

Multi-part keys

Model navigation

Projections/Includes

Metadata anomalies

Heavy payload


Resources

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


A dip in the spa get wet with single page apps

www.ideablade.com

@wardbell

[email protected]


  • Login