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
www.synerzip.com
2
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 .
4
www.synerzip.com
Understanding Mobile Apps
5
www.synerzip.com
Reaching Mobile Users
6
www.synerzip.com
1. Mobile Features
Mostly Feature Sub Set
Complete Feature Set
7
www.synerzip.com
2. Tablet Features
Almost Complete
Feature Set
Complete Feature Set
8
www.synerzip.com
3. User Interaction
Touch based
Accelerometer
Traditional
9
Compass
www.synerzip.com
e.g Layar Application
10
www.synerzip.com
4. Location aware
Can be Location Aware
but approximate
Location Aware and
highly accurate
11
www.synerzip.com
5. Sensors
Handy Camera and Voice Recording
Upcoming NFC (Near Field Communication)
turning phone into Credit Card, Access Card,
Business Card Exchanger
www.synerzip.com
12
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
www.synerzip.com
13
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
www.synerzip.com
17
3. Uniform User Experience
Windows 7
Uniform User Experience
www.synerzip.com
18
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
Features
• More or less Replicates
Web Apps with few device
feature
• Complex N/W comm.
• Standard Restful
• Canvas based Apps
• Widget based apps
• Only Few Platforms
• Many Platforms
www.synerzip.com
21
Cross Platform Mobile Apps
When To
When Not To
• Performance is not the
main criteria
• High Performance Apps
• More or less Replicates
Web Apps with few device
feature
• Heavy on OS and Device
Features
• Standard Restful
• Complex N/W comm.
• Widget based apps
• Canvas based Apps
• Many Platforms
• Only Few Platforms
www.synerzip.com
22
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
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
• E.g ShareFile
• Recommended way - PhoneGap Plugin
www.synerzip.com
24
Cross Platform Mobile App
Development
25
www.synerzip.com
Cross Platform Strategies
Cross Platform
Source Code
Common
Platform
e.g WebKit
Mapping to
Native
Titanium Mobile
PhoneGap
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
Native Code
(Java/C++/ObjC)
HTML/Javascript
JSON packets
www.synerzip.com
30
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
www.synerzip.com
31
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
• PhoneGap
Mapping to Native
• 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
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
• PhoneGap has no IDE, use Eclipse for Android and Xcode for IPhone
www.synerzip.com
49
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
Lists
www.synerzip.com
52
53
www.synerzip.com
• Appcelerator Titanium SDK
• Titanium Module SDK
• Appcelerator Titanium 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
JavascriptCore
Mozilla Rhino
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
• 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
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>
www.synerzip.com
72
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,
failureCallback );
}
www.synerzip.com
74
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/PhoneGapPlugins
• Author – Rohit Ghatol
www.synerzip.com
76
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);
tabGroup.open();
79
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);
window.add(tableview);
www.synerzip.com
80
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+'/?c
ount=15');
xhr.send();
}
//start search when user hits enter on search box
search.addEventListener('return', function(e)
{
actInd.show();
searchAlternatives(e.value);
});
www.synerzip.com
82
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
team captive – aka “BOT” option
www.synerzip.com
85
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