![Page 1: Building Single Page Apps for desktop, mobile, tablet with ASP.NET MVC 4](https://reader036.vdocuments.mx/reader036/viewer/2022070315/55519369b4c90580128b559f/html5/thumbnails/1.jpg)
Building Single Page Apps for desktop, mobile, tablet with ASP.NET MVC 4
Shravan Kumar KasagoniMicrosoft MVP ASP.NET | Thomson Reutershttp://theshravan.net@techieshravan
![Page 2: Building Single Page Apps for desktop, mobile, tablet with ASP.NET MVC 4](https://reader036.vdocuments.mx/reader036/viewer/2022070315/55519369b4c90580128b559f/html5/thumbnails/2.jpg)
Building Single Page Apps for desktop, mobile, tablet with ASP.NET MVC 4
Agenda
![Page 3: Building Single Page Apps for desktop, mobile, tablet with ASP.NET MVC 4](https://reader036.vdocuments.mx/reader036/viewer/2022070315/55519369b4c90580128b559f/html5/thumbnails/3.jpg)
What SPA & Why should you care?
![Page 4: Building Single Page Apps for desktop, mobile, tablet with ASP.NET MVC 4](https://reader036.vdocuments.mx/reader036/viewer/2022070315/55519369b4c90580128b559f/html5/thumbnails/4.jpg)
Single Page Applications
Rich, responsive applicationscombining the best of web &
desktop, built with HTML 5 & JavaScript
![Page 5: Building Single Page Apps for desktop, mobile, tablet with ASP.NET MVC 4](https://reader036.vdocuments.mx/reader036/viewer/2022070315/55519369b4c90580128b559f/html5/thumbnails/5.jpg)
Benefits
Great user experience
Runs on any device
Can work offline
![Page 6: Building Single Page Apps for desktop, mobile, tablet with ASP.NET MVC 4](https://reader036.vdocuments.mx/reader036/viewer/2022070315/55519369b4c90580128b559f/html5/thumbnails/6.jpg)
Server Client
UIHTML/CSS
Application LayerJavaScript
Data Services
JSON/XML
Data Access LayerJavaScript
Navigation API
Web AppHTML/CSS/JS
![Page 7: Building Single Page Apps for desktop, mobile, tablet with ASP.NET MVC 4](https://reader036.vdocuments.mx/reader036/viewer/2022070315/55519369b4c90580128b559f/html5/thumbnails/7.jpg)
Demo: Using Default SPA Project Template
![Page 8: Building Single Page Apps for desktop, mobile, tablet with ASP.NET MVC 4](https://reader036.vdocuments.mx/reader036/viewer/2022070315/55519369b4c90580128b559f/html5/thumbnails/8.jpg)
Components of SPA
Data
UI
![Page 9: Building Single Page Apps for desktop, mobile, tablet with ASP.NET MVC 4](https://reader036.vdocuments.mx/reader036/viewer/2022070315/55519369b4c90580128b559f/html5/thumbnails/9.jpg)
Web API
![Page 10: Building Single Page Apps for desktop, mobile, tablet with ASP.NET MVC 4](https://reader036.vdocuments.mx/reader036/viewer/2022070315/55519369b4c90580128b559f/html5/thumbnails/10.jpg)
•Directly access and manipulate HTTP requests and responses in your Web APIs using a clean, strongly typed HTTP object model.
Modern HTTP programming model
![Page 11: Building Single Page Apps for desktop, mobile, tablet with ASP.NET MVC 4](https://reader036.vdocuments.mx/reader036/viewer/2022070315/55519369b4c90580128b559f/html5/thumbnails/11.jpg)
Why Web APIs?
![Page 12: Building Single Page Apps for desktop, mobile, tablet with ASP.NET MVC 4](https://reader036.vdocuments.mx/reader036/viewer/2022070315/55519369b4c90580128b559f/html5/thumbnails/12.jpg)
Build Richer AppsReach More Clients
![Page 13: Building Single Page Apps for desktop, mobile, tablet with ASP.NET MVC 4](https://reader036.vdocuments.mx/reader036/viewer/2022070315/55519369b4c90580128b559f/html5/thumbnails/13.jpg)
Web API Growth
Source: www.programmableweb.com – current APIs: 4535
+ 100% + 50%+ 3400%+ 235%+ 71% + 86% + 46%+ 63%
![Page 14: Building Single Page Apps for desktop, mobile, tablet with ASP.NET MVC 4](https://reader036.vdocuments.mx/reader036/viewer/2022070315/55519369b4c90580128b559f/html5/thumbnails/14.jpg)
GET /en/html/dummy.php?name=MyName&married=not+single &male=yes HTTP/1.1Host: www.explainth.atUser-Agent: Mozilla/5.0 (Windows;en-GB; rv:1.8.0.11) Gecko/20070312 Firefox/1.5.0.11Accept: text/xml,text/html;q=0.9,text/plain;q=0.8,image/png,*/*;q=0.5Accept-Language: en-gb,en;q=0.5Accept-Encoding: gzip,deflateAccept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7Keep-Alive: 300Connection: keep-aliveReferer: http://www.explainth.at/en/misc/httpreq.shtml
Embrace HTTP
![Page 15: Building Single Page Apps for desktop, mobile, tablet with ASP.NET MVC 4](https://reader036.vdocuments.mx/reader036/viewer/2022070315/55519369b4c90580128b559f/html5/thumbnails/15.jpg)
Flexible Hosting
Content negotiation
Query composition
Model binding and validation
Routing
FiltersImproved testability
IoC Support
![Page 16: Building Single Page Apps for desktop, mobile, tablet with ASP.NET MVC 4](https://reader036.vdocuments.mx/reader036/viewer/2022070315/55519369b4c90580128b559f/html5/thumbnails/16.jpg)
Demo: Building a Web API
![Page 17: Building Single Page Apps for desktop, mobile, tablet with ASP.NET MVC 4](https://reader036.vdocuments.mx/reader036/viewer/2022070315/55519369b4c90580128b559f/html5/thumbnails/17.jpg)
Demo: Calling a Web API from
JavaScript
![Page 18: Building Single Page Apps for desktop, mobile, tablet with ASP.NET MVC 4](https://reader036.vdocuments.mx/reader036/viewer/2022070315/55519369b4c90580128b559f/html5/thumbnails/18.jpg)
Knockout.js
![Page 19: Building Single Page Apps for desktop, mobile, tablet with ASP.NET MVC 4](https://reader036.vdocuments.mx/reader036/viewer/2022070315/55519369b4c90580128b559f/html5/thumbnails/19.jpg)
JavaScriptMVVM
Framework
![Page 20: Building Single Page Apps for desktop, mobile, tablet with ASP.NET MVC 4](https://reader036.vdocuments.mx/reader036/viewer/2022070315/55519369b4c90580128b559f/html5/thumbnails/20.jpg)
What is MVVM?
![Page 21: Building Single Page Apps for desktop, mobile, tablet with ASP.NET MVC 4](https://reader036.vdocuments.mx/reader036/viewer/2022070315/55519369b4c90580128b559f/html5/thumbnails/21.jpg)
Model -View -ViewModel
![Page 22: Building Single Page Apps for desktop, mobile, tablet with ASP.NET MVC 4](https://reader036.vdocuments.mx/reader036/viewer/2022070315/55519369b4c90580128b559f/html5/thumbnails/22.jpg)
Why MVVM?
![Page 23: Building Single Page Apps for desktop, mobile, tablet with ASP.NET MVC 4](https://reader036.vdocuments.mx/reader036/viewer/2022070315/55519369b4c90580128b559f/html5/thumbnails/23.jpg)
Why knockout.js?
![Page 24: Building Single Page Apps for desktop, mobile, tablet with ASP.NET MVC 4](https://reader036.vdocuments.mx/reader036/viewer/2022070315/55519369b4c90580128b559f/html5/thumbnails/24.jpg)
Declarative Bindings
Automatic UI Refresh
Dependency Tracking
Templating
![Page 25: Building Single Page Apps for desktop, mobile, tablet with ASP.NET MVC 4](https://reader036.vdocuments.mx/reader036/viewer/2022070315/55519369b4c90580128b559f/html5/thumbnails/25.jpg)
Referenceshttp://knockoutjs.com
http://blog.stevensanderson.com http://theshravan.net
![Page 26: Building Single Page Apps for desktop, mobile, tablet with ASP.NET MVC 4](https://reader036.vdocuments.mx/reader036/viewer/2022070315/55519369b4c90580128b559f/html5/thumbnails/26.jpg)
Reach MeMy Blog : http://theshravan.netTwitter : techieshravan
![Page 27: Building Single Page Apps for desktop, mobile, tablet with ASP.NET MVC 4](https://reader036.vdocuments.mx/reader036/viewer/2022070315/55519369b4c90580128b559f/html5/thumbnails/27.jpg)
Thank You