cross platform development strategies with vendor review and phonegap case study
DESCRIPTION
State of the technology overview regarding options and strategies, followed by a case study using PhoneGapTRANSCRIPT
Beyond the BlackBerry Smartphone: Using PhoneGap and Other Strategies to Deploy Applications Across Multiple Devices
November 10th, 2009JJ RohrerPresidentElegant Technologies, LLCeleganttechnologies.com/blog/etr
Agenda
• Cross Platform Problem Space
• Vendors, Options, Strategies
• Case Study - Web, PhoneGap, & Widgets
• Recommendations
Intro
• About Me
• MBA + MS/CS = Trouble
• Experimenting
• iPhone WebApp + Staff Pick = Big Head
• iPhone Native
• Android
• BlackBerry Storm
• N60
• Palm Pre
• Need Better Way
• So - Let’s look at cross-platform strategies
4
Cross Platform Problem Space
Cross Platform Problem Space
• Cross Platform Desktop Development as Bad Model
• Cross Browser Web 2.0 Development as Bad Model
• Cross Platform for Mobile is New(ish) Beast
Cross Platform Problem SpaceCross Platform Desktop Development as Bad Model
• Usually...
• Big framework
• J2ME, Adobe Air, GTK
• Non-native UI
• Swing, TCL/TK
• Common Language Output
• C/C++, Java, Ruby as executable
• Trades efficiency in execution for code commonality
• Bad Paradigm for Mobile because...
• Not efficient
• Can’t reach all platforms
Cross Platform Problem SpaceCross Browser Web 2.0 Development as Bad Model
• Big framework
• JQuery, Yahoo toolkit, Adobe Air
• Minimal compatibility with mobile web browsers
• Non-native UI
• A common web UI will look out of place on all devices
• WebApps are bad for mobile because...
• Breaks “App” paradigm
• Loses device specific functionality
• Push, contacts, accelerometers, etc.
Cross Platform Problem SpaceCross Platform for Mobile is New(ish) Beast
• Small is beautiful
• Limited memory, screen, cpu
• Real UI Differences between platforms
• Different Look & Feel (Mac vs. PC)
• Whole Different Metaphors! (Tabs vs. Cards)
• Different icon sizes, orientations, buttons, etc.
• Real Language Differences
• Java is fairly common, but not ubiquitous
• Android’s OS is way different than iPhone & BlackBerry
• iPhone only has ObjectiveC, C/C++, & JS in Webview
9
Vendors, Options, Strategies
Vendors, Options, StrategiesCross Platform for Mobile is New(ish) Beast
• Titanium (Appcelerator)
• Rhomobile
• J2ME Polish
• Pure WebApp
• Web, PhoneGap, Widgets
• Flash 10.1
11
Vendors, Options, StrategiesCapabilities Matrix
Cost BB iPhone PalmWebOS
S60 Android Win Mobile
Safari Chrome Firefox IE 7 Comments
• Titanium (Appcelerator)
$$ X X
• Rhomobile $$ X X X X X +Ruby
• J2ME Polish $$ X X X J2ME w/ macros
• Pure WebApp - x X x x X x X X X X - Limited access to native
• Web, PhoneGap, Widget
- x X X X X X X X X X - Immature+ Unlimited customization
• Flash 10.1(pre-beta)
$$ X X X X X X X X X X + Adaptive strategies
12
Case Study - Web, PhoneGap, & Widgets
13
• Write Once - Run Many
• Keep it simple
• Real-World use
• Start with PhoneGap, or derivative
13
Case Study - Web, PhoneGap, & Widgets Objectives
Case Study - Web, PhoneGap, & Widgets What is PhoneGap?
• Open Source
• Wraps a web view with native code
• You write your app in HTML + JavaScript
• Provides conduits to device features
15
• PhoneGap has its own JavaScript API
• Each platform shares some common JavaScript, plus some custom JavaScript
• Native code creates a web view and creates conduits between that web view and the device’s features.
• Contacts
• GPS, etc.
• Developer writes a single web page
• Initial testing in desktop browser
• Final testing on the device
15
Case Study - Web, PhoneGap, & Widgets How Does it Work
16
Case Study - Web, PhoneGap, & Widgets App - Quadratic Equation Solver
• Quadratic Equation: ax^2 + bx + c = 0
• Easy JavaScript
• No persistence
• No native device dependencies (GPS, contacts, etc.).
• Meaningful on the web, and on mobile devices
• Nice control point -
• Is there a market for something this simple?
• It shouldn’t get any easier than this
17
Case Study - Web, PhoneGap, & Widgets Safari
18
Case Study - Web, PhoneGap, & Widgets Safari to Devices
19
Case Study - Web, PhoneGap, & Widgets Android
PhoneGap
20
Case Study - Web, PhoneGap, & Widgets Nokia S60
Widget
21
Case Study - Web, PhoneGap, & Widgets Palm Pre (Web OS)
~Widget
22
Case Study - Web, PhoneGap, & Widgets iPhone
PhoneGap
23
Case Study - Web, PhoneGap, & Widgets BlackBerry
Widget
24
• Approach works for lots of the platforms
• This app is currently on iPhone, Android, Ovi app stores
• Unexpected Benefit
• Created a little web-based app emulator as sales tool
• Used Dashcode as WYSIWYG editor
• Writing ‘Fixer’ code to change Dashcode implementation with cross-platform implementation
24
Case Study - Web, PhoneGap, & Widgets What Went Well
25
Case Study - Web, PhoneGap, & Widgets What Went Badly
• Not 100% cross platform yet - but close.
• Learning the common ground of HTML between browsers
• Very difficult to work with older browsers.
• Common Storage Model (cookies vs. SQL vs. other)
• Asynchronous disconnect
• Difficult to program when one device handles something, like storage, synchronously, but another handles it asynchronously
• Lack of means to call soft numeric keypad, numlock, etc.
• Track ball vs. keypad vs. tapping = impedance mismatch
25
26
Case Study - Web, PhoneGap, & Widgets What Was Unexpected
• Accessing Device Features (GPS, Contacts, etc) is almost a solved issue
• JavaScript compatibility is a huge challenge
• Layout compatibility is also a huge challenge
• Different HTML capability
• Different Screen sizes
• Build scripts made it tolerable
• Nearly every device has a variations on themes
• Icon image (various sizes)
• Title
• Version26
27
Recommendations
RecommendationsWhat to Know...
• Know your final platforms / devices
• Desktop Browser, BlackBerry, Android, Etc.
• Know which technologies you need
• Contacts, GPS, High Speed Graphics, etc.
• Know input modes
• Numeric Keypad, QWERTY, Trackball, Rockers, etc.
• Know your aptitude towards making custom extensions
• Do you need support, or can you hack your own extensions?
• Know your budget
• Can you buy your way out of difficulty?
29
Budget Platform Access Native Technology
RespondstoMoney
RespondstoHacking
Titanium (Appcelerator)
$$ x X X
Rhomobile $$ x X X
J2ME Polish $$ x X x
Pure WebApp X
Web, PhoneGap, Widget
X x X
Flash 10.1(pre-beta)
$$ X X
RecommendationsWhat to Do...It depends...
30
Conclusion
30
Conclusion
• Know what you are getting yourself into
• Be ready to make trade-offs
• Keep watching the technologies for new developments
Thank You
10 November, 2009
JJ Rohrer
Elegant Technologies, LLC
eleganttechnologies.com/blog/[email protected]
Extra: Widget vs. PhoneGap
• Widgets are web wrappers written by the device maker
• This is like PhoneGap, except that device specific
• Not common API
• Usually very complete, robust, documented