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

2. Agenda
 Introduction
 ASP.NET MVC
 Mobile Development
 jQuery Mobile
 Conclusion
 Q&A

3. 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: jcortez@gmail.com
 LinkedIn: http://www.linkedin.com/in/jcortez

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

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

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

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

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

9. ASP.NET MVC
MVC Design Pattern
Controller
Model View

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

11. ASP.NET MVC
Demo:
Your first ASP.NET MVC app

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

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

14. Mobile Development
US Smartphone Market Share (Jun, 11)
RIM
iOS
Android
WM6/WP7
Palm
Other

15. Mobile Development
Native Client Mobile Web
Monetization Skills Transfer
Offline Multiple Platforms
Performance No Deploy/Update
Device Features Run on Desktop

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

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

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

19. Mobile Development
 Other approaches
 Mono Touch / Mono for Android
 PhoneGap
 Appcelerator

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

21. jQuery Mobile
 Top 10 Features
1. Built on jQuery core for familiarity
2. Lightweight (~ 20K download size)
3. HTML Markup Configuraton – do a lot before writing any JavaScript
4. Progressive Enhancement – core functionality works on all base platform
5. Automatic Initialization – based on data-* attributes in HTML5
6. Accessibility – based on WAI-ARIA
7. Touch and mouse event support
8. UI Widgets – great selection of native looking controls
9. Themed Framework – support for alternative CSS 3.0 based themes
10. Broad Platform Support – works on a variety of smartphone and tablet
devices

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

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

24. jQuery Mobile
Demo:
“Mobify” Chibog Reviews

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

26. Resources
ASP.NET MVC - http://www.asp.net/mvc
jQuery Mobile – http://jquerymobile.com
My blog – http://joncortez.azurewebsites.net

27. Q&A
Questions?