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. ASP.NET MVC4 for Mobile Web applications Alexander Beletsky @alexbeletsky beletsky.net

  2. About me: • Developer, E-conomic (Ciklum) • @alexbeletsky • http://beletsky.net

    • http://xpinjection.com
  3. What's in ASP.NET MVC4? • ASP.NET Web API • Bundling

    and Minification • Razor Enhancements • Real Time Communication • Mobile Web
  4. What's in ASP.NET MVC4? • ASP.NET Web API • Bundling

    and Minification • Razor Enhancements • Real Time Communication • Mobile Web
  5. Why Mobile is Important?

  6. Because everybody use mobile devices

  7. None
  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 “
  9. Web sites have to be ADAPTIVE to mobile devices

  10. http://cnn.com http://korrespondent.net http://kmu.gov.ua

  11. In fact, 80% of existing web sites aren't mobile friendly

  12. How to make site adaptive? • Rely on HTML5 and

    CSS3 • Use flexible grid systems • Use Media Queries • Use Display Modes
  13. Web app have to LOOK & FEEL like mobile native

    app
  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. “
  15. Package app for Market TRIGGER.IO

  16. Let's build some mobile web application

  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!
  18. Technologies & Frameworks • ASP.NET MVC4 (Beta) • Knockout.js •

    CSS3 Media Queries • jQuery & jQuery Mobile • HTML5 Local Storage • HTML5 Offine Applications Mode
  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
  20. Web API & Web Application • ApiController base class •

    HTTP verb implementation • Knockout.js - Model, ViewModel • Simple Markup + CSS3 Media Queries
  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
  22. Make it offline • Use HTML5 local storage • Use

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

  24. https://github.com/alexanderbeletsky/aspnet.mobile

  25. Thank you. @alexbeletsky http://beletsky.net http://github.com/alexanderbeletsky