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.

Transcript

1. ASP.NET MVC4
   for Mobile Web applications
   Alexander Beletsky
   @alexbeletsky
   beletsky.net
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

5. Why Mobile is Important?
   

   View Slide

6. Because everybody use mobile
   devices
   

   View Slide

7. View Slide

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 “
   

   View Slide

9. Web sites have to be
   ADAPTIVE
   to mobile devices
   

   View Slide

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

    View Slide

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

    View Slide

12. How to make site adaptive?
    ●
    Rely on HTML5 and CSS3
    ●
    Use flexible grid systems
    ●
    Use Media Queries
    ●
    Use Display Modes
    

    View Slide

13. Web app have to
    LOOK & FEEL
    like mobile native app
    

    View Slide

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. “
    

    View Slide

15. Package app for Market
    TRIGGER.IO
    

    View Slide

16. Let's build some
    mobile web application
    

    View Slide

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!
    

    View Slide

18. Technologies & Frameworks
    ●
    ASP.NET MVC4 (Beta)
    ●
    Knockout.js
    ●
    CSS3 Media Queries
    ●
    jQuery & jQuery Mobile
    ●
    HTML5 Local Storage
    ●
    HTML5 Offine Applications Mode
    

    View Slide

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
    

    View Slide

20. Web API & Web Application
    ●
    ApiController base class
    ●
    HTTP verb implementation
    ●
    Knockout.js - Model, ViewModel
    ●
    Simple Markup + CSS3 Media Queries
    

    View Slide

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
    

    View Slide

22. Make it offline
    ●
    Use HTML5 local storage
    ●
    Use HTML5 Cache.Manifest
    ●
    Create Online/Offline logic
    ●
    Restore data from cache in fallback
    

    View Slide

23. Before
    After
    

    View Slide

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

    View Slide

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

    View Slide