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.

1. Rohit Nayak Cross-platform mobile development choices and limitations Talentica

3. Cross-platform approaches

4. Native app landscape, iPhone

5. Titanium

6. PhoneGap

7. Other options

9. All data based on Gartner reports

10. 2010 Q2

11. 2010 Q3

12. Rise and fall

14. Social Networks / Enterprise Clients

15. Standard skillsets

16. Open source/free

17. Low-risk!

18. US/Europe market

20. Cross-compiled Native Apps

21. Packaged native browser control based

22. Hand-crafted browser control based

25. XCode graphical IDE

26. iPhone simulator

27. Interface (UI) builder

28. MVC, Event-driven, Navigation stack

29. iPhone Developer Program

31. Message passing

32. No GC on iPhone

34. Apple Push

36. Build separately for targets

37. Target is a native app

38. Titanium by Appcelerator

39. Rhomobile

41. Javascript

42. Titanium Developer

44. Precompiles to “symbols”

45. Invokes native SDK compiler

46. Android: .class, javac

47. iPhone: .o, gcc

49. Download/install Titanium

50. Install KitchenSink reference app

51. Create new project

52. Test on simulator

53. Test on device

55. Gallery

56. Camera

57. REST

59. Keeping pace: iPhone 4.0

60. Device support

61. iPhone bias

62. No intrinsic design patterns

64. Native apps, MVC

65. Model/Controller in Ruby, byte code interpreted on device

66. Views (erb/HTML/CSS)

67. Views rendered in embedded browser

69. Most platforms (Blackberry WIP)

70. C/C++ (Eclipse)  Mosync IL

71. Either interpreted runtime or native code

73. Use device’s native browser control

74. Extend it for new functionality

75. Show startup HTML file

76. Device functionality via JS extensions

78. HTML/JS/Ajax

79. Eclipse Based dev env

80. Device specific libraries

82. Import phonegap.js, .jar

83. import com.phonegap.*

84. extends DroidGap

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

87. Android SDK (ADT)

88. Apache Ant

89. Ruby

91. Javascript queue/marshalling

92. UIWebView integration

94. PhoneGap.run_command = function() {varuri = [], dict = null;for(vari =1; i < args.length; i++) {vararg = args[i]; if (arg == undefined || arg == null) arg =''; if(typeof(arg) =='object') dict = arg; else uri.push(encodeURIComponent(arg)); } varurl ="gap://" + args[0] +"/" + uri.join("/"); if (dict != null){varquery_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; }

95. 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 commandhandlerabove ?arg1Name=ar... - These are the arguments, encoded much like a URL utilising GET

96. gap://Notification.alert?message=Hello%20m10&title=m10.indic%20threads&buttonLabel=Welcome -(BOOL)webView:(UIWebView *)theWebViewshouldStartLoadWithRequest:(NSURLRequest *)request /PhoneGapLib/Classes/Notification.h /PhoneGapLib/Classes/Notification.m

97. Extending PhoneGap Js snippets Navigator.argcounter.numOfArgs(“arg1”,”arg2”,”arg3”) PhoneGap.exec(successCallback, errorCallback, “Argcounter", “numArgs", arg1, arg2, arg3); .h file @interface Argcounter : PhoneGapCommand { /* class specific variables */ } -(void) numOfArgs:(NSMutableArray*)arguments withDict:(NSMutableDictionary*)options; @end

98. Extending PhoneGap - 2 .m file @implementation Argcounter -(void) numOfArgs:(NSMutableArray*)arguments withDict:(NSMutableDictionary*)options{ NSUIntegerargc = [arguments count]; /* No arguments to work with */ if( argc <2 ) return; /* Loop through all the arguments in the NSMutableArray */ for(inti=0; i < argc; i++){ NSLog(@"%i - %s", i, [arguments objectAtIndex:i]); }/* Simply inject a javascript alert() back into the UIWebView */ [super writeJavascript:[NSStringinitWithFormat:@"alert('%i');", argc]]; } @end

100. Mobile Safari

101. jQuery, jQTouch, SenchaTouch

102. Image libraries, transitions

103. Webkit, back-button

104. Some device support

105. Storage

107. HTML/JS/CSS stack

108. Webkit, JS, Java/JS bridge

109. AIR/Flash by Adobe

110. Paid tools, Flex/JS

111. MonoTouch by Novell

112. Paid tools/runtime, Mac, iPhone (Android)

114. PhoneGap (native browser)

115. Titanium (cross-compiled native)

116. Native Apps

117. Multiple Approaches

118. Low risk

120. Native look and feel

121. Payment methods

122. Push technology

123. Not using underlying mobile architecture