ASP.NET MVC4 for Mobile Web Application

ASP.NET MVC4 for Mobile Web Application

The speech I gave on MS SWIT 2012, Kyiv 23 March.

It describes main features of ASP.NET MVC, HTML5 and jQuery for development of mobile web applications.

F32f547e66f3b6528376d67fdb67008f?s=128

Alexander Beletsky

March 23, 2012
Tweet

Transcript

  1. 3.

    What's in ASP.NET MVC4? • ASP.NET Web API • Bundling

    and Minification • Razor Enhancements • Real Time Communication • Mobile Web
  2. 4.

    What's in ASP.NET MVC4? • ASP.NET Web API • Bundling

    and Minification • Razor Enhancements • Real Time Communication • Mobile Web
  3. 7.
  4. 8.

    “ Gartner estimates the combined installed base of smartphones and

    browser- equipped enhanced phones will surpass 1.82 billion units by 2013, eclipsing the total of 1.78 billion PCs by then “
  5. 12.

    How to make site adaptive? • Rely on HTML5 and

    CSS3 • Use flexible grid systems • Use Media Queries • Use Display Modes
  6. 14.

    “ A unified, HTML5-based user interface system for all popular

    mobile device platforms, built on the rock-solid jQuery and jQuery UI foundation. Its lightweight code is built with progressive enhancement, and has a flexible, easily themeable design. “
  7. 17.

    ASP.NET site ASP.NET portal is one of the most popular

    resource for ASP.NET developers. Unfortunately it's not mobile friendly now. We gonna fix that!
  8. 18.

    Technologies & Frameworks • ASP.NET MVC4 (Beta) • Knockout.js •

    CSS3 Media Queries • jQuery & jQuery Mobile • HTML5 Local Storage • HTML5 Offine Applications Mode
  9. 19.

    Project Milestones Web API Web application Mobilize it Offline Mode

    We will go from API desing to usuall web application implementation adapting application for mobile device and allow it to work offline 1 2 4 3
  10. 20.

    Web API & Web Application • ApiController base class •

    HTTP verb implementation • Knockout.js - Model, ViewModel • Simple Markup + CSS3 Media Queries
  11. 21.

    Mobile Application • PM> install-package jquery.mobile.mvc • Apply markup changes

    (if needed) • Apply data-roles for controls • Bring the content in mobile form
  12. 22.

    Make it offline • Use HTML5 local storage • Use

    HTML5 Cache.Manifest • Create Online/Offline logic • Restore data from cache in fallback