1

Cross-platform mobile development

choices and limitations

Rohit NayakTalentica

2

Agenda

The mobile marketCross-platform approachesNative app landscape, iPhoneTitaniumPhoneGapOther optionsSummary

3

4All data based on Gartner reports

5

2010 Q2

6

2010 Q3

7

Rise and fall

1Q09 (%) 3Q10 (%) Difference

Symbian 48.8 36.6 - 12.2

Android 1.6 25.5 + 24.9

iOS 10.5 16.7 + 6.1

RIM 20.6 14.8 - 5.8

Windows 10.2 2.8 - 7.4

Linux 7 2.1 - 4.9

8

Cross-Platform Tool Criteria

SmartphonesSocial Networks / Enterprise ClientsStandard skillsetsOpen source/freeLow-risk!US/Europe market

iPhone / Android / Blackberry

9

Cross-platform Techniques

Native AppsCross-compiled Native AppsPackaged native browser control

basedHand-crafted browser control basedWeb application

10

Dev Env Distribution Pros Cons

iPhone MacObjective C

AppStore, iTunes

Uniform experience

Tight Controllearning curve

need a Mac

Android MultipleJava

Android Market,

WebOpen

Multi-vendorNon-uniform exp

StabilityFragmented

Blackberry MultipleJava App World Enterprise,

SecurityLow App Usage

Browser, Support

Symbian MultipleQT , C++ Ovi Store Market reach Support, C++,

New platform

Windows Mobile

Windows.Net

Windows Marketplace

Microsoft dev community

Very new,closed

11

iPhone Development

Mac-only, Objective-CXCode graphical IDEiPhone simulatorInterface (UI) builderMVC, Event-driven, Navigation stackiPhone Developer ProgramAppStore Deployment

12

Objective-C

Object-oriented extensions to CMessage passingNo GC on iPhone

Reference counting

13

iOS Features

Custom URLs (tel://, sms://)Apple PushIn App Purchase

14

Cross-compiled Native Apps

Single Code BaseBuild separately for targetsTarget is a native app

Titanium by AppceleratorRhomobile MoSync

15

Titanium by Appcelerator

DemoJavascriptTitanium DeveloperiPhone / Android / Blackberry

16

Titanium Internals

Preprocesses JS Precompiles to “symbols”Invokes native SDK compilerAndroid: .class, javaciPhone: .o, gccPlugin architecture

17

Installing Titanium

Install Java 1.6, Android (1.6-2.2)Download/install TitaniumInstall KitchenSink reference appCreate new projectTest on simulatorTest on deviceCreate distribution package

18

Titanium - Device APIs

Snapost AppGalleryCameraREST

API Docs

19

Titanium - Issues

Complex toolKeeping pace: iPhone 4.0Device support

iPhone biasNo intrinsic design patternsDoesn’t always work as advertised

20

Rhomobile

Supports max devicesNative apps, MVCModel/Controller in Ruby, byte code

interpreted on deviceViews (erb/HTML/CSS) Views rendered in embedded

browserSome UI elements (Tabs/Menu)

native

21

MoSync

Build toolkit with SDK, Most platforms (Blackberry WIP)C/C++ (Eclipse) Mosync ILEither interpreted runtime or native

codeNative UI?

22

Native Browser Control ++

Locally cached, privileged web appUse device’s native browser controlExtend it for new functionalityShow startup HTML fileDevice functionality via JS extensionsPhonegap

23

PhoneGap

DemoHTML/JS/AjaxEclipse Based dev envDevice specific librariesJavascript extensions

24

Creating an app

New Android 2.2 projectImport phonegap.js, .jarimport com.phonegap.*

extends DroidGap

super.loadUrl(file://android_asset/www/index.html)

index.html

25

Installing PhoneGap

Java 1.6, Eclipse 3.5Android SDK (ADT)Apache AntRubyGitBash

26

PhoneGap Internals

iPhone App FlowJavascript queue/marshallingUIWebView integrationExtending PhoneGap

27

PhoneGap.exec =function() {

PhoneGap.queue.commands.push(arguments);

if (PhoneGap.queue.timer == null)

PhoneGap.queue.timer =

setInterval(PhoneGap.run_command,10);

}

28

PhoneGap.run_command = function() {var uri = [], dict = null;for(var i =1; i < args.length; i++) {

var arg = args[i]; if (arg == undefined || arg == null) arg =''; if(typeof(arg) =='object') dict = arg; else uri.push(encodeURIComponent(arg));

} var url ="gap://" + args[0] +"/" + uri.join("/"); if (dict != null){

var query_args = [];for(varname in dict) {

query_args.push(encodeURIComponent(name) +"= " +

encodeURIComponent(dict[name])); }if (query_args.length >0) url +="?" +

query_args.join("&"); }document.location = url;

}

29

gap://CommandHandler.method?arg1Name=arg1Value&arg2Name=arg2Value

gap:// - This tells PhoneGAP that this is a command

CommandHandler. - The command handler defines the functionality – I.e Location

method - The method is a member of the commandhandler above

?arg1Name=ar... - These are the arguments, encoded much like a URL utilising GET

30

gap://Notification.alert?message=Hello%20m10&title=m10.indic%20threads&buttonLabel=Welcome

-(BOOL)webView:(UIWebView *)theWebView shouldStartLoadWithRequest:(NSURLRequest *)request

/PhoneGapLib/Classes/Notification.h

/PhoneGapLib/Classes/Notification.m

31

@interface Argcounter : PhoneGapCommand { /* class specific variables */

}-(void) numOfArgs:(NSMutableArray*)arguments withDict:(NSMutableDictionary*)options;

@end

Extending PhoneGap

.h file

Navigator.argcounter.numOfArgs(“arg1”,”arg2”,”arg3”)

PhoneGap.exec(successCallback, errorCallback, “Argcounter", “numArgs", arg1, arg2, arg3);

Js snippets

32

@implementation Argcounter -(void) numOfArgs:(NSMutableArray*)arguments withDict:(NSMutableDictionary*)options{

NSUInteger argc = [arguments count]; /* No arguments to work with */ if( argc <2 ) return; /* Loop through all the arguments in the NSMutableArray */ for(int i=0; i < argc; i++){

NSLog(@"%i - %s", i, [arguments objectAtIndex:i]); }/* Simply inject a javascript alert() back into the UIWebView */ [super writeJavascript:[NSString initWithFormat:@"alert('%i');",

argc]]; }@end

Extending PhoneGap - 2

.m file

33

Mobile Web Applications

HTML5/CSS3/Ajax Mobile SafarijQuery, jQTouch, SenchaTouch

Image libraries, transitionsWebkit, back-button

Some device supportStorage

localStorage, sessionStorage, sql database

34

Others

Java ME by OracleHTML/JS/CSS stackWebkit, JS, Java/JS bridge

AIR/Flash by AdobePaid tools, Flex/JS

MonoTouch by NovellPaid tools/runtime, Mac, iPhone (Android).Net C# apps

35

So! The Choices …

Mobile Web AppPhoneGap (native browser)Titanium (cross-compiled native)Native AppsMultiple Approaches

Low riskRight tool for the job!

36

… and Limitations

Maturity / CompatibilityNative look and feelPayment methodsPush technologyNot using underlying mobile

architectureOut-of-step with device cycles

37

Thanks!