Building Responsive Web Applications with MVC4, WebAPI and HTML5Brendan KowitzSenior Developer

DEV332

Who am I?

brendan.kowitz@readify.net

http://www.kowitz.net

@brendankowitz

Overview

Going offline

Packaging

Data + WebAPI

Building a great user experience

Build for a wide audience

MVC4

Multi BrowserMulti PlatformMulti Form factorMulti Screen Resolutions

Why responsive mobile web applications

Responsive, fluid usage, respond to online and offline events

Interact with device hardware* and storage to create a personalised experience

Build and package for app stores / market places, in place of native apps

Responding to mobile growth

Own a smartphone

20112012

Mobile web access

20102012

http://tinyurl.com/9bcyq86

44%

59%

26%

58%

http://www.itu.int/ITU-D/ict/statistics/at_glance/KeyTelecom.html

Why responsive web applicationsBest of desktop smart-client apps

Combined with the very latest and best of the web

Great for enhancing the user experience of web applications

Responsive options

Do nothingJust add the meta viewport tag:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Responsive options

Adaptive Layout• CSS3 Media queries

Responsive options

Adaptive Rendering

Responsive options

Responsive client-side apps

Mini Quizvar myArray = new Array();

myArray["first"] = "Hello";myArray["second"] = "World";

alert(myArray.length);

02nullundefinedthrow

JavaScript applicationsHow can we write better JavaScript?

Common client-side patterns

http://xkcd.com/292/

Common client-side patterns

Module PatternNamespaces (MS Ajax Toolkit)MVC (Spinejs, Backbonejs, JavaScript MVC)MVVM (Knockout, WinJS)

MVVM

View

ViewModel

Model

Knockout<p>First name: <strong data-bind="text: firstName"></strong></p><p>Last name: <strong data-bind="text: lastName"></strong></p>

function AppViewModel() {    this.firstName = ko.observable("Bert");    this.lastName = ko.observable("Bertington");}

ko.applyBindings(new AppViewModel());

Responsive UI toolkitsjQuery UI + jQueryMobileTelerik’s Kendo UI + MobileTwitter bootstrap

iOS Android WP7 DesktopJQueryUI / Mobile Excellent Good Functional ExcellentKendo Excellent Excellent Not Supported ExcellentBootstrap Good Good Good Excellent

HTML formsUse browser and device native features whenever possibleInput types: eg. number, email, url, date should be usedUse Polyfills to broaden compatibilityhttps://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills

Traditional apps

Browser Request

Index.html

MVC4

Traditional Request / Response for ALL rendered content and assets

Structuring responsive appsInitial Request

Application.htm

MVC4

RequireJS Loader

Page1 Partial.htm

IndexViewModel.js

Application.js (bootstrap)

ViewModel (#index)

ViewModel (#login)

Model (LoginModel)JSON Requests

HTML5 localstorage

Handling disconnection

Application compositionUsing libraries in your page

CommonJS specificationRequireJS (Modules/AsynchronousDefinition)Node.js (Modules/1.0)

Script Loaders (load scripts in parallel)YepNope YabbleLABjs

http://www.commonjs.org/

introducing…

Tiny Contact Manager

Screen shots

demo Building a responsive UI

MVC4 WebAPIGreat for building convention based REST APIsGreat support for JSON, XML data types

demo

WebAPI

Working with AsyncPromise Pattern

$.ajax("http://www.example.org/somedata.json”)  .then(myFunc, myFailure);

jQuery 1.5+

Working with AsyncPromise Pattern

WinJS.xhr({ url:"http://www.example.org/somedata.json"}).then(function (response) { updateDisplay(JSON.parse(response.responseText));});

WinJS

Cache manifestCACHE MANIFEST## Version: 1.0

CACHE:/m/Content/background.png/m/index.htm/m/scripts/require.js/m/scripts/main-built.js

NETWORK:*

Cache manifestLeverage MVC4 to programmatically build this

demo

Cache manifest

Using LocalstorageUnder the HTML5 group of technologiesAccess can vary based on privacy settings on the deviceLimited StorageAvailable in PhoneGap*

(after device ready event)

RecapWhy we need responsive appsClient-side patternsUI ToolkitsHTML5 FormsWebAPICache Manifest

Bundling and minificationSystem.web.optimisationsNode.js tools:

Require.js optimiserStackservice Bundler:

Node.js

If you don’t have it,It’s time to go download it.

http://nodejs.org/

Require.jsr.js is the Require.js optimiser

npm install requirejs -gnode r.js -o scripts/app.build.js

demo

Require.js

Wrap up

Going offline

Packaging

Data + WebAPI

Building a great user experience üüüü

Further reading

Further watchingPhil Haack

http://channel9.msdn.com/Events/BUILD/BUILD2011/TOOL-803T

Steve Sandersonhttp://channel9.msdn.com/Events/MIX/MIX11/FRM08http://channel9.msdn.com/Events/TechDays/Techdays-2012-the-Netherlands/2159

Douglas Crockford: Serversidenesshttp://vimeo.com/31363829

Think aboutWhat’s one pattern you can use to help develop responsive apps?

What’s one feature in ASP.NET MVC4 that helps with responsive apps?

Would you consider writing a responsive app for your next project?

Get the code

http://tinycontactmanager.codeplex.com

Related ContentAZRILL102 Exploring Windows Azure Storage

Modern App Development: Demo Pod 2

MCPD: Web Developer 4

Find Me Next up at the Speaker Lounge

© 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.