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