Single Page Applicationsfor desktop, mobile, and tablet with ASP.NET MVC 4

Steven Sanderson@StevenSander

sonProgram ManagerASP .NET

IntroductionWhat is SPA and why should you care?

Single Page ApplicationsRich, responsive applications

combining the best of web and desktop,

built with HTML5 and JavaScript* and nothing fancy

*

Examples

Examples

Benefits

Great user experience

Can work offline

Runs on any device(Advanced)

App-store deployable

Technologies

Server Client

Web UIHTML/CSS/JS

Data servicesJSON/XML

Application layer

JavaScript

Visible UIHTML/CSS

Data access layer

JavaScript

Local storage

Navigation APIs

available

offline

Demo: Getting startedUsing the new SPA project template and scaffolder

Technologies

Server Client

Web UIHTML/CSS/JS

Data servicesJSON/XML

Application layer

JavaScript

Visible UIHTML/CSS

Data access layer

JavaScript

Local storage

Navigation APIs

MVC / Web Forms / WebMatrix

WebAPI

knockout.js

history.js

upshot.js

HTML5

Demos

DataWebAPI + Upshot

1

UIKnockout + Upshot

2

Mobile & NavigationHistory.js

3

OfflineCrazy magic

4

Demos

DataWebAPI + Upshot

1

UIKnockout + Upshot

2

Mobile & NavigationHistory.js

3

OfflineCrazy magic

4

JavaScript

Upshot

ASP.NET MVC

WebAPIDbDataControlle

r DataSource

Your app code

1: Handling dataWebAPI + Upshot

Demos

DataWebAPI + Upshot

1

UIKnockout + Upshot

2

Mobile & NavigationHistory.js

3

OfflineCrazy magic

4

HTML

Upshot

2: User interfaces & MVVMKnockout + Upshot

Model

View

ViewModel

2: User interfaces & MVVMKnockout + Upshot

myViewModel.searchText = ko.observable("Chickens");

<input data-bind="value: searchText" />

Demos

DataWebAPI + Upshot

1

UIKnockout + Upshot

2

Mobile & NavigationHistory.js

3

OfflineCrazy magic

4

Demos

DataWebAPI + Upshot

1

UIKnockout + Upshot

2

Mobile & NavigationHistory.js

3

OfflineCrazy magic

4

Upshot

4: Going offlineHTML5 Application Cache and Local Data Store

Data servicesJSON/XML

Your client-side codeHTML/JS/CSS/Images

Local storageHTML5

Provider

Server Client

Cache Manifest

Offline-aware

Provider

DataSources

1

2

No changes here!

Review

Single Page ApplicationsRich, responsive applications combining the best of web and

desktop, built with HTML5 and JavaScript and nothing fancy

DataWebAPI + Upshot

1

UIKnockout + Upshot

2

Mobile & NavigationHistory.js

3

OfflineCrazy magic

4

Get started

Explore the samplesDeliveryTracker, Upshot Scenarios - follow @StevenSanderson for a download link coming soon

1

Try the new MVC 4 Beta – this week!… including the Single Page Application scaffolder template

2

Enjoy http://learn.knockoutjs.com/Interactive in-browser tutorials for Knockout.js and MVVM

3

© 2012 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.