September 14, 2012

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.



Overview

  • 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 –http://knockoutjs.com/



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 –http://modernizr.com/



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



MVC4 WebAPI –http://www.asp.net/web-api

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



Working with Async



Cache manifest –http://en.wikipedia.org/wiki/Cache_manifest_in_HTML5

  • 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) –http://phonegap.com/



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:http://nodejs.org/





Source code the Tiny Contact Manager demoed in the session.

http://tinycontactmanager.codeplex.com
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!