building mobile web apps using asp.net mvc, html5, & jquery mobile

27
Jon Cortez Regional Practice Director Custom App Dev & Mobility Neudesic building mobile web apps using ASP.NET MVC, HTML5 & jQuery Mobile

Upload: jon-cortez

Post on 01-Nov-2014

17.715 views

Category:

Documents


4 download

DESCRIPTION

 

TRANSCRIPT

Page 1: Building Mobile Web Apps using ASP.NET MVC, HTML5, & jQuery Mobile

Jon CortezRegional Practice Director

Custom App Dev & MobilityNeudesic

building mobile web apps using

ASP.NET MVC, HTML5 &jQuery Mobile

Page 2: Building Mobile Web Apps using ASP.NET MVC, HTML5, & jQuery Mobile

Agenda

Introduction

ASP.NET MVC

Mobile Development

jQuery Mobile

Conclusion

Q & A

Page 3: Building Mobile Web Apps using ASP.NET MVC, HTML5, & jQuery Mobile

Introduction

Who am I? DLSU Alumni (Catch 92) Currently lives in Seattle, WA RPD for PacWest Region at Neudesic (www.neudesic.com) Area of focus is Custom Application Development and Mobility Contact Info

Email: [email protected] LinkedIn: http://www.linkedin.com/in/jcortez

Page 4: Building Mobile Web Apps using ASP.NET MVC, HTML5, & jQuery Mobile

Introduction

Why mobile development? Over a billion mobile devices with rich web capabilities Study conducted on May 2011 shows that 90 of Top 200 sites

have no mobile version Mobile devices are becoming the primary way that most people

access the web

Page 5: Building Mobile Web Apps using ASP.NET MVC, HTML5, & jQuery Mobile

Introduction

Goals for this session Introduce Mobile Web Development Writing your first mobile web app using ASP.NET MVC, HTML5 and

jQuery Mobile that targets multiple platforms and form factors (phones, tablets, desktop)

Spark interest in Mobile Web

Page 6: Building Mobile Web Apps using ASP.NET MVC, HTML5, & jQuery Mobile

Introduction

Pre-requisites for this session Familiarity with HTML and web development Experience with ASP.NET development is important Understanding of jQuery will be useful

Page 7: Building Mobile Web Apps using ASP.NET MVC, HTML5, & jQuery Mobile

ASP.NET MVC

Microsoft ASP.NET Frameworks ASP.NET Web Forms ASP.NET MVC

Web Forms Original design from late 90s Strongly typed compiled code replaced script Abstract away the web Click events replaced “POST” operations Competes against other MVC frameworks

Struts Ruby on Rails Django

Page 8: Building Mobile Web Apps using ASP.NET MVC, HTML5, & jQuery Mobile

ASP.NET MVC

ASP.NET MVC Design Goals Does not replace Web Forms but provides an alternative framework Still runs on ASP.NET

Caching, modules, master pages, providers, handlers, session state Embrace the web

No illusions of state – no page lifecycle Clean URLs and clean HTML

Extensible and pluggable framework Pluggable view engines Support for Dependency Injection

Testable Maintains a strict separation of concern

Page 9: Building Mobile Web Apps using ASP.NET MVC, HTML5, & jQuery Mobile

ASP.NET MVC

MVC Design Pattern

Controller

Model View

Page 10: Building Mobile Web Apps using ASP.NET MVC, HTML5, & jQuery Mobile

ASP.NET MVC

Development Tools Visual Studio 2010 Premium Edition IIS 7.5 SQL Server 2008 R2 Alternatively, free version via Web Platform Installer at

http://www.microsoft.com/web/downloads/platform.aspx Visual Web Developer 2010 Express IIS 7.5 Express SQL Server 2008 R2 Express

ASP.NET MVC 3

Page 11: Building Mobile Web Apps using ASP.NET MVC, HTML5, & jQuery Mobile

ASP.NET MVC

Demo:Your first ASP.NET MVC app

Page 12: Building Mobile Web Apps using ASP.NET MVC, HTML5, & jQuery Mobile

ASP.NET MVC

Demo Business Requirements

Ability to post restaurant information Ability to rate a restaurant Ability to post a review of a restaurant

Technical Requirements Must run on IIS Must use SQL Server Must support major web browsers Must be mobile-enabled

Page 13: Building Mobile Web Apps using ASP.NET MVC, HTML5, & jQuery Mobile

Mobile Development

Mobile 2.0 Similar to the web boom in the 90’s Most companies need/want a mobile app Opportunity to still get in early Evident on mobile platform: Windows 8 and Mac OS X Lion

Page 14: Building Mobile Web Apps using ASP.NET MVC, HTML5, & jQuery Mobile

Mobile Development

US Smartphone Market Share (Jun, 11)

RIMiOSAndroidWM6/WP7PalmOther

Page 15: Building Mobile Web Apps using ASP.NET MVC, HTML5, & jQuery Mobile

Mobile Development

Mobile WebNative Client

Skills TransferMultiple PlatformsNo Deploy/UpdateRun on Desktop

MonetizationOffline

PerformanceDevice Features

Page 16: Building Mobile Web Apps using ASP.NET MVC, HTML5, & jQuery Mobile

Mobile Development

Functionality Native Application Mobile Web (HTML5)

Geo Location Yes Yes

Local Storage Yes Yes

Offline Yes Yes

Phone Dialer Yes Yes (through URL)

Maps Yes Web control only

Contacts Yes

Camera Yes

Accelerometer Yes

File System Yes

Push Notifications Yes

Page 17: Building Mobile Web Apps using ASP.NET MVC, HTML5, & jQuery Mobile

Mobile Development

Native Develop using original platform tools For iOS

Objective-C Mac OS X Cocoa Touch SDK

For Android Java Android Application Framework

Learning curve No code reuse Great user experience

Page 18: Building Mobile Web Apps using ASP.NET MVC, HTML5, & jQuery Mobile

Mobile Development

Mobile Web Use subset of HTML / JavaScript / CSS Native mobile browser or hosted shell Use of mobile JavaScript framework: jQuery Mobile, Sencha Touch,

jQTouch, iUI, etc. Write once, works anywhere Downside

Common denominator Hardware interaction Can be slow Doesn’t feel like a native app

Page 19: Building Mobile Web Apps using ASP.NET MVC, HTML5, & jQuery Mobile

Mobile Development

Other approaches Mono Touch / Mono for Android PhoneGap Appcelerator

Page 20: Building Mobile Web Apps using ASP.NET MVC, HTML5, & jQuery Mobile

jQuery Mobile

What is jQuery Mobile? A touch-optimized web framework Developed by the jQuery project team Focused on compatibility with a wide variety of smartphones and

tablets Current version is jQuery Mobile 1.0

Page 21: Building Mobile Web Apps using ASP.NET MVC, HTML5, & jQuery Mobile

jQuery Mobile

Top 10 Features1. Built on jQuery core for familiarity2. Lightweight (~ 20K download size)3. HTML Markup Configuraton – do a lot before writing any JavaScript4. Progressive Enhancement – core functionality works on all base platform5. Automatic Initialization – based on data-* attributes in HTML56. Accessibility – based on WAI-ARIA7. Touch and mouse event support8. UI Widgets – great selection of native looking controls9. Themed Framework – support for alternative CSS 3.0 based themes10. Broad Platform Support – works on a variety of smartphone and tablet devices

Page 22: Building Mobile Web Apps using ASP.NET MVC, HTML5, & jQuery Mobile

jQuery Mobile

What you need to develop in jQuery Mobile Your favorite IDE for HTML

Visual Studio, Eclipse, TextMate A web browser capable of inspecting HTML elements / JavaScript

debugging Google Chrome, Safari, IE9

Device or emulator for testing your application Mac (iOS Simulator), iPhone, iTouch, iPad if targeting iOS devices Android device or Android Emulator

Page 23: Building Mobile Web Apps using ASP.NET MVC, HTML5, & jQuery Mobile

jQuery Mobile

Getting Started Create a regular web application Include references to jQM CSS and JS files

<link href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" rel="stylesheet" type="text/css" />

<script src="http://code.jquery.com/jquery-1.7.1.min.js" type="text/javascript"></script>

<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js" type="text/javascript"></script>

Include viewport reference<meta name="viewport" content="width=device-width, initial-scale=1" />

Create markup using HTML5 data-* attributes to define page, header, content, and footer

Page 24: Building Mobile Web Apps using ASP.NET MVC, HTML5, & jQuery Mobile

jQuery Mobile

Demo:“Mobify” Chibog Reviews

Page 25: Building Mobile Web Apps using ASP.NET MVC, HTML5, & jQuery Mobile

Conclusion

ASP.NET MVC + jQuery Mobile is a flexible, full-featured framework for building mobile web apps that target multiple platforms and form factors

Investment and brand behind jQuery Mobile puts it in a good position to be the de facto standard framework

Web developers can easily transition to mobile development

Page 26: Building Mobile Web Apps using ASP.NET MVC, HTML5, & jQuery Mobile

Resources

ASP.NET MVC - http://www.asp.net/mvc

jQuery Mobile – http://jquerymobile.com

My blog – http://joncortez.azurewebsites.net

Page 27: Building Mobile Web Apps using ASP.NET MVC, HTML5, & jQuery Mobile

Q & A

Questions?