cross-platform mobile development: choices and limitations
DESCRIPTION
A look at current tools available to build mobile apps that run on multiple platforms using a common code base with emphasis on Titanium, PhoneGap and HTML5.TRANSCRIPT
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!