1. Cross Platform Mobile Applications
By Rohit Ghatol
Contact me –

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

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. 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. Understanding Mobile Apps
Sumber dari :

6. Reaching Mobile Users

7. 1. Mobile Features
Mostly Feature Sub Set
Complete Feature Set

8. 2. Tablet Features
Almost Complete
Feature Set
Complete Feature Set

9. 3. User Interaction
Touch based
Accelerometer
Traditional
Compass

10. e.g Layar Application

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

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

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. 6. Push Notifications
Push Notification
Notifying the User proactively

15. Challenges in building Mobile Applications

16. 1. OS Fragmentation
Windows 7
Fragmentation

17. 2. Multiple Teams/Product
Windows 7
Multiple Teams/Products

18. 3. Uniform User Experience
Windows 7
Uniform User Experience

19. 4. Feature Fragmentation

20. Types of Mobile App Dev Native Mobile Apps Cross Platform Mobile Apps
Hybrid partly Native partly Cross Platform

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

22. Cross Platform Mobile Apps
When To
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
High Performance Apps
Heavy on OS and Device Features
Complex N/W comm.
Canvas based Apps
Only Few Platforms

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

24. Hybrid Mobile Apps Fairly Simple UI Complex Backend
When To
Why To
Fairly Simple UI
Complex Backend
Quite few platforms
E.g ShareFile
Recommended way - PhoneGap Plugin
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. Cross Platform Mobile App Development

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

27. Common Platform Approach

28. Modern Browsers
All new Smart Phones come with modern browsers, which have better support for HTML5/CSS3 specs
Mobile OS
Browser
Android
Webkit based
iPhone
BlackBerry 6.0 +
Window Phone 7
IE 7 based *
WebOS
Nokia

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

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

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

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. Development
HTML/CSS Application uses Common API exposing device features

34. Development
Sample code

35. Mapping to Native

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. 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. Development
UI API Set

39. Development
UI API Set

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. Mobile App Dev Frameworks
Common Platform
Mapping to Native
PhoneGap
Titanium Mobile
Rhodes Mobile

42. Compare Screens (IPhone)
PhoneGap
Titanium Mobile

43. Compare Screens (Android)
PhoneGap
Titanium Mobile

44. Open Source
BSD License
MIT License

45. PhoneGap
Only platform to support 6 Platforms

46. PhoneGap
Standards based and extended

48. PhoneGap Features

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. Demo Screens - IPhone

51. Demo Screens - Android

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

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

55. Titanium Mobile

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

57. Titanium Architecture

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. Demo Screens - IPhone

60. Demo Screens - Android

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. Native Mobile App Development

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. Hybrid Mobile App Development

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. ShareFile Story as

67. Comparison Titanium Mobile PhoneGap 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
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. 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. Code Walkthrough - PhoneGap

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. Digging Deeper

72. Bootstrapping 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>

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

74. Bootstrapping phonegap
function loadMap() { var successCallback= function(position) { var coords = position.coords; var url = " + 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. PhoneGap Walkthrough
Lets see a Live Demo

76. Phone Gap Extension Adding new apis to PhoneGap is Simple
Say Dropbox like Sync is exposed via javascript api
Each Platform to have Dropbox like Sync native code called from javascript
References -
Author – Rohit Ghatol

77. Code Walkthrough – Titanium Mobile

78. Directory Structure

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. 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. 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. search.js (Event handling)
//send ajax request to fetch altrnatives for searchText function searchAlternatives(searchText){ xhr.open('GET',' xhr.send(); } //start search when user hits enter on search box search.addEventListener('return', function(e) { actInd.show(); searchAlternatives(e.value); });

83. Titanium Walkthrough
Lets see a Live Demo

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

85. Synerzip in a Nut-shell
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
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
Actually reduces risk of development/delivery
Experienced team - uses appropriate level of engineering discipline
Practices Agile development – responsive, yet disciplined
Reduces cost – dual-shore team, 50% cost advantage
Offers long term flexibility – allows (facilitates) taking offshore team captive – aka “BOT” option 85

86. Our Clients 86

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