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/etrjj.bbdevconf@eleganttechnologies.com

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