Cross Platform

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

www.synerzip.com
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 2

www.synerzip.com
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
3

www.synerzip.com
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 .

www.synerzip.com
 Understanding Mobile Apps

Sumber dari :
http://synerzip.com/wp-content/uploads/2013/09/downloads-Cross-Platform
-Mobile-Applications.ppt
.

www.synerzip.com
Reaching Mobile Users

www.synerzip.com
1. Mobile Features

Mostly Feature Sub Set Complete Feature Set

www.synerzip.com
2. Tablet Features

Almost Complete Complete Feature Set

Feature Set
8

www.synerzip.com
 3. User Interaction

Touch based Accelerometer

Traditional

Compass 9

www.synerzip.com
e.g Layar Application

10

www.synerzip.com
4. Location aware

Can be Location Aware

but approximate

Location Aware and 11

highly accurate

www.synerzip.com
5. Sensors

Handy Camera and Voice Recording

Upcoming NFC (Near Field Communication)

12
turning phone into Credit Card, Access Card,
Business Card Exchanger
www.synerzip.com
 e.g Shopping Applications

Scan a product’s barcode to know If not, then navigate to a store

13
if it has the lowest price. which has the lowest price

www.synerzip.com
6. Push Notifications

Push Notification
Notifying the User proactively

14

www.synerzip.com
Challenges in building Mobile
Applications

15

www.synerzip.com
1. OS Fragmentation

Windows 7

Fragmentation
16

www.synerzip.com
2. Multiple Teams/Product

Windows 7

Multiple Teams/Products 17

www.synerzip.com
3. Uniform User Experience

Windows 7

Uniform User Experience 18

www.synerzip.com
4. Feature Fragmentation

19

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

20

www.synerzip.com
Native Mobile Apps
When To When Not To
• High Performance Apps • Performance is not the
main criteria

• Heavy on OS and Device • More or less Replicates

Features Web Apps with few device
feature
• Complex N/W comm.
• Standard Restful
• Canvas based Apps
• Widget based apps

• Only Few Platforms 21

• Many Platforms

www.synerzip.com
Cross Platform Mobile Apps
When To When Not To
• Performance is not the • High Performance Apps
main criteria

• More or less Replicates • Heavy on OS and Device

Web Apps with few device Features
feature
• Complex N/W comm.
• Standard Restful
• Canvas based Apps
• Widget based apps

• Only Few Platforms 22

• Many Platforms

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

• Saving Cost is critical

23

www.synerzip.com
Hybrid Mobile Apps
When To
• Fairly Simple UI
• Complex Backend
• Quite few platforms
• E.g ShareFile
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

• Recommended way - PhoneGap Plugin

24

www.synerzip.com
Cross Platform Mobile App
Development

25

www.synerzip.com
Cross Platform Strategies
Cross Platform
Source Code

Common
Platform Mapping to
e.g WebKit Native

PhoneGap Titanium Mobile

26

www.synerzip.com
Common Platform Approach

27

www.synerzip.com
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 Webkit based
BlackBerry 6.0 + Webkit based
Window Phone 7 IE 7 based *
WebOS Webkit based
Nokia Webkit based

28

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

29

www.synerzip.com
JavaScript to native and back
All these browser engine (most common being webkit) support
Javascript to talk to native code and back

HTML/Javascript Native Code

(Java/C++/ObjC)

JSON packets 30

www.synerzip.com
Hybrid Applications
HTML/Javascript application loads Google Maps and talks to the
native code to gain access to GPS location

HTML/Javascript Native Code

(Java/C++/ObjC)

GPS Location 31

www.synerzip.com
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

32

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

33

www.synerzip.com
Development
• Sample code

34

www.synerzip.com
Mapping to Native

35

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

36

www.synerzip.com
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
• ……

37

www.synerzip.com
Development
UI API Set

38

www.synerzip.com
Development
UI API Set

39

www.synerzip.com
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?

40

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

41

www.synerzip.com
Compare Screens (IPhone)
PhoneGap Titanium Mobile

42

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

43

www.synerzip.com
 urce
S o
pen Li cense
O B SD
MIT License
44

www.synerzip.com
PhoneGap

• Only platform to support 6 Platforms

45

www.synerzip.com
PhoneGap
• Standards based and extended

46

www.synerzip.com
 47

www.synerzip.com
PhoneGap Features

48

www.synerzip.com
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
49
• PhoneGap has no IDE, use Eclipse for Android and Xcode for IPhone

www.synerzip.com
Demo Screens - IPhone

50

www.synerzip.com
Demo Screens - Android

51

www.synerzip.com
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 52
• Lists

www.synerzip.com
 53

www.synerzip.com
 Apa
che
Lice
nse

• Appcelerator Titanium SDK • Appcelerator Titanium SDK

• Titanium Module SDK • Titanium Module SDK

Paid Modules
• Commerce Modules
• Communication Modules
• Analytics Module
• Media Modules

54

www.synerzip.com
Titanium Mobile

55

www.synerzip.com
Titanium Mobile
Titanium JavaScript

Interpreted By

Wekit
Mozilla Rhino
JavascriptCore

56

IPhone www.synerzip.com
Android
Titanium Architecture

57

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

58

www.synerzip.com
Demo Screens - IPhone

59

www.synerzip.com
Demo Screens - Android

60

www.synerzip.com
Challenges and Advantages
• Being Native is the biggest strength

• Limited cross platform api is a weakness

• Platform specific api leads to fragmentation within code

61

www.synerzip.com
Native Mobile App
Development

62

www.synerzip.com
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

63

www.synerzip.com
Hybrid Mobile App
Development

64

www.synerzip.com
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

65

www.synerzip.com
ShareFile Story

• as

66

www.synerzip.com
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
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

• Extensions are possible and
• Limited support for
HTML/Javascript easy to implement
67

More will come out of discussion, comments are welcome

www.synerzip.com
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

68

www.synerzip.com
Code Walkthrough -
PhoneGap

69

www.synerzip.com
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

70

www.synerzip.com
Digging Deeper

71

www.synerzip.com
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> 72

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

73

www.synerzip.com
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,
74
failureCallback );
}
www.synerzip.com
PhoneGap Walkthrough
• Lets see a Live Demo

75

www.synerzip.com
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
76
• Author – Rohit Ghatol

www.synerzip.com
Code Walkthrough –
Titanium Mobile

77

www.synerzip.com
Directory Structure

78

www.synerzip.com
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); 79
tabGroup.open();
www.synerzip.com
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); 80
window.add(tableview);
www.synerzip.com
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);
81
};
www.synerzip.com
search.js (Event handling)
//send ajax request to fetch altrnatives for searchText
function searchAlternatives(searchText){
xhr.open('GET','http://api.alternativeto.net/software/'+searchText+'/?
count=15');
xhr.send();
}

//start search when user hits enter on search box

search.addEventListener('return', function(e)
{
actInd.show();
searchAlternatives(e.value);
82
});

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

83

www.synerzip.com
Questions?

Agile Software Product Development Partner

www.synerzip.com

Hemant Elhence, hemant@synerzip.com

469.322.0349

84

www.synerzip.com
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 85
team captive – aka “BOT” option
www.synerzip.com
Our Clients

86

www.synerzip.com
Questions?

Agile Software Product Development Partner

www.synerzip.com

Hemant Elhence, hemant@synerzip.com

469.322.0349

87

www.synerzip.com