cross platform mobile applications
DESCRIPTION
Cross Platform Mobile Applications. By Rohit Ghatol Contact me – [email protected]. Introduction. Rohit Ghatol Project Manager @ Synerzip Associate Architect @ QuickOffice Inc GTUG Manager & Tech Next Founder Certified Scrum Master Corporate Trainer (Agile and Technical) - PowerPoint PPT PresentationTRANSCRIPT
http://meetup.com/technext
Cross Platform Mobile ApplicationsBy Rohit GhatolContact me – [email protected]
http://meetup.com/technext
2
Introduction
Rohit Ghatol
• Project Manager @ Synerzip• Associate Architect @ QuickOffice Inc• GTUG Manager & Tech Next Founder• Certified Scrum Master• Corporate Trainer (Agile and Technical)• Was part of OpenSocial at Google
http://meetup.com/technext
3
Topics• Overview• Understanding Mobile Apps• Cross Platform Mobile App Development
• Pure HTML/JavaScript – PhoneGap• Interpreted JavaScript – Titanium Mobile
• Native Mobile App Development• Hybrid Mobile App Development• Comparison between PhoneGap Vs Titanium• Conclusion• Q & A
http://meetup.com/technext
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 .
http://meetup.com/technext
5
Understanding Mobile Apps
http://meetup.com/technext
6
Reaching Mobile Users
http://meetup.com/technext
7
1. Mobile Features
Complete Feature SetMostly Feature Sub Set
http://meetup.com/technext
8
2. Tablet Features
Complete Feature SetAlmost CompleteFeature Set
http://meetup.com/technext
9
3. User Interaction
Touch based
Traditional
Accelerometer
Compass
http://meetup.com/technext
10
e.g Layar Application
http://meetup.com/technext
11
4. Location aware
Location Aware and highly accurate
Can be Location Aware but approximate
http://meetup.com/technext
12
5. Sensors
Handy Camera and Voice Recording
Upcoming NFC (Near Field Communication) turning phone into Credit Card, Access Card, Business Card Exchanger
http://meetup.com/technext
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
http://meetup.com/technext
14
6. Push Notifications
Push NotificationNotifying the User proactively
http://meetup.com/technext
15
Challenges in building Mobile Applications
http://meetup.com/technext
16
1. OS Fragmentation
Windows 7
Fragmentation
http://meetup.com/technext
17
2. Multiple Teams/Product
Windows 7
Multiple Teams/Products
http://meetup.com/technext
18
3. Uniform User Experience
Windows 7
Uniform User Experience
http://meetup.com/technext
19
4. Feature Fragmentation
Feature Fragmentation
http://meetup.com/technext
20
Approaches to Mobile Development
http://meetup.com/technext
21
Types of Mobile App Dev
1. Native Mobile Apps
2. Cross Platform Mobile Apps
3. Hybrid partly Native partly Cross Platform
http://meetup.com/technext
22
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
http://meetup.com/technext
23
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
http://meetup.com/technext
24
Cross Platform Mobile Apps
When To
• Time to market is critical
• Saving Cost is critical
When Not To
http://meetup.com/technext
25
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
http://meetup.com/technext
26
Cross Platform Mobile App Development
http://meetup.com/technext
27
Cross Platform Strategies
PhoneGap Titanium Mobile
Cross Platform Source Code
WEB APPLICATION
JavaScript – Java Bridge
OS – Android / iPhone
UI Platform APIs
Mapping to Native
Bridge - JavaScript – Java – Objective C
OS – Android / iPhone
Common Platform Mapping to Native
Common Source
http://meetup.com/technext
28
Common Platform Approach
http://meetup.com/technext
29
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
http://meetup.com/technext
30
WebViews
All of these smart phones supports using these modern browsers as embedded views (aka WebViews)
http://meetup.com/technext
31
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
http://meetup.com/technext
32
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
http://meetup.com/technext
33
Over all Architecture
HTML5/CSS3 Application
UI Framework e.g jQueryMobile PhoneGap API
Phone Gap Bridge
Camera GPS SQLite SQLite
File System Accelerometer
Compass etc
http://meetup.com/technext
34
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
http://meetup.com/technext
35
Development• HTML/CSS Application uses Common API exposing device
features
http://meetup.com/technext
36
Development• Sample code
http://meetup.com/technext
37
Mapping to Native
http://meetup.com/technext
38
Over all Architecture
Javascript Based Application
Titanium UI API Titanium Phone API
Titanium Framework
Window Dialog SQLite SQLite
File System Accelerometer
Compass etc
http://meetup.com/technext
39
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• ……
http://meetup.com/technext
40
Development
UI API Set
http://meetup.com/technext
41
Development
UI API Set
http://meetup.com/technext
42
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?
http://meetup.com/technext
43
Mobile App Dev Frameworks
Common Platform
• PhoneGapMapping to Native
• Titanium Mobile
* Rhodes Mobile is another promising framework, but out of scope for today’s discussion
http://meetup.com/technext
44
Compare Screens (IPhone)PhoneGap Titanium Mobile
http://meetup.com/technext
45
Compare Screens (Android)PhoneGap Titanium Mobile
http://meetup.com/technext
46
Open Source
MIT License
BSD License
http://meetup.com/technext
47
PhoneGap
• Only platform to support 6 Platforms
http://meetup.com/technext
48
PhoneGap• Standards based and extended
http://meetup.com/technext
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
http://meetup.com/technext
50
Demo Screens - IPhone
http://meetup.com/technext
51
Demo Screens - Android
http://meetup.com/technext
52
PhoneGap Features
http://meetup.com/technext
53
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
http://meetup.com/technext
54
Code Walkthrough - PhoneGap
http://meetup.com/technext
Getting Started PhoneGap
55
Step 1: Create Android Eclipse Project
http://meetup.com/technext
Getting Started PhoneGap
56
Step 2: Add Phone Gap Java Library
http://meetup.com/technext
Getting Started PhoneGap
57
Step 3: Add Phone Gap Javascript and with other web app files
http://meetup.com/technext
Getting Started PhoneGap
58
Step 4: Modify Main Activity class
http://meetup.com/technext
Getting Started PhoneGap
59
Step 5: Extend DriodGap instead of Activity
http://meetup.com/technext
Getting Started PhoneGap
60
Step 6: Write Javascript Code to create UI &use PhoneGap API
http://meetup.com/technext
61
http://meetup.com/technext
62
PhoneGap on XCode
http://meetup.com/technext
63
http://meetup.com/technext
64
jQueryMobile UI Development
http://meetup.com/technext
jQuery Declarative UI<!-- Main Page --> <div data-role="page" id="home"> <!-- Header of Main Page --> <div data-role="header"> <h1>AlternativeTo Home</h1> </div> <!-- Content of Main Page --> <div data-role="content"> <p>Find Alternatives To Your favourite Softwares </p> <p><a href="#search" data-role="button">Search Alternatives</a></p> <p><a href="#recent" data-role="button">Recent Alternatives</a></p> </div> </div>
65
http://meetup.com/technext
jQuery Declarative UI
66
http://meetup.com/technext
67
Extending PhoneGap to open more of underlying system
http://meetup.com/technext
68
Phone Gap Extension
• References - http://wiki.phonegap.com/w/page/36752779/PhoneGap-Plugins
• Author – Rohit Ghatol
Javascript Code
Android Code
http://meetup.com/technext
69Mobile
http://meetup.com/technext
70
• Appcelerator Titanium SDK• Titanium Module SDK
• Appcelerator Titanium SDK• Titanium Module SDK
Paid Modules• Commerce Modules• Communication Modules• Analytics Module• Media Modules
Apache License
http://meetup.com/technext
71
Titanium Mobile
Currently supports only Android and IPhone platforms.
http://meetup.com/technext
72
Titanium MobileTitanium JavaScript
Wekit JavascriptCore Mozilla Rhino
Interpreted By
IPhone Android
http://meetup.com/technext
73
Titanium Architecture
http://meetup.com/technext
74
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)
http://meetup.com/technext
75
Demo Screens - IPhone
http://meetup.com/technext
76
Demo Screens - Android
http://meetup.com/technext
77
Challenges and Advantages• Being Native is the biggest strength
• Limited cross platform ui api is a weakness
• Platform specific api leads to fragmentation within code
http://meetup.com/technext
78
Code Walkthrough – Titanium Mobile
http://meetup.com/technext
Titanium Developer• IDE for Titanium Mobile and Desktop• Allows Creating Titanium Project• Allows building Android and IPhone Applications
• Does not provide any Source code Editor
79
http://meetup.com/technext
http://meetup.com/technext
http://meetup.com/technext
82
Directory Structure
http://meetup.com/technext
83
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();
http://meetup.com/technext
84
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);
http://meetup.com/technext
85
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); };
http://meetup.com/technext
86
search.js (Event handling)//send ajax request to fetch altrnatives for searchTextfunction searchAlternatives(searchText){ xhr.open('GET','http://api.alternativeto.net/software/'+searchText+'/?count=15');xhr.send();}
//start search when user hits enter on search boxsearch.addEventListener('return', function(e){ actInd.show(); searchAlternatives(e.value);});
http://meetup.com/technext
87
Native Mobile App Development
http://meetup.com/technext
88
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
http://meetup.com/technext
89
Hybrid Mobile App Development
http://meetup.com/technext
90
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
http://meetup.com/technext
91
ShareFile Story
• as
http://meetup.com/technext
92
Comparison
Titanium Mobile• Android and IPhone• 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• 6 Platforms• 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
http://meetup.com/technext
93
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
http://meetup.com/technext
References• Phone Gap Documentation• Titanium Mobile Documentation• ShareFile Story
94