TechEd - Building Responsive Web Applications with MVC4, WebAPI and HTML5

This session was presented by Brendan Kowitz (@brendankowitz) a Senior Developer from Readify and covered building responsive mobile web applications with MVC4, WebAPI and HTML5.


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

Why responsible 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 across platforms

Why responsive web applications?

  • Best of desktop smart-client apps
  • Combined with the very latest and best of the web.
  • Great for enhancing web sites

Responsive options (or maturity model – myanalogy)

  • Do nothing – just add the mets viewport tag <meta name=”viewport” content=”width=device-width” …
  • Adaptive layout – CSS3 media queries (same HTML for all clients)
  • Adaptive rendering – tailored HTML for different devices
  • Responsive client-side apps – the goal

Common client-side patterns for organising JavaScript libraries

  • Module pattern
  • Namespaces (MS AJAX toolkit)
  • MVC (Spinejs, Backbonejs, JavaScript MVC
  • MVVM (Knockout, WinJS)

Knockout –

Responsive UI toolkits

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

HTML Form elements

  • Use browser and device native features whenever possible
  • Input types – e.g. number, email, url, data should be used
  • Use Polyfills to broaden compatibility
  • Modernizr library –

Modernizr is a JavaScript library that detects HTML5 and CSS3 features in the user’s browser.

Structuring responsive apps requires thinking different – need to allow for the fact that the underlying connection the user is using may be transient,

Application composition

  • Using libraries in your page

  • CommonJS specification

  • RequireJS

  • Node.js (Modules/1.0)

  • Script Loaders (load scripts in paralle)

  • YepNode

  • Yabble


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

Working with Async

Cache manifest –

  • Tells the client which elements to cache
  • Leverage MVC4 to programatically build this

Using Localstorage

  • Under the HTML5 group of technologies
  • Access can vary based on privacy settings on the device
  • Limited stooge – varies per device, generally 5 to 10 MB but no guarantees
  • Available in PhoneGap (after device ready event) –

Bundling and minification

  • System.web.optimisations
  • Node.js tools:
  • Require.js optimiser
  • Stackservice Bundler

Node.js – if you don’t have it, it’s time to download it:

Source code the Tiny Contact Manager demoed in the session.
This session was pretty good, but made me realise how far things have come since I was last writing code on a daily basis, plenty of progress. Lots to catch up on!