Building Responsive Web Applications with MVC4, WebAPI and HTML5

DEV332 Building Responsive Web Applications with MVC4, WebAPI and HTML5 Brendan Kowitz Senior Developer

Who am I? brendan.kowitz@readify.net http://www.kowitz.net @brendankowitz

Overview Building a great user experience Data + WebAPI Going offline Packaging

Build for a wide audience • Multi Browser • Multi Platform • Multi Form factor • Multi Screen Resolutions MVC4

Why responsive mobile web applications • Responsive, fluid usage, respond to online and offline events • Interact with device hardware* and storage to create a personalisedexperience • Build and package for app stores / market places, in place of native apps

Responding to mobile growth 59% 58% 44% 26% http://www.itu.int/ITU-D/ict/statistics/at_glance/KeyTelecom.html http://tinyurl.com/9bcyq86

Why responsive web applications • Best 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 nothing Just 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 Quiz varmyArray = new Array(); myArray["first"] = "Hello"; myArray["second"] = "World"; alert(myArray.length); • 0 • 2 • null • undefined • throw

JavaScript applications • How can we write better JavaScript?

Common client-side patterns http://xkcd.com/292/

Common client-side patterns • Module Pattern • Namespaces (MS Ajax Toolkit) • MVC (Spinejs, Backbonejs, JavaScript MVC) • MVVM (Knockout, WinJS)

MVVM Model ViewModel View

Knockout First name: Last name: function AppViewModel() { this.firstName = ko.observable("Bert"); this.lastName = ko.observable("Bertington"); } ko.applyBindings(new AppViewModel());

Responsive UI toolkits • jQuery UI + jQueryMobile • Telerik’s Kendo UI + Mobile • Twitter bootstrap

HTML forms • Use browser and device native features whenever possible • Input types: eg. number, email, url, date should be used • Use Polyfills to broaden compatibility • https://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 apps Initial Request Application.htm RequireJS Loader Application.js (bootstrap) MVC4 Page1 Partial.htm ViewModel (#index) IndexViewModel.js ViewModel (#login) JSON Requests Model (LoginModel) Handling disconnection HTML5 localstorage

Application composition • Using libraries in your page • CommonJS specification • RequireJS (Modules/AsynchronousDefinition) • Node.js (Modules/1.0) • Script Loaders (load scripts in parallel) • YepNope • Yabble • LABjs http://www.commonjs.org/

introducing… Tiny Contact Manager

Screen shots

demo Building a responsive UI

MVC4 WebAPI • Great for building convention based REST APIs • Great support for JSON, XML data types

demo WebAPI

Working withAsync • Promise Pattern jQuery 1.5+ $.ajax("http://www.example.org/somedata.json”) .then(myFunc, myFailure);

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

Cache manifest CACHE MANIFEST ## Version: 1.0 CACHE: /m/Content/background.png /m/index.htm /m/scripts/require.js /m/scripts/main-built.js NETWORK: *

Cache manifest • Leverage MVC4 to programmatically build this

demo Cache manifest

Using Localstorage • Under the HTML5 group of technologies • Access can vary based on privacy settings on the device • Limited Storage • Available in PhoneGap* • (after device ready event)

Recap • Why we need responsive apps • Client-side patterns • UI Toolkits • HTML5 Forms • WebAPI • Cache Manifest

Bundling and minification • System.web.optimisations • Node.js tools: • Require.js optimiser • StackserviceBundler:

Node.js If you don’t have it, It’s time to go download it. http://nodejs.org/

Require.js • r.js is the Require.js optimiser npm install requirejs -g node r.js -o scripts/app.build.js

demo Require.js

Wrap up ü Building a great user experience ü Data + WebAPI ü Going offline ü Packaging

Further reading

Further watching • Phil Haack • http://channel9.msdn.com/Events/BUILD/BUILD2011/TOOL-803T • Steve Sanderson • http://channel9.msdn.com/Events/MIX/MIX11/FRM08 • http://channel9.msdn.com/Events/TechDays/Techdays-2012-the-Netherlands/2159 • Douglas Crockford: Serversideness • http://vimeo.com/31363829

Think about • What’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 Content • AZRILL102 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.

Building Responsive Web Applications with MVC4, WebAPI and HTML5