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
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
- Module pattern
- Namespaces (MS AJAX toolkit)
- MVVM (Knockout, WinJS)
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/
Structuring responsive apps requires thinking different – need to allow for the fact that the underlying connection the user is using may be transient,
Using libraries in your page
Script Loaders (load scripts in paralle)
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
- Promise Pattern
- jQuery 1.5+
- Chain together AJAX requests – do this, then that.
- Also in WinJS –http://msdn.microsoft.com/en-us/library/windows/apps/br229773.aspx
Cache manifest –http://en.wikipedia.org/wiki/Cache_manifest_in_HTML5
- Tells the client which elements to cache
- Leverage MVC4 to programatically build this
- 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
- 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.
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!