1. www.synerzip.com Cross Platform Mobile Applications By Rohit Ghatol Contact me – rohit.ghatol@synerzip.com rohitsghatol@gmail.com

2. www.synerzip.com 2 Introduction Rohit Ghatol Project Manager @ SynerzipSynerzip Associate Architect @ QuickOffice IncQuickOffice Inc GTUG Manager Certified Scrum Master Corporate Trainer (Agile and Technical) Was part of OpenSocial at Google

3. www.synerzip.com 3 Topics Overview Understanding Mobile Apps Cross Platform Mobile App Development Pure HTML/JavaScript – PhoneGap Interpreted JavaScript – Titanium Native Mobile App Development Hybrid Mobile App Development Comparison between PhoneGap Vs Titanium Conclusion Q & A

4. www.synerzip.com 4 Overview The 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 PhoneGap Vs Titanium.

5. www.synerzip.com 5 Understanding Mobile Apps

6. www.synerzip.com 6 Reaching Mobile Users

7. www.synerzip.com 7 1. Mobile Features Complete Feature SetMostly Feature Sub Set

8. www.synerzip.com 8 2. Tablet Features Complete Feature SetAlmost Complete Feature Set

9. www.synerzip.com 9 3. User Interaction Touch based Traditional Accelerometer Compass

10. www.synerzip.com 10 e.g Layar Application

11. www.synerzip.com 11 4. Location aware Location Aware and highly accurate Can be Location Aware but approximate

12. www.synerzip.com 12 5. Sensors Handy Camera and Voice Recording Upcoming NFC (Near Field Communication) turning phone into Credit Card, Access Card, Business Card Exchanger

13. www.synerzip.com 13 e.g Shopping Applications Scan a product’s barcode to know if it has the lowest price. If not, then navigate to a store which has the lowest price

14. www.synerzip.com 14 6. Push Notifications Push Notification Notifying the User proactively

15. www.synerzip.com 15 Challenges in building Mobile Applications

16. www.synerzip.com 16 1. OS Fragmentation Windows 7 Fragmentation

17. www.synerzip.com 17 2. Multiple Teams/Product Windows 7 Multiple Teams/Products

18. www.synerzip.com 18 3. Uniform User Experience Windows 7 Uniform User Experience

19. www.synerzip.com 19 4. Feature Fragmentation Feature Fragmentation

20. www.synerzip.com 20 Types of Mobile App Dev 1.Native Mobile Apps 2.Cross Platform Mobile Apps 3.Hybrid partly Native partly Cross Platform

21. www.synerzip.com 21 Native Mobile Apps When To High Performance Apps Heavy on OS and Device Features Complex N/W comm. Canvas based Apps Only Few Platforms When Not To Performance is not the main criteria More or less Replicates Web Apps with few device feature Standard Restful Widget based apps Many Platforms

22. www.synerzip.com 22 Cross Platform Mobile Apps When To Performance is not the main criteria More or less Replicates Web Apps with few device feature Standard Restful Widget based apps Many Platforms When Not To High Performance Apps Heavy on OS and Device Features Complex N/W comm. Canvas based Apps Only Few Platforms

23. www.synerzip.com 23 Cross Platform Mobile Apps When To Time to market is critical Saving Cost is critical When Not To

24. www.synerzip.com 24 Hybrid Mobile Apps When To Fairly Simple UI Complex Backend Quite few platforms E.g ShareFile Recommended way - PhoneGap PluginPhoneGap Plugin Why To Some parts of app are common Rest parts are different Use Cross Platform to develop common part Use Native to develop the weight lifting parts

25. www.synerzip.com 25 Cross Platform Mobile App Development

26. www.synerzip.com 26 Cross Platform Strategies Common Platform e.g WebKit Common Platform e.g WebKit Mapping to Native PhoneGap Titanium Mobile Cross Platform Source Code Cross Platform Source Code

27. www.synerzip.com 27 Common Platform Approach

28. www.synerzip.com 28 Modern Browsers Mobile OSBrowser AndroidWebkit based iPhoneWebkit based BlackBerry 6.0 +Webkit based Window Phone 7IE 7 based * WebOSWebkit based NokiaWebkit based All new Smart Phones come with modern browsers, which have better support for HTML5/CSS3 specs

29. www.synerzip.com 29 WebViews All of these smart phones supports using these modern browsers as embedded views (aka WebViews)

30. www.synerzip.com 30 JavaScript to native and back Native Code (Java/C++/ObjC) Native Code (Java/C++/ObjC) JSON packets All these browser engine (most common being webkit) support Javascript to talk to native code and back HTML/Javascript

31. www.synerzip.com 31 Hybrid Applications HTML/Javascript Native Code (Java/C++/ObjC) Native Code (Java/C++/ObjC) GPS Location HTML/Javascript application loads Google Maps and talks to the native code to gain access to GPS location

32. www.synerzip.com 32 Possibilities Limitless Possibilities Expose Camera, Accelerometer, GPS, any of the phones sensors to javascript Instead of just building Browsed Based applications augment with more phone features

33. www.synerzip.com 33 Development HTML/CSS Application uses Common API exposing device features

34. www.synerzip.com 34 Development Sample code

35. www.synerzip.com 35 Mapping to Native

36. www.synerzip.com 36 Concept Common API set is provided by framework Application is written using this common api set HTML/CSS may be supported or may not be supported. Titanium prefers native UI instead of HTML/CSS UI, Rhodes prefers HTML/CSS UI Phone Features are access liked common api set (this is similar to that in PhoneGap)

37. www.synerzip.com 37 Development Two API Sets One for UI * (Specific to Titanium Mobile) Create Windows Create Dialogs ……. One for Phone Features Same as PhoneGap Access Camera Access GPS ……

38. www.synerzip.com 38 Development UI API Set

39. www.synerzip.com 39 Development UI API Set

40. www.synerzip.com 40 Issues Common API set across platforms is always minimum E.g IPhone as a widget, which Android not have Fragmentation of the API itself. What is platform specific and not part of Common API comes in Platform specific api?

41. www.synerzip.com 41 Mobile App Dev Frameworks Common Platform PhoneGap Mapping to Native Titanium Mobile Rhodes Mobile

42. www.synerzip.com 42 Compare Screens (IPhone) PhoneGapTitanium Mobile

43. www.synerzip.com 43 Compare Screens (Android) PhoneGapTitanium Mobile

44. www.synerzip.com 44 Open Source MIT License BSD License

45. www.synerzip.com 45 PhoneGap Only platform to support 6 Platforms

46. www.synerzip.com 46 PhoneGap Standards based and extended

47. www.synerzip.com 47

48. www.synerzip.com 48 PhoneGap Features

49. www.synerzip.com 49 PhoneGap Prerequistes Need to be acquainted with Android, IOS, BlackBerry, WebOS Need to be expert at HTML/Javascript or framework like GWT Need to be acquainted with JavaScript libraries like Jquery script.aculo.us Prototype Etc Or Ajax framework like GWT Need different project for each platform, inject PhoneGap code in each project PhoneGap has no IDE, use Eclipse for Android and Xcode for IPhone

50. www.synerzip.com 50 Demo Screens - IPhone

51. www.synerzip.com 51 Demo Screens - Android

52. www.synerzip.com 52 Challenges and Advantages HTML based UI is the biggest Challenge as well as Advantage Same UI can be used for Web and Mobile and even Desktop Promising Framework GWT – Used by Spring Roo for Enterprise Application Development jQueryMobile – Based on legendary Jquery and now features Multipage Template Page Slide Transitions Dialogs Toolbars Forms Lists

53. www.synerzip.com 53

54. www.synerzip.com 54 Appcelerator Titanium SDK Titanium Module SDK Appcelerator Titanium SDK Titanium Module SDK Paid Modules Commerce Modules Communication Modules Analytics Module Media Modules Apache License

55. www.synerzip.com 55 Titanium Mobile

56. www.synerzip.com 56 Titanium Mobile Titanium JavaScript Wekit JavascriptCore Mozilla Rhino Interpreted By IPhone Android

57. www.synerzip.com 57 Titanium Architecture

58. www.synerzip.com 58 Titanium Prerequistes Need to be acquainted with Android, IOS programming Need to know JavaScript Use Titanium Mobile IDE to configure projects and use Text IDE to edit the code (unlike PhoneGap, there is only one project for all platforms)

59. www.synerzip.com 59 Demo Screens - IPhone

60. www.synerzip.com 60 Demo Screens - Android

61. www.synerzip.com 61 Challenges and Advantages Being Native is the biggest strength Limited cross platform api is a weakness Platform specific api leads to fragmentation within code

62. www.synerzip.com 62 Native Mobile App Development

63. www.synerzip.com 63 Native App Development Basically you need to hire experts who can Build Android, IOS, BB, BlackBerry and Windows mobile apps Devs should have experience to deploy apps on market Devs should have experience on various devices QA should know how to automate things on devices/emulator Plan for risks if this is your companies first Mobile App deployment

64. www.synerzip.com 64 Hybrid Mobile App Development

65. www.synerzip.com 65 Hybrid App Development Have Web Developers for Common UI Have native code experts for heavy weight lifting Use frameworks like PhoneGap Plugin Development framework to glue the above two pieces Measure at every milestone to keep track of effect of changes Use Automation to regress every layer

66. www.synerzip.com 66 ShareFile Story as

67. www.synerzip.com 67 Comparison Titanium Mobile Gives out native app API is more proprietary UI has Limitations UI will be fast Much better User Experience Portal Code can not be reused Extensions are possible Limited support for HTML/Javascript PhoneGap Gives out a mobile web app API is less proprietary UI possibilities are unlimited UI could be slow User Experience will get better with enhancements Portal Code can be reused Extensions are possible and easy to implement More will come out of discussion, comments are welcome

68. www.synerzip.com 68 Conclusion Webkit is the next Virtual Machine. Maybe Going where Java could not go HTML 5, CSS 3 and Javascript is future,but not ready just yet HTML 5, CSS3 and Javascript to lessen the fragmentation HTML 5 will compete with native components

69. www.synerzip.com 69 Code Walkthrough - PhoneGap

70. www.synerzip.com 70 Digging Deeper (Android) Instead of extending a Activity, we extend DroidGap DroidGap internally uses a WebView to show local/remote HTML/JavaScript/CSS This WebView has hooks to Call Java from JavaScript And Vice a Versa More 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

71. www.synerzip.com 71 Digging Deeper

72. www.synerzip.com 72 Bootstrapping phonegap Phone Gap …

73. www.synerzip.com 73 Bootstrapping phonegap function init() { document.addEventListener('deviceready’,loadMap,false); }

74. www.synerzip.com 74 Bootstrapping phonegap function 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 ); }

75. www.synerzip.com 75 PhoneGap Walkthrough Lets see a Live Demo

76. www.synerzip.com 76 Phone Gap Extension Adding new apis to PhoneGap is Simple Say Dropbox like Sync is exposed via javascript api EachPlatform to have Dropbox like Sync native code called from javascript References - http://wiki.phonegap.com/w/page/36752779/PhoneGap- Plugins http://wiki.phonegap.com/w/page/36752779/PhoneGap- Plugins Author – Rohit Ghatol

77. www.synerzip.com 77 Code Walkthrough – Titanium Mobile

78. www.synerzip.com 78 Directory Structure

79. www.synerzip.com 79 App.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();

80. www.synerzip.com 80 search.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);

81. www.synerzip.com 81 search.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); };

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

83. www.synerzip.com 83 Titanium Walkthrough Lets see a Live Demo

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

85. www.synerzip.com 85 Synerzip in a Nut-shell 1.Software product development partner for small/mid-sized technology companies Exclusive focus on small/mid-sized technology companies By definition, all Synerzip work is the IP of its respective clients Deep experience in full SDLC – design, dev, QA/testing, deployment Technology and industry domain agnostic 2.Dedicated team of high caliber software professionals Seamlessly extends client’s local team, offering full transparency NOT just “staff augmentation”, but provide full mgmt support 3.Actually reduces risk of development/delivery Experienced team - uses appropriate level of engineering discipline Practices Agile development – responsive, yet disciplined 4.Reduces cost – dual-shore team, 50% cost advantage 5.Offers long term flexibility – allows (facilitates) taking offshore team captive – aka “BOT” option

86. www.synerzip.com 86 Our Clients

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