Post on 11-May-2015
description
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.