View
1
Download
0
Category
Preview:
Citation preview
Frameworks for developing cross platform
mobile apps (and why I used jQueryMobile)
Rob Newman2011-05-20
1
http://www.flickr.com/photos/oskay/365607662
2
Web or Native Apps?Web App Native App
Pros
Cons
Simpler deployment & updates; known tech; cheaper to maintain; access to GPS; cross
platform
Faster execution; access to address book,
accelerometer, audio & camera; App Store
Slower to execute; debugging difficult; limited
access to hardware; no app store
App Store review process; more complex;
higher cost of dev process
http://www.slideshare.net/akosma/mobile-web-rising
3
Market stats
• In March 2010, 1.96% of all web traffic worldwide was using mobile browsers
• As of February 2011, this had increased to 4.7%
• Now > 5 billion mobile web users, of which 31% access the web on their phone
4
http://thenextweb.com/mobile/2011/01/06/the-great-rise-of-the-mobile-web/
5
http://thenextweb.com/mobile/2011/01/06/the-great-rise-of-the-mobile-web/
6
Frameworks• iUI
• jQTouch *
• WebApp.net
• iWebKit
• SproutCore/Cappuccino
• Yahoo! Blueprint
• Ext *
• Sencha Touch *
• jQueryMobile
• Mobile Web Framework (MWF)
• Quickconnect
• Dojo Mobile
• Zepto.js
• Xui
• Jo
• BaseJS
• LimeJS
• Mobl
• etc, etc...
* Sencha: http://www.sencha.com/
7
Lots of similarities...
• Global CSS to control look & feel
• Global JS for functionality
• Semantic layout (body > div > ul > li)
8
But some differences...
• Different handsets have different features
• e.g. the iOS ‘pinch-zoom’
• Hard to have a high-end ‘write once, run everywhere’ library for mobile devices
9
jQueryMobile (JQM)
http://jquerymobile.com
“Delivering top-of-the-line JavaScript in a unified User
Interface that works across the most-used smartphone web browsers and tablet form
factors.”
10
Why I picked jQueryMobile
• Documentation
• Supports maximum number of handsets
• Seamless integration with jQuery
• Excellent online support
• Solid AJAX API for JSON parsing
• Tie in with Python’s Django:
• http://code.google.com/p/django-jqmobile/
11
Supported devices
• Android 1.6-2.3
• HTC Incredible (2.2)
• Motorola Droid (2.2)
• Nook Color (2.1)
• Google G1 (1.6)
12
Supported devices cont.
• Blackberry 6
• Torch & Style
• Blackberry 5
• actively debugging this browser
• Firefox Mobile (Fennec)
13
Supported devices cont.
• iOS 3.x-4.x
• All iOS test devices, including iPhone, iPod touch & iPad
• MeeGo: No test devices for this platform
• Opera Mobile/Mini
• Opera Mobile 10.1 & Opera Mini on Android
14
Supported devices cont.
• Palm/HP WebOS
• Palm Pixi, Pre & test devices running 1.4
• Samsung Bada: No test devices for platform
• Symbian (Nokia S60): actively debugging this browser
15
Supported devices cont.
• Windows Phone 7
• support WP7 and testing on a HTC Surround phone.
• Basic, baseline experience
• functional on any device that understands HTML, e.g. the Amazon Kindle supports most features
16
Overview
• Clean, semantic HTML (uses HTML 5)
• Progressive enhancement:
• unobtrusively transform semantic page into rich, interactive experience
• Accessibility integrated (WAI-ARIA)
17
Overview cont.
• Lightweight (12k)
• Automatic initialization:
• HTML5 data-role attributes in the markup trigger page widgets
• New events to streamline input (touch, mouse, or cursor focus-based input)
• Built-in theming and ThemeRoller app
18
Anatomy of a page
19
Theming
• Object oriented CSS framework
• Similar to jQueryUI
• Uses CSS3 properties:
• rounded corners, box & text shadows, gradients vs. images
• very lightweight, low overhead
20
Theming cont.
• 5 default themes:
• a - Black (1st level)
• b - Blue (2nd level)
• c - Snow (baseline level)
• d - Gray (alt 2nd level)
• e - Yellow (accent swatch)
• Very structured semantic layouts/widgets:
21
Theming cont.
• Bars:
• Content Blocks:
22
Theming cont.
• Lists:
23
Theming cont.• Buttons:
• Buttons in bars: auto-match parent swatch
24
Theming cont.• Putting it all together, includes:
• Global “Active” state for toggling buttons
• Standardized icon sets
25
My first “app”
• http://m.anf.ucsd.edu
• Target audience: station engineers
• Displays near-realtime datalogger & sensor stats from > 400 deployed stations
• Integration with Google Maps v3 (geolocation)
26
27
28
Bridging the web/native gap
• Build your app once with HTML5, CSS & JS
• ‘Wrap it’
• Deploy to multiple platforms
• Or use their ‘build’ service: write app, upload, returned app-store ready for iOS, Android, Palm, Symbian, Blackberrry & more...
• PhoneGap, RhoMobile, Appcelerator
29
Take homes...
• Test in multiple devices
• Use a bug database
• Know your audience
• Scope your target
• http://www.opera.com/smw/
http://www.slideshare.net/akosma/mobile-web-rising
30
What now?• June 4th
AT&T Developer ProgramMobile App Hackathon(Sponsored by Qualcomm)http://www.eventbrite.com/event/1602911351
• Focus on networking, learning, and hacking
• Reps from Sencha, Apigee, PhoneGap & AppMobi will be there to help you code (plus Amazon)
• Dev phones provided
31
Recommended