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
- 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
- CommonJS specification
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/Cachemanifestin_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!