Cross Platform Mobile Applications
description
Transcript of Cross Platform Mobile Applications
![Page 1: Cross Platform Mobile Applications](https://reader035.fdocuments.net/reader035/viewer/2022062501/56816882550346895ddefd52/html5/thumbnails/1.jpg)
http://meetup.com/technext
Cross Platform Mobile ApplicationsBy Rohit GhatolContact me – [email protected]
![Page 2: Cross Platform Mobile Applications](https://reader035.fdocuments.net/reader035/viewer/2022062501/56816882550346895ddefd52/html5/thumbnails/2.jpg)
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
![Page 3: Cross Platform Mobile Applications](https://reader035.fdocuments.net/reader035/viewer/2022062501/56816882550346895ddefd52/html5/thumbnails/3.jpg)
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
![Page 4: Cross Platform Mobile Applications](https://reader035.fdocuments.net/reader035/viewer/2022062501/56816882550346895ddefd52/html5/thumbnails/4.jpg)
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 .
![Page 5: Cross Platform Mobile Applications](https://reader035.fdocuments.net/reader035/viewer/2022062501/56816882550346895ddefd52/html5/thumbnails/5.jpg)
http://meetup.com/technext
5
Understanding Mobile Apps
![Page 6: Cross Platform Mobile Applications](https://reader035.fdocuments.net/reader035/viewer/2022062501/56816882550346895ddefd52/html5/thumbnails/6.jpg)
http://meetup.com/technext
6
Reaching Mobile Users
![Page 7: Cross Platform Mobile Applications](https://reader035.fdocuments.net/reader035/viewer/2022062501/56816882550346895ddefd52/html5/thumbnails/7.jpg)
http://meetup.com/technext
7
1. Mobile Features
Complete Feature SetMostly Feature Sub Set
![Page 8: Cross Platform Mobile Applications](https://reader035.fdocuments.net/reader035/viewer/2022062501/56816882550346895ddefd52/html5/thumbnails/8.jpg)
http://meetup.com/technext
8
2. Tablet Features
Complete Feature SetAlmost CompleteFeature Set
![Page 9: Cross Platform Mobile Applications](https://reader035.fdocuments.net/reader035/viewer/2022062501/56816882550346895ddefd52/html5/thumbnails/9.jpg)
http://meetup.com/technext
9
3. User Interaction
Touch based
Traditional
Accelerometer
Compass
![Page 10: Cross Platform Mobile Applications](https://reader035.fdocuments.net/reader035/viewer/2022062501/56816882550346895ddefd52/html5/thumbnails/10.jpg)
http://meetup.com/technext
10
e.g Layar Application
![Page 11: Cross Platform Mobile Applications](https://reader035.fdocuments.net/reader035/viewer/2022062501/56816882550346895ddefd52/html5/thumbnails/11.jpg)
http://meetup.com/technext
11
4. Location aware
Location Aware and highly accurate
Can be Location Aware but approximate
![Page 12: Cross Platform Mobile Applications](https://reader035.fdocuments.net/reader035/viewer/2022062501/56816882550346895ddefd52/html5/thumbnails/12.jpg)
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
![Page 13: Cross Platform Mobile Applications](https://reader035.fdocuments.net/reader035/viewer/2022062501/56816882550346895ddefd52/html5/thumbnails/13.jpg)
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
![Page 14: Cross Platform Mobile Applications](https://reader035.fdocuments.net/reader035/viewer/2022062501/56816882550346895ddefd52/html5/thumbnails/14.jpg)
http://meetup.com/technext
14
6. Push Notifications
Push NotificationNotifying the User proactively
![Page 15: Cross Platform Mobile Applications](https://reader035.fdocuments.net/reader035/viewer/2022062501/56816882550346895ddefd52/html5/thumbnails/15.jpg)
http://meetup.com/technext
15
Challenges in building Mobile Applications
![Page 16: Cross Platform Mobile Applications](https://reader035.fdocuments.net/reader035/viewer/2022062501/56816882550346895ddefd52/html5/thumbnails/16.jpg)
http://meetup.com/technext
16
1. OS Fragmentation
Windows 7
Fragmentation
![Page 17: Cross Platform Mobile Applications](https://reader035.fdocuments.net/reader035/viewer/2022062501/56816882550346895ddefd52/html5/thumbnails/17.jpg)
http://meetup.com/technext
17
2. Multiple Teams/Product
Windows 7
Multiple Teams/Products
![Page 18: Cross Platform Mobile Applications](https://reader035.fdocuments.net/reader035/viewer/2022062501/56816882550346895ddefd52/html5/thumbnails/18.jpg)
http://meetup.com/technext
18
3. Uniform User Experience
Windows 7
Uniform User Experience
![Page 19: Cross Platform Mobile Applications](https://reader035.fdocuments.net/reader035/viewer/2022062501/56816882550346895ddefd52/html5/thumbnails/19.jpg)
http://meetup.com/technext
19
4. Feature Fragmentation
Feature Fragmentation
![Page 20: Cross Platform Mobile Applications](https://reader035.fdocuments.net/reader035/viewer/2022062501/56816882550346895ddefd52/html5/thumbnails/20.jpg)
http://meetup.com/technext
20
Approaches to Mobile Development
![Page 21: Cross Platform Mobile Applications](https://reader035.fdocuments.net/reader035/viewer/2022062501/56816882550346895ddefd52/html5/thumbnails/21.jpg)
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
![Page 22: Cross Platform Mobile Applications](https://reader035.fdocuments.net/reader035/viewer/2022062501/56816882550346895ddefd52/html5/thumbnails/22.jpg)
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
![Page 23: Cross Platform Mobile Applications](https://reader035.fdocuments.net/reader035/viewer/2022062501/56816882550346895ddefd52/html5/thumbnails/23.jpg)
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
![Page 24: Cross Platform Mobile Applications](https://reader035.fdocuments.net/reader035/viewer/2022062501/56816882550346895ddefd52/html5/thumbnails/24.jpg)
http://meetup.com/technext
24
Cross Platform Mobile Apps
When To
• Time to market is critical
• Saving Cost is critical
When Not To
![Page 25: Cross Platform Mobile Applications](https://reader035.fdocuments.net/reader035/viewer/2022062501/56816882550346895ddefd52/html5/thumbnails/25.jpg)
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
![Page 26: Cross Platform Mobile Applications](https://reader035.fdocuments.net/reader035/viewer/2022062501/56816882550346895ddefd52/html5/thumbnails/26.jpg)
http://meetup.com/technext
26
Cross Platform Mobile App Development
![Page 27: Cross Platform Mobile Applications](https://reader035.fdocuments.net/reader035/viewer/2022062501/56816882550346895ddefd52/html5/thumbnails/27.jpg)
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
![Page 28: Cross Platform Mobile Applications](https://reader035.fdocuments.net/reader035/viewer/2022062501/56816882550346895ddefd52/html5/thumbnails/28.jpg)
http://meetup.com/technext
28
Common Platform Approach
![Page 29: Cross Platform Mobile Applications](https://reader035.fdocuments.net/reader035/viewer/2022062501/56816882550346895ddefd52/html5/thumbnails/29.jpg)
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
![Page 30: Cross Platform Mobile Applications](https://reader035.fdocuments.net/reader035/viewer/2022062501/56816882550346895ddefd52/html5/thumbnails/30.jpg)
http://meetup.com/technext
30
WebViews
All of these smart phones supports using these modern browsers as embedded views (aka WebViews)
![Page 31: Cross Platform Mobile Applications](https://reader035.fdocuments.net/reader035/viewer/2022062501/56816882550346895ddefd52/html5/thumbnails/31.jpg)
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
![Page 32: Cross Platform Mobile Applications](https://reader035.fdocuments.net/reader035/viewer/2022062501/56816882550346895ddefd52/html5/thumbnails/32.jpg)
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
![Page 33: Cross Platform Mobile Applications](https://reader035.fdocuments.net/reader035/viewer/2022062501/56816882550346895ddefd52/html5/thumbnails/33.jpg)
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
![Page 34: Cross Platform Mobile Applications](https://reader035.fdocuments.net/reader035/viewer/2022062501/56816882550346895ddefd52/html5/thumbnails/34.jpg)
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
![Page 35: Cross Platform Mobile Applications](https://reader035.fdocuments.net/reader035/viewer/2022062501/56816882550346895ddefd52/html5/thumbnails/35.jpg)
http://meetup.com/technext
35
Development• HTML/CSS Application uses Common API exposing device
features
![Page 36: Cross Platform Mobile Applications](https://reader035.fdocuments.net/reader035/viewer/2022062501/56816882550346895ddefd52/html5/thumbnails/36.jpg)
http://meetup.com/technext
36
Development• Sample code
![Page 37: Cross Platform Mobile Applications](https://reader035.fdocuments.net/reader035/viewer/2022062501/56816882550346895ddefd52/html5/thumbnails/37.jpg)
http://meetup.com/technext
37
Mapping to Native
![Page 38: Cross Platform Mobile Applications](https://reader035.fdocuments.net/reader035/viewer/2022062501/56816882550346895ddefd52/html5/thumbnails/38.jpg)
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
![Page 39: Cross Platform Mobile Applications](https://reader035.fdocuments.net/reader035/viewer/2022062501/56816882550346895ddefd52/html5/thumbnails/39.jpg)
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• ……
![Page 40: Cross Platform Mobile Applications](https://reader035.fdocuments.net/reader035/viewer/2022062501/56816882550346895ddefd52/html5/thumbnails/40.jpg)
http://meetup.com/technext
40
Development
UI API Set
![Page 41: Cross Platform Mobile Applications](https://reader035.fdocuments.net/reader035/viewer/2022062501/56816882550346895ddefd52/html5/thumbnails/41.jpg)
http://meetup.com/technext
41
Development
UI API Set
![Page 42: Cross Platform Mobile Applications](https://reader035.fdocuments.net/reader035/viewer/2022062501/56816882550346895ddefd52/html5/thumbnails/42.jpg)
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?
![Page 43: Cross Platform Mobile Applications](https://reader035.fdocuments.net/reader035/viewer/2022062501/56816882550346895ddefd52/html5/thumbnails/43.jpg)
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
![Page 44: Cross Platform Mobile Applications](https://reader035.fdocuments.net/reader035/viewer/2022062501/56816882550346895ddefd52/html5/thumbnails/44.jpg)
http://meetup.com/technext
44
Compare Screens (IPhone)PhoneGap Titanium Mobile
![Page 45: Cross Platform Mobile Applications](https://reader035.fdocuments.net/reader035/viewer/2022062501/56816882550346895ddefd52/html5/thumbnails/45.jpg)
http://meetup.com/technext
45
Compare Screens (Android)PhoneGap Titanium Mobile
![Page 46: Cross Platform Mobile Applications](https://reader035.fdocuments.net/reader035/viewer/2022062501/56816882550346895ddefd52/html5/thumbnails/46.jpg)
http://meetup.com/technext
46
Open Source
MIT License
BSD License
![Page 47: Cross Platform Mobile Applications](https://reader035.fdocuments.net/reader035/viewer/2022062501/56816882550346895ddefd52/html5/thumbnails/47.jpg)
http://meetup.com/technext
47
PhoneGap
• Only platform to support 6 Platforms
![Page 48: Cross Platform Mobile Applications](https://reader035.fdocuments.net/reader035/viewer/2022062501/56816882550346895ddefd52/html5/thumbnails/48.jpg)
http://meetup.com/technext
48
PhoneGap• Standards based and extended
![Page 49: Cross Platform Mobile Applications](https://reader035.fdocuments.net/reader035/viewer/2022062501/56816882550346895ddefd52/html5/thumbnails/49.jpg)
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
![Page 50: Cross Platform Mobile Applications](https://reader035.fdocuments.net/reader035/viewer/2022062501/56816882550346895ddefd52/html5/thumbnails/50.jpg)
http://meetup.com/technext
50
Demo Screens - IPhone
![Page 51: Cross Platform Mobile Applications](https://reader035.fdocuments.net/reader035/viewer/2022062501/56816882550346895ddefd52/html5/thumbnails/51.jpg)
http://meetup.com/technext
51
Demo Screens - Android
![Page 52: Cross Platform Mobile Applications](https://reader035.fdocuments.net/reader035/viewer/2022062501/56816882550346895ddefd52/html5/thumbnails/52.jpg)
http://meetup.com/technext
52
PhoneGap Features
![Page 53: Cross Platform Mobile Applications](https://reader035.fdocuments.net/reader035/viewer/2022062501/56816882550346895ddefd52/html5/thumbnails/53.jpg)
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
![Page 54: Cross Platform Mobile Applications](https://reader035.fdocuments.net/reader035/viewer/2022062501/56816882550346895ddefd52/html5/thumbnails/54.jpg)
http://meetup.com/technext
54
Code Walkthrough - PhoneGap
![Page 55: Cross Platform Mobile Applications](https://reader035.fdocuments.net/reader035/viewer/2022062501/56816882550346895ddefd52/html5/thumbnails/55.jpg)
http://meetup.com/technext
Getting Started PhoneGap
55
Step 1: Create Android Eclipse Project
![Page 56: Cross Platform Mobile Applications](https://reader035.fdocuments.net/reader035/viewer/2022062501/56816882550346895ddefd52/html5/thumbnails/56.jpg)
http://meetup.com/technext
Getting Started PhoneGap
56
Step 2: Add Phone Gap Java Library
![Page 57: Cross Platform Mobile Applications](https://reader035.fdocuments.net/reader035/viewer/2022062501/56816882550346895ddefd52/html5/thumbnails/57.jpg)
http://meetup.com/technext
Getting Started PhoneGap
57
Step 3: Add Phone Gap Javascript and with other web app files
![Page 58: Cross Platform Mobile Applications](https://reader035.fdocuments.net/reader035/viewer/2022062501/56816882550346895ddefd52/html5/thumbnails/58.jpg)
http://meetup.com/technext
Getting Started PhoneGap
58
Step 4: Modify Main Activity class
![Page 59: Cross Platform Mobile Applications](https://reader035.fdocuments.net/reader035/viewer/2022062501/56816882550346895ddefd52/html5/thumbnails/59.jpg)
http://meetup.com/technext
Getting Started PhoneGap
59
Step 5: Extend DriodGap instead of Activity
![Page 60: Cross Platform Mobile Applications](https://reader035.fdocuments.net/reader035/viewer/2022062501/56816882550346895ddefd52/html5/thumbnails/60.jpg)
http://meetup.com/technext
Getting Started PhoneGap
60
Step 6: Write Javascript Code to create UI &use PhoneGap API
![Page 61: Cross Platform Mobile Applications](https://reader035.fdocuments.net/reader035/viewer/2022062501/56816882550346895ddefd52/html5/thumbnails/61.jpg)
http://meetup.com/technext
61
![Page 62: Cross Platform Mobile Applications](https://reader035.fdocuments.net/reader035/viewer/2022062501/56816882550346895ddefd52/html5/thumbnails/62.jpg)
http://meetup.com/technext
62
PhoneGap on XCode
![Page 63: Cross Platform Mobile Applications](https://reader035.fdocuments.net/reader035/viewer/2022062501/56816882550346895ddefd52/html5/thumbnails/63.jpg)
http://meetup.com/technext
63
![Page 64: Cross Platform Mobile Applications](https://reader035.fdocuments.net/reader035/viewer/2022062501/56816882550346895ddefd52/html5/thumbnails/64.jpg)
http://meetup.com/technext
64
jQueryMobile UI Development
![Page 65: Cross Platform Mobile Applications](https://reader035.fdocuments.net/reader035/viewer/2022062501/56816882550346895ddefd52/html5/thumbnails/65.jpg)
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
![Page 66: Cross Platform Mobile Applications](https://reader035.fdocuments.net/reader035/viewer/2022062501/56816882550346895ddefd52/html5/thumbnails/66.jpg)
http://meetup.com/technext
jQuery Declarative UI
66
![Page 67: Cross Platform Mobile Applications](https://reader035.fdocuments.net/reader035/viewer/2022062501/56816882550346895ddefd52/html5/thumbnails/67.jpg)
http://meetup.com/technext
67
Extending PhoneGap to open more of underlying system
![Page 68: Cross Platform Mobile Applications](https://reader035.fdocuments.net/reader035/viewer/2022062501/56816882550346895ddefd52/html5/thumbnails/68.jpg)
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
![Page 69: Cross Platform Mobile Applications](https://reader035.fdocuments.net/reader035/viewer/2022062501/56816882550346895ddefd52/html5/thumbnails/69.jpg)
http://meetup.com/technext
69Mobile
![Page 70: Cross Platform Mobile Applications](https://reader035.fdocuments.net/reader035/viewer/2022062501/56816882550346895ddefd52/html5/thumbnails/70.jpg)
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
![Page 71: Cross Platform Mobile Applications](https://reader035.fdocuments.net/reader035/viewer/2022062501/56816882550346895ddefd52/html5/thumbnails/71.jpg)
http://meetup.com/technext
71
Titanium Mobile
Currently supports only Android and IPhone platforms.
![Page 72: Cross Platform Mobile Applications](https://reader035.fdocuments.net/reader035/viewer/2022062501/56816882550346895ddefd52/html5/thumbnails/72.jpg)
http://meetup.com/technext
72
Titanium MobileTitanium JavaScript
Wekit JavascriptCore Mozilla Rhino
Interpreted By
IPhone Android
![Page 73: Cross Platform Mobile Applications](https://reader035.fdocuments.net/reader035/viewer/2022062501/56816882550346895ddefd52/html5/thumbnails/73.jpg)
http://meetup.com/technext
73
Titanium Architecture
![Page 74: Cross Platform Mobile Applications](https://reader035.fdocuments.net/reader035/viewer/2022062501/56816882550346895ddefd52/html5/thumbnails/74.jpg)
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)
![Page 75: Cross Platform Mobile Applications](https://reader035.fdocuments.net/reader035/viewer/2022062501/56816882550346895ddefd52/html5/thumbnails/75.jpg)
http://meetup.com/technext
75
Demo Screens - IPhone
![Page 76: Cross Platform Mobile Applications](https://reader035.fdocuments.net/reader035/viewer/2022062501/56816882550346895ddefd52/html5/thumbnails/76.jpg)
http://meetup.com/technext
76
Demo Screens - Android
![Page 77: Cross Platform Mobile Applications](https://reader035.fdocuments.net/reader035/viewer/2022062501/56816882550346895ddefd52/html5/thumbnails/77.jpg)
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
![Page 78: Cross Platform Mobile Applications](https://reader035.fdocuments.net/reader035/viewer/2022062501/56816882550346895ddefd52/html5/thumbnails/78.jpg)
http://meetup.com/technext
78
Code Walkthrough – Titanium Mobile
![Page 79: Cross Platform Mobile Applications](https://reader035.fdocuments.net/reader035/viewer/2022062501/56816882550346895ddefd52/html5/thumbnails/79.jpg)
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
![Page 80: Cross Platform Mobile Applications](https://reader035.fdocuments.net/reader035/viewer/2022062501/56816882550346895ddefd52/html5/thumbnails/80.jpg)
http://meetup.com/technext
![Page 81: Cross Platform Mobile Applications](https://reader035.fdocuments.net/reader035/viewer/2022062501/56816882550346895ddefd52/html5/thumbnails/81.jpg)
http://meetup.com/technext
![Page 82: Cross Platform Mobile Applications](https://reader035.fdocuments.net/reader035/viewer/2022062501/56816882550346895ddefd52/html5/thumbnails/82.jpg)
http://meetup.com/technext
82
Directory Structure
![Page 83: Cross Platform Mobile Applications](https://reader035.fdocuments.net/reader035/viewer/2022062501/56816882550346895ddefd52/html5/thumbnails/83.jpg)
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();
![Page 84: Cross Platform Mobile Applications](https://reader035.fdocuments.net/reader035/viewer/2022062501/56816882550346895ddefd52/html5/thumbnails/84.jpg)
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);
![Page 85: Cross Platform Mobile Applications](https://reader035.fdocuments.net/reader035/viewer/2022062501/56816882550346895ddefd52/html5/thumbnails/85.jpg)
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); };
![Page 86: Cross Platform Mobile Applications](https://reader035.fdocuments.net/reader035/viewer/2022062501/56816882550346895ddefd52/html5/thumbnails/86.jpg)
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);});
![Page 87: Cross Platform Mobile Applications](https://reader035.fdocuments.net/reader035/viewer/2022062501/56816882550346895ddefd52/html5/thumbnails/87.jpg)
http://meetup.com/technext
87
Native Mobile App Development
![Page 88: Cross Platform Mobile Applications](https://reader035.fdocuments.net/reader035/viewer/2022062501/56816882550346895ddefd52/html5/thumbnails/88.jpg)
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
![Page 89: Cross Platform Mobile Applications](https://reader035.fdocuments.net/reader035/viewer/2022062501/56816882550346895ddefd52/html5/thumbnails/89.jpg)
http://meetup.com/technext
89
Hybrid Mobile App Development
![Page 90: Cross Platform Mobile Applications](https://reader035.fdocuments.net/reader035/viewer/2022062501/56816882550346895ddefd52/html5/thumbnails/90.jpg)
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
![Page 91: Cross Platform Mobile Applications](https://reader035.fdocuments.net/reader035/viewer/2022062501/56816882550346895ddefd52/html5/thumbnails/91.jpg)
http://meetup.com/technext
91
ShareFile Story
• as
![Page 92: Cross Platform Mobile Applications](https://reader035.fdocuments.net/reader035/viewer/2022062501/56816882550346895ddefd52/html5/thumbnails/92.jpg)
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
![Page 93: Cross Platform Mobile Applications](https://reader035.fdocuments.net/reader035/viewer/2022062501/56816882550346895ddefd52/html5/thumbnails/93.jpg)
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
![Page 94: Cross Platform Mobile Applications](https://reader035.fdocuments.net/reader035/viewer/2022062501/56816882550346895ddefd52/html5/thumbnails/94.jpg)
http://meetup.com/technext
References• Phone Gap Documentation• Titanium Mobile Documentation• ShareFile Story
94