This document compares two cross-platform mobile app development frameworks: PhoneGap and Titanium. It provides an overview of each framework, how they allow developing apps across platforms, and their advantages and limitations. Code examples are shown to illustrate app development in each.

1. Cross Platform Mobile ApplicationsBy Rohit GhatolContact me – rohit.ghatol@synerzip.comrohitsghatol@gmail.com

2. 2IntroductionRohit GhatolProject Manager @ Synerzip

3. Associate Architect @ QuickOffice Inc

4. GTUG Manager

5. Certified Scrum Master

6. Corporate Trainer (Agile and Technical)

7. Was part of OpenSocial at Google3TopicsOverviewUnderstanding Mobile AppsCross Platform Mobile App DevelopmentPure HTML/JavaScript – PhoneGapInterpreted JavaScript – TitaniumNative Mobile App DevelopmentHybrid Mobile App DevelopmentComparison between PhoneGapVs TitaniumConclusionQ & A

8. 4OverviewThe process of developing Applications for various mobile platform using common source code with little or no change to the common source.This presentation focuses on Comparing two frameworks each taking a different approach to solve the above problem.We will Compare PhoneGapVsTitanium .

9. 5Understanding Mobile Apps

10. 6Reaching Mobile Users

11. 71. Mobile FeaturesComplete Feature SetMostly Feature Sub Set

12. 82. Tablet FeaturesComplete Feature SetAlmost CompleteFeature Set

13. 93. User InteractionTouch basedAccelerometerTraditional Compass

14. 10e.gLayar Application

15. 114. Location awareCan be Location Aware but approximateLocation Aware and highly accurate

16. 125. SensorsHandy Camera and Voice RecordingUpcoming NFC (Near Field Communication) turning phone into Credit Card, Access Card, Business Card Exchanger

17. 13e.g Shopping ApplicationsScan a product’s barcode to know if it has the lowest price. If not, then navigate to a store which has the lowest price

18. 146. Push NotificationsPush NotificationNotifying the User proactively

19. 15Challenges in building Mobile Applications

20. 161. OS FragmentationWindows 7Fragmentation

21. 172. Multiple Teams/ProductWindows 7Multiple Teams/Products

22. 183. Uniform User ExperienceWindows 7Uniform User Experience

23. 194. Feature FragmentationFeature Fragmentation

24. 20Types of Mobile App DevNative Mobile AppsCross Platform Mobile AppsHybrid partly Native partly Cross Platform

25. 21Native Mobile AppsWhen ToHigh Performance Apps

26. Heavy on OS and Device Features

27. Complex N/W comm.

28. Canvas based Apps

29. Only Few PlatformsWhen Not ToPerformance is not the main criteria

30. More or less Replicates Web Apps with few device feature

31. Standard Restful

32. Widget based apps

33. Many Platforms22Cross Platform Mobile AppsWhen ToPerformance is not the main criteria

34. More or less Replicates Web Apps with few device feature

35. Standard Restful

36. Widget based apps

37. Many PlatformsWhen Not ToHigh Performance Apps

38. Heavy on OS and Device Features

39. Complex N/W comm.

40. Canvas based Apps

41. Only Few Platforms23Cross Platform Mobile AppsWhen ToTime to market is critical

42. Saving Cost is criticalWhen Not To

43. 24Hybrid Mobile AppsWhen ToWhy ToFairly Simple UI

44. Complex Backend

45. Quite few platforms

46. E.gShareFile

47. Recommended way - PhoneGap Plugin

48. Some parts of app are common

49. Rest parts are different

50. Use Cross Platform to develop common part

51. Use Native to develop the weight lifting parts25Cross Platform Mobile App Development

52. 26Cross Platform StrategiesCross Platform Source CodeCommon Platforme.gWebKitMapping to NativeTitanium MobilePhoneGap

53. 27Common Platform Approach

54. 28Modern BrowsersAll new Smart Phones come with modern browsers, which have better support for HTML5/CSS3 specs

55. 29WebViewsAll of these smart phones supports using these modern browsers as embedded views (aka WebViews)

56. 30JavaScript to native and backAll these browser engine (most common being webkit) support Javascript to talk to native code and backNative Code(Java/C++/ObjC)HTML/JavascriptJSON packets

57. 31Hybrid ApplicationsHTML/Javascript application loads Google Maps and talks to the native code to gain access to GPS locationNative Code(Java/C++/ObjC)HTML/JavascriptGPS Location

58. 32PossibilitiesLimitless PossibilitiesExpose Camera, Accelerometer, GPS, any of the phones sensors to javascriptInstead of just building Browsed Based applications augment with more phone features

59. 33DevelopmentHTML/CSS Application uses Common API exposing device features

60. 34DevelopmentSample code

61. 35Mapping to Native

62. 36ConceptCommon API set is provided by framework

63. Application is written using this common api set

64. HTML/CSS may be supported or may not be supported. Titanium prefers native UI instead of HTML/CSS UI, Rhodes prefers HTML/CSS UI

65. Phone Features are access liked common api set (this is similar to that in PhoneGap)37DevelopmentTwo API SetsOne for UI * (Specific to Titanium Mobile)Create WindowsCreate Dialogs…….One for Phone FeaturesSame as PhoneGapAccess CameraAccess GPS……

66. 38DevelopmentUI API Set

67. 39DevelopmentUI API Set

68. 40IssuesCommon API set across platforms is always minimumE.g IPhone as a widget, which Android not haveFragmentation of the API itself. What is platform specific and not part of Common API comes in Platform specific api?

69. 41Mobile App Dev FrameworksCommon PlatformPhoneGapMapping to NativeTitanium MobileRhodes Mobile

70. 42Compare Screens (IPhone)PhoneGapTitanium Mobile

71. 43Compare Screens (Android)PhoneGapTitanium Mobile

72. 44Open SourceBSD LicenseMIT License

73. 45PhoneGapOnly platform to support 6 Platforms46PhoneGapStandards based and extended

74. 47

75. 48PhoneGap Features

76. 49PhoneGapPrerequistesNeed to be acquainted with Android, IOS, BlackBerry, WebOS

77. Need to be expert at HTML/Javascript or framework like GWT

78. Need to be acquainted with JavaScript libraries like

79. Jquery

80. script.aculo.us

81. Prototype

82. Etc

83. Or Ajax framework like GWT

84. Need different project for each platform, inject PhoneGap code in each project

85. PhoneGap has no IDE, use Eclipse for Android and Xcode for IPhone50Demo Screens - IPhone

86. 51Demo Screens - Android

87. 52Challenges and AdvantagesHTML based UI is the biggest Challenge as well as Advantage

88. Same UI can be used for Web and Mobile and even Desktop

89. Promising Framework

90. GWT – Used by Spring Roo for Enterprise Application Development

91. jQueryMobile – Based on legendary Jquery and now features

92. Multipage Template

93. Page Slide Transitions

94. Dialogs

95. Toolbars

96. Forms

97. Lists53

98. 54Apache LicenseAppcelerator Titanium SDK

99. Titanium Module SDK

100. Appcelerator Titanium SDK

101. Titanium Module SDKPaid ModulesCommerce Modules

102. Communication Modules

103. Analytics Module

104. Media Modules55Titanium Mobile

105. 56Titanium MobileTitanium JavaScriptInterpreted ByWekitJavascriptCoreMozilla RhinoIPhoneAndroid

106. 57Titanium Architecture

107. 58Titanium PrerequistesNeed to be acquainted with Android, IOS programmingNeed to know JavaScriptUse Titanium Mobile IDE to configure projects and use Text IDE to edit the code (unlike PhoneGap, there is only one project for all platforms)

108. 59Demo Screens - IPhone

109. 60Demo Screens - Android

110. 61Challenges and AdvantagesBeing Native is the biggest strengthLimited cross platform api is a weaknessPlatform specific api leads to fragmentation within code

111. 62Native Mobile App Development

112. 63Native App DevelopmentBasically you need to hire experts who canBuild Android, IOS, BB, BlackBerry and Windows mobile appsDevs should have experience to deploy apps on marketDevs should have experience on various devicesQA should know how to automate things on devices/emulatorPlan for risks if this is your companies first Mobile App deployment

113. 64Hybrid Mobile App Development

114. 65Hybrid App DevelopmentHave Web Developers for Common UIHave native code experts for heavy weight liftingUse frameworks likePhoneGapPlugin Development framework to glue the above two piecesMeasure at every milestone to keep track of effect of changesUse Automation to regress every layer

115. 66ShareFile Storyas

116. 67ComparisonTitanium MobileGives out native app

117. API is more proprietary

118. UI has Limitations

119. UI will be fast

120. Much better User Experience

121. Portal Code can not be reused

122. Extensions are possible

123. Limited support for HTML/JavascriptPhoneGapGives out a mobile web appAPI is less proprietaryUI possibilities are unlimitedUI could be slowUser Experience will get better with enhancementsPortal Code can be reusedExtensions are possible and easy to implementMore will come out of discussion, comments are welcome

124. 68ConclusionWebkit is the next Virtual Machine. Maybe Going where Java could not goHTML 5, CSS 3 and Javascript is future,but not ready just yetHTML 5, CSS3 and Javascript to lessen the fragmentationHTML 5 will compete with native components

125. 69Code Walkthrough - PhoneGap

126. 70Digging Deeper (Android)Instead of extending a Activity, we extend DroidGapDroidGap internally uses a WebView to show local/remote HTML/JavaScript/CSSThis WebView has hooks toCall Java from JavaScriptAnd Vice a VersaMore like building Web 2.0 Applications But also calling some java scripts which allow accessing native mobile resources e.g. Geo, Database, File System, etc

127. 71Digging Deeper

128. 72Bootstrapping phonegap<html> <head> <title>Phone Gap</title> <script type="text/javascript" src="scripts/phonegap.js"></script> <script>…</script> </head> <body onload=”init();"> <img id="map" /> </body></html>

129. 73Bootstrapping phonegapfunction init() {document.addEventListener('deviceready’,loadMap,false);}

130. 74Bootstrapping phonegapfunction loadMap() { var successCallback= function(position) { var coords = position.coords; var url = "http://maps.google.com/maps/api/staticmap?center=" + coords.latitude + "," + coords.longitude ; document.getElementById('map').setAttribute('src',url); }; var failureCallback = function(e) { alert('Can\'t retrieve position.\nError: ' + e); }; //Fetch Coordinate Asynchronously navigator.geolocation.getCurrentPosition(successCallback, failureCallback );}

131. 75PhoneGap WalkthroughLets see a Live Demo

132. 76Phone Gap ExtensionAdding new apis to PhoneGap is SimpleSay Dropbox like Sync is exposed via javascript apiEach Platform to have Dropbox like Sync native code called from javascriptReferences - http://wiki.phonegap.com/w/page/36752779/PhoneGap-PluginsAuthor – Rohit Ghatol

133. 77Code Walkthrough – Titanium Mobile

134. 78Directory Structure

135. 79App.js (entry point)var tabGroup = Titanium.UI.createTabGroup();var win1 = Titanium.UI.createWindow({ title: 'Search', url: 'search.js'});var tab1 = Titanium.UI.createTab({ window:win1, title:'Search Alternatives’});tabGroup.addTab(tab1); tabGroup.addTab(tab2); tabGroup.open();

136. 80search.js (building UI)var window = Titanium.UI.currentWindow;var search = Titanium.UI.createSearchBar({height:43, top:0});var actInd = Titanium.UI.createActivityIndicator({ height:50,});var tableview = Titanium.UI.createTableView({ top:50});window.add(search);window.add(tableview);

137. 81search.js (Ajax Call)var xhr = Titanium.Network.createHTTPClient();xhr.onload = function(){ actInd.hide(); var doc = xhr.responseText;var json = eval('('+doc+')'); var data = []; //…. Load data in data // provide the data to table to populate the table tableview.setData(data);};

138. 82search.js (Event handling)//send ajax request to fetch altrnatives for searchTextfunction searchAlternatives(searchText){ xhr.open('GET','http://api.alternativeto.net/software/'+searchText+'/?count=15');xhr.send();}//start search when user hits enter on search boxsearch.addEventListener('return', function(e){ actInd.show(); searchAlternatives(e.value);});

139. 83Titanium WalkthroughLets see a Live Demo

140. 84Questions?www.synerzip.com Hemant Elhence, hemant@synerzip.com469.322.0349Agile Software Product Development Partner

141. 85Synerzip in a Nut-shellSoftware product development partner for small/mid-sized technology companiesExclusive focus on small/mid-sized technology companiesBy definition, all Synerzip work is the IP of its respective clientsDeep experience in full SDLC – design, dev, QA/testing, deploymentTechnology and industry domain agnosticDedicated team of high caliber software professionals Seamlessly extends client’s local team, offering full transparencyNOT just “staff augmentation”, but provide full mgmt supportActually reduces risk of development/deliveryExperienced team - uses appropriate level of engineering disciplinePractices Agile development – responsive, yet disciplinedReduces cost – dual-shore team, 50% cost advantageOffers long term flexibility – allows (facilitates) taking offshore team captive – aka “BOT” option

142. 86Our Clients

143. 87Questions?www.synerzip.com Hemant Elhence, hemant@synerzip.com469.322.0349Agile Software Product Development Partner