Cross Platform Development Strategies with vendor review and PhoneGap case study

Beyond the BlackBerry Smartphone: Using PhoneGap and Other Strategies to Deploy Applications Across Multiple Devices
November 10th, 2009
JJ Rohrer
President
Elegant Technologies, LLC
eleganttechnologies.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

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 Space Cross 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 Space Cross 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 Space Cross 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

Vendors, Options, Strategies

Vendors, Options, Strategies Cross Platform for Mobile is New(ish) Beast
Titanium (Appcelerator)
Rhomobile
J2ME Polish
Pure WebApp
Web, PhoneGap, Widgets
Flash 10.1

Vendors, Options, Strategies Capabilities Matrix Cost BB iPhone Palm WebOS 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

Case Study - Web, PhoneGap, & Widgets

Write Once - Run Many
Keep it simple
Real-World use
Start with PhoneGap, or derivative
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

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
Case Study - Web, PhoneGap, & Widgets How Does it Work

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

Case Study - Web, PhoneGap, & Widgets Safari

Case Study - Web, PhoneGap, & Widgets Safari to Devices

Case Study - Web, PhoneGap, & Widgets Android PhoneGap

Case Study - Web, PhoneGap, & Widgets Nokia S60 Widget

Case Study - Web, PhoneGap, & Widgets Palm Pre (Web OS) ~Widget

Case Study - Web, PhoneGap, & Widgets iPhone PhoneGap

Case Study - Web, PhoneGap, & Widgets BlackBerry Widget

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
Case Study - Web, PhoneGap, & Widgets What Went Well

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

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
Version

Recommendations

Recommendations What 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?

Recommendations What to Do... It depends... Budget Platform Access Native Technology Responds to Money Responds to Hacking 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

Conclusion

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/etr
[email_address]

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

http://www.slideshare.net	71
http://www.eleganttechnologies.com	54
http://www.combatdev.com	4
http://webcache.googleusercontent.com	2
http://cc.stackexchange.com	1

Cross Platform Development Strategies with vendor review and PhoneGap case study

by Elegant Technologies, LLC on Nov 18, 2009

Accessibility

Categories

Tags

Upload Details

Usage Rights

5 Embeds 132

Statistics

Cross Platform Development Strategies with vendor review and PhoneGap case study — Presentation Transcript