Jon CortezRegional Practice Director
Custom App Dev & MobilityNeudesic
building mobile web apps using
ASP.NET MVC, HTML5 &jQuery Mobile
Agenda
Introduction
ASP.NET MVC
Mobile Development
jQuery Mobile
Conclusion
Q & A
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
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
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
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
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
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
ASP.NET MVC
MVC Design Pattern
Controller
Model View
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
ASP.NET MVC
Demo:Your first ASP.NET MVC app
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
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
Mobile Development
US Smartphone Market Share (Jun, 11)
RIMiOSAndroidWM6/WP7PalmOther
Mobile Development
Mobile WebNative Client
Skills TransferMultiple PlatformsNo Deploy/UpdateRun on Desktop
MonetizationOffline
PerformanceDevice Features
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
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
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
Mobile Development
Other approaches Mono Touch / Mono for Android PhoneGap Appcelerator
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
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
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
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
jQuery Mobile
Demo:“Mobify” Chibog Reviews
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
Resources
ASP.NET MVC - http://www.asp.net/mvc
jQuery Mobile – http://jquerymobile.com
My blog – http://joncortez.azurewebsites.net
Q & A
Questions?