building single page apps for desktop, mobile, tablet with asp.net mvc 4

Building Single Page Apps for desktop, mobile, tablet with ASP.NET MVC 4

Shravan Kumar KasagoniMicrosoft MVP ASP.NET | Thomson Reutershttp://theshravan.net@techieshravan

Building Single Page Apps for desktop, mobile, tablet with ASP.NET MVC 4

Agenda

What SPA & Why should you care?

Single Page Applications

Rich, responsive applicationscombining the best of web &

desktop, built with HTML 5 & JavaScript

Benefits

Great user experience

Runs on any device

Can work offline

Server Client

UIHTML/CSS

Application LayerJavaScript

Data Services

JSON/XML

Data Access LayerJavaScript

Navigation API

Web AppHTML/CSS/JS

Demo: Using Default SPA Project Template

Components of SPA

Data

UI

Web API

•Directly access and manipulate HTTP requests and responses in your Web APIs using a clean, strongly typed HTTP object model.

Modern HTTP programming model

Why Web APIs?

Build Richer AppsReach More Clients

Web API Growth

Source: www.programmableweb.com – current APIs: 4535

+ 100% + 50%+ 3400%+ 235%+ 71% + 86% + 46%+ 63%

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

Flexible Hosting

Content negotiation

Query composition

Model binding and validation

Routing

FiltersImproved testability

IoC Support

Demo: Building a Web API

Demo: Calling a Web API from

JavaScript

Knockout.js

JavaScriptMVVM

Framework

What is MVVM?

Model -View -ViewModel

Why MVVM?

Why knockout.js?

Declarative Bindings

Automatic UI Refresh

Dependency Tracking

Templating

Referenceshttp://knockoutjs.com

http://blog.stevensanderson.com http://theshravan.net

Reach MeMy Blog : http://theshravan.netTwitter : techieshravan

Thank You