Building rich Single Page Applications (SPAs) for desktop, mobile, and tablet with ASP.NET MVC 4
-
Upload
microsoft-developer-network-msdn-belgium-and-luxembourg -
Category
Technology
-
view
4.167 -
download
3
description
Transcript of Building rich Single Page Applications (SPAs) for desktop, mobile, and tablet with ASP.NET MVC 4
![Page 1: Building rich Single Page Applications (SPAs) for desktop, mobile, and tablet with ASP.NET MVC 4](https://reader033.fdocuments.in/reader033/viewer/2022052321/554f9348b4c905d25b8b530f/html5/thumbnails/1.jpg)
Single Page Applicationsfor desktop, mobile, and tablet with ASP.NET MVC 4
Steven Sanderson@StevenSander
sonProgram ManagerASP .NET
![Page 2: Building rich Single Page Applications (SPAs) for desktop, mobile, and tablet with ASP.NET MVC 4](https://reader033.fdocuments.in/reader033/viewer/2022052321/554f9348b4c905d25b8b530f/html5/thumbnails/2.jpg)
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
*
![Page 3: Building rich Single Page Applications (SPAs) for desktop, mobile, and tablet with ASP.NET MVC 4](https://reader033.fdocuments.in/reader033/viewer/2022052321/554f9348b4c905d25b8b530f/html5/thumbnails/3.jpg)
Examples
![Page 4: Building rich Single Page Applications (SPAs) for desktop, mobile, and tablet with ASP.NET MVC 4](https://reader033.fdocuments.in/reader033/viewer/2022052321/554f9348b4c905d25b8b530f/html5/thumbnails/4.jpg)
Examples
![Page 5: Building rich Single Page Applications (SPAs) for desktop, mobile, and tablet with ASP.NET MVC 4](https://reader033.fdocuments.in/reader033/viewer/2022052321/554f9348b4c905d25b8b530f/html5/thumbnails/5.jpg)
Benefits
Great user experience
Can work offline
Runs on any device(Advanced)
App-store deployable
![Page 6: Building rich Single Page Applications (SPAs) for desktop, mobile, and tablet with ASP.NET MVC 4](https://reader033.fdocuments.in/reader033/viewer/2022052321/554f9348b4c905d25b8b530f/html5/thumbnails/6.jpg)
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
![Page 7: Building rich Single Page Applications (SPAs) for desktop, mobile, and tablet with ASP.NET MVC 4](https://reader033.fdocuments.in/reader033/viewer/2022052321/554f9348b4c905d25b8b530f/html5/thumbnails/7.jpg)
Demo: Getting startedUsing the new SPA project template and scaffolder
![Page 8: Building rich Single Page Applications (SPAs) for desktop, mobile, and tablet with ASP.NET MVC 4](https://reader033.fdocuments.in/reader033/viewer/2022052321/554f9348b4c905d25b8b530f/html5/thumbnails/8.jpg)
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
![Page 9: Building rich Single Page Applications (SPAs) for desktop, mobile, and tablet with ASP.NET MVC 4](https://reader033.fdocuments.in/reader033/viewer/2022052321/554f9348b4c905d25b8b530f/html5/thumbnails/9.jpg)
Demos
DataWebAPI + Upshot
1
UIKnockout + Upshot
2
Mobile & NavigationHistory.js
3
OfflineCrazy magic
4
![Page 10: Building rich Single Page Applications (SPAs) for desktop, mobile, and tablet with ASP.NET MVC 4](https://reader033.fdocuments.in/reader033/viewer/2022052321/554f9348b4c905d25b8b530f/html5/thumbnails/10.jpg)
Demos
DataWebAPI + Upshot
1
UIKnockout + Upshot
2
Mobile & NavigationHistory.js
3
OfflineCrazy magic
4
![Page 11: Building rich Single Page Applications (SPAs) for desktop, mobile, and tablet with ASP.NET MVC 4](https://reader033.fdocuments.in/reader033/viewer/2022052321/554f9348b4c905d25b8b530f/html5/thumbnails/11.jpg)
JavaScript
Upshot
ASP.NET MVC
WebAPIDbDataControlle
r DataSource
Your app code
1: Handling dataWebAPI + Upshot
![Page 12: Building rich Single Page Applications (SPAs) for desktop, mobile, and tablet with ASP.NET MVC 4](https://reader033.fdocuments.in/reader033/viewer/2022052321/554f9348b4c905d25b8b530f/html5/thumbnails/12.jpg)
Demos
DataWebAPI + Upshot
1
UIKnockout + Upshot
2
Mobile & NavigationHistory.js
3
OfflineCrazy magic
4
![Page 13: Building rich Single Page Applications (SPAs) for desktop, mobile, and tablet with ASP.NET MVC 4](https://reader033.fdocuments.in/reader033/viewer/2022052321/554f9348b4c905d25b8b530f/html5/thumbnails/13.jpg)
HTML
Upshot
2: User interfaces & MVVMKnockout + Upshot
Model
View
ViewModel
![Page 14: Building rich Single Page Applications (SPAs) for desktop, mobile, and tablet with ASP.NET MVC 4](https://reader033.fdocuments.in/reader033/viewer/2022052321/554f9348b4c905d25b8b530f/html5/thumbnails/14.jpg)
2: User interfaces & MVVMKnockout + Upshot
myViewModel.searchText = ko.observable("Chickens");
<input data-bind="value: searchText" />
![Page 15: Building rich Single Page Applications (SPAs) for desktop, mobile, and tablet with ASP.NET MVC 4](https://reader033.fdocuments.in/reader033/viewer/2022052321/554f9348b4c905d25b8b530f/html5/thumbnails/15.jpg)
Demos
DataWebAPI + Upshot
1
UIKnockout + Upshot
2
Mobile & NavigationHistory.js
3
OfflineCrazy magic
4
![Page 16: Building rich Single Page Applications (SPAs) for desktop, mobile, and tablet with ASP.NET MVC 4](https://reader033.fdocuments.in/reader033/viewer/2022052321/554f9348b4c905d25b8b530f/html5/thumbnails/16.jpg)
Demos
DataWebAPI + Upshot
1
UIKnockout + Upshot
2
Mobile & NavigationHistory.js
3
OfflineCrazy magic
4
![Page 17: Building rich Single Page Applications (SPAs) for desktop, mobile, and tablet with ASP.NET MVC 4](https://reader033.fdocuments.in/reader033/viewer/2022052321/554f9348b4c905d25b8b530f/html5/thumbnails/17.jpg)
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!
![Page 18: Building rich Single Page Applications (SPAs) for desktop, mobile, and tablet with ASP.NET MVC 4](https://reader033.fdocuments.in/reader033/viewer/2022052321/554f9348b4c905d25b8b530f/html5/thumbnails/18.jpg)
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
![Page 19: Building rich Single Page Applications (SPAs) for desktop, mobile, and tablet with ASP.NET MVC 4](https://reader033.fdocuments.in/reader033/viewer/2022052321/554f9348b4c905d25b8b530f/html5/thumbnails/19.jpg)
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
![Page 20: Building rich Single Page Applications (SPAs) for desktop, mobile, and tablet with ASP.NET MVC 4](https://reader033.fdocuments.in/reader033/viewer/2022052321/554f9348b4c905d25b8b530f/html5/thumbnails/20.jpg)
© 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.