A dip in the spa get wet with single page apps
Download
1 / 26

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


  • 64 Views
  • Uploaded on

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

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about ' A Dip in the SPA get wet with Single Page Apps' - lela


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


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


Single page application
Single Page Applicationhttp://channel9.msdn.com/Events/TechDays/Techdays-2012-the-Netherlands/2159

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?http://channel9.msdn.com/Events/TechDays/Techdays-2012-the-Netherlands/2159


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

Anti-plugin bias

“Shift in direction”


Not widgets
Not Widgetshttp://channel9.msdn.com/Events/TechDays/Techdays-2012-the-Netherlands/2159

But they inspire with their responsiveness

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

http://worrydream.com/bartwidget/


Lob apps forms over data
LOB Apps: forms http://channel9.msdn.com/Events/TechDays/Techdays-2012-the-Netherlands/2159over data


Single page application1
Single Page Applicationhttp://channel9.msdn.com/Events/TechDays/Techdays-2012-the-Netherlands/2159

A web page hosts layout & content

composed dynamically on the client

with JavaScript


Demo we might go here
Demo: We might go herehttp://channel9.msdn.com/Events/TechDays/Techdays-2012-the-Netherlands/2159

Noyes UpshotDataControllerDemo


Demo we ll build together
Demo: We’ll build TOGETHERhttp://channel9.msdn.com/Events/TechDays/Techdays-2012-the-Netherlands/2159

SPA Demo 3_ExtTmpls


Spa architecture
SPA Architecturehttp://channel9.msdn.com/Events/TechDays/Techdays-2012-the-Netherlands/2159

Visible UIHTML/CSS

Web UIHTML/CSS/JS

ApplicationJavaScript

NavigationJavaScript

Data ServicesJSON/XML

Data AccessJavaScript

Offline

Local Storage

Server

Client


Client javascript libraries
Client JavaScript Librarieshttp://channel9.msdn.com/Events/TechDays/Techdays-2012-the-Netherlands/2159

history.js

jQuery & friends

nav.js

DOM / AJAX

knockout.js

MVVM

Data & Model Management

upshot.js

Navigation


Mvvm with knockout js
MVVM with knockout.jshttp://channel9.msdn.com/Events/TechDays/Techdays-2012-the-Netherlands/2159

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


Knockout ko on jsfiddle
knockout (http://channel9.msdn.com/Events/TechDays/Techdays-2012-the-Netherlands/2159ko) on jsfiddle

Explore Ryan Niemeyer’s fiddles:

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


Upshot js
upshot.jshttp://channel9.msdn.com/Events/TechDays/Techdays-2012-the-Netherlands/2159

  • 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.jshttp://channel9.msdn.com/Events/TechDays/Techdays-2012-the-Netherlands/2159

  • 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 http://channel9.msdn.com/Events/TechDays/Techdays-2012-the-Netherlands/2159APP not Web Site

Web development experience does not prepare you to build SPAs


Closer to silverlight apps
Closer to Silverlight appshttp://channel9.msdn.com/Events/TechDays/Techdays-2012-the-Netherlands/2159

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 Timehttp://channel9.msdn.com/Events/TechDays/Techdays-2012-the-Netherlands/2159

Explore … have fun … beware!


Upshot far from readyhttp://channel9.msdn.com/Events/TechDays/Techdays-2012-the-Netherlands/2159

Unstable libraries

No clear library winners

New JavaScript coding practices

Weak tooling (intellisense, debugging)

Browser incompatabilities


Upshot premature
upshot prematurehttp://channel9.msdn.com/Events/TechDays/Techdays-2012-the-Netherlands/2159

Ship date?

Documentation

Samples (most don’t work)

“To Do”severywhere

Multi-part keys

Model navigation

Projections/Includes

Metadata anomalies

Heavy payload


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

  • 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.comhttp://channel9.msdn.com/Events/TechDays/Techdays-2012-the-Netherlands/2159

@wardbell

[email protected]


ad