ASP.NET MVC4 for Mobile Web Application

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

Why Mobile is Important?

Slide 6

Slide 6 text

Because everybody use mobile devices

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

Web sites have to be ADAPTIVE to mobile devices

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

Web app have to LOOK & FEEL like mobile native app

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

Package app for Market TRIGGER.IO

Slide 16

Slide 16 text

Let's build some mobile web application

Slide 17

Slide 17 text

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!

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

Mobile Application ● PM> install-package jquery.mobile.mvc ● Apply markup changes (if needed) ● Apply data-roles for controls ● Bring the content in mobile form

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

Before After

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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