It covers - - Pros and cons of different strategies for developing mobile applications. - Leading choices for cross platform mobile application development. While there are many frameworks for cross platform application development, we will discuss two leading frameworks namely PhoneGap and Titanium Mobile. Find original copy at https://www.synerzip.com/webinar/cross-platform-mobile-app-development/

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 @ Synerzip
• Associate Architect @ QuickOffice 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 PhoneGapVs 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 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
Mapping to
Native
PhoneGap Titanium Mobile
Cross Platform
Source Code

27. www.synerzip.com
27
Common Platform Approach

28. www.synerzip.com
28
Modern Browsers
Mobile OS Browser
Android Webkit based
iPhone Webkit based
BlackBerry 6.0 + Webkit based
Window Phone 7 IE 7 based *
WebOS Webkit based
Nokia Webkit 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)
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)
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)
PhoneGap Titanium Mobile

43. www.synerzip.com
43
Compare Screens (Android)
PhoneGap Titanium Mobile

44. www.synerzip.com
44

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

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
<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. 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
• Each Platform to have Dropbox like Sync native code called
from javascript
• References -
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