Http://meetup.com/technext Cross Platform Mobile Applications By Rohit Ghatol Contact me – [email protected]

http://meetup.com/technext

Cross Platform Mobile ApplicationsBy Rohit GhatolContact me – [email protected]





mailto:[email protected]


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

http://quickoffice.com/

http://blog.punegtug.org/

http://blog.punegtug.org/


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






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 .






5

Understanding Mobile Apps






6

Reaching Mobile Users






7

1. Mobile Features

Complete Feature SetMostly Feature Sub Set






8

2. Tablet Features

Complete Feature SetAlmost CompleteFeature Set






9

3. User Interaction

Touch based

Traditional

Accelerometer

Compass






10

e.g Layar Application






11

4. Location aware

Location Aware and highly accurate

Can be Location Aware but approximate






12

5. Sensors

Handy Camera and Voice Recording

Upcoming NFC (Near Field Communication) turning phone into Credit Card, Access Card, Business Card Exchanger






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

6. Push Notifications

Push NotificationNotifying the User proactively






15

Challenges in building Mobile Applications






16

1. OS Fragmentation

Windows 7

Fragmentation






17

2. Multiple Teams/Product

Windows 7

Multiple Teams/Products






18

3. Uniform User Experience

Windows 7

Uniform User Experience






19

4. Feature Fragmentation

Feature Fragmentation






20

Approaches to Mobile Development






21

Types of Mobile App Dev

1. Native Mobile Apps

2. Cross Platform Mobile Apps

3. Hybrid partly Native partly Cross Platform






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






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






24

Cross Platform Mobile Apps

When To

• Time to market is critical

• Saving Cost is critical

When Not To






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://wiki.phonegap.com/w/page/36752779/PhoneGap-Plugins


26

Cross Platform Mobile App Development






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






28

Common Platform Approach






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






30

WebViews

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






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






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






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






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






35

Development• HTML/CSS Application uses Common API exposing device

features






36

Development• Sample code






37

Mapping to Native






38

Over all Architecture

Javascript Based Application

Titanium UI API Titanium Phone API

Titanium Framework

Window Dialog SQLite SQLite

File System Accelerometer

Compass etc






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• ……






40

Development

UI API Set






41

Development

UI API Set






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?






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






44

Compare Screens (IPhone)PhoneGap Titanium Mobile






45

Compare Screens (Android)PhoneGap Titanium Mobile






46

Open Source

MIT License

BSD License






47

PhoneGap

• Only platform to support 6 Platforms






48

PhoneGap• Standards based and extended






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

Demo Screens - IPhone






51

Demo Screens - Android






52

PhoneGap Features






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://jquerymobile.com/demos/1.0a3/docs/pages/multipage-template.html%23bar

http://jquerymobile.com/demos/1.0a3/%23docs/pages/docs-transitions.html

http://jquerymobile.com/demos/1.0a3/%23docs/pages/docs-dialogs.html

http://jquerymobile.com/demos/1.0a3/%23docs/toolbars/index.html

http://jquerymobile.com/demos/1.0a3/%23docs/forms/index.html

http://jquerymobile.com/demos/1.0a3/%23docs/lists/index.html


54

Code Walkthrough - PhoneGap






Getting Started PhoneGap

55

Step 1: Create Android Eclipse Project







56

Step 2: Add Phone Gap Java Library







57

Step 3: Add Phone Gap Javascript and with other web app files







58

Step 4: Modify Main Activity class







59

Step 5: Extend DriodGap instead of Activity







60

Step 6: Write Javascript Code to create UI &use PhoneGap API






61






62

PhoneGap on XCode






63






64

jQueryMobile UI Development






jQuery Declarative UI <div data-role="page" id="home">  <div data-role="header"> <h1>AlternativeTo Home</h1> </div>  <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






jQuery Declarative UI

66






67

Extending PhoneGap to open more of underlying system






68

Phone Gap Extension

• References - http://wiki.phonegap.com/w/page/36752779/PhoneGap-Plugins

• Author – Rohit Ghatol

Javascript Code

Android Code








69Mobile






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






71

Titanium Mobile

Currently supports only Android and IPhone platforms.






72

Titanium MobileTitanium JavaScript

Wekit JavascriptCore Mozilla Rhino

Interpreted By

IPhone Android






73

Titanium Architecture






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)






75

Demo Screens - IPhone






76

Demo Screens - Android






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






78

Code Walkthrough – Titanium Mobile






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
















82

Directory Structure






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();






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);






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); };






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);});






87

Native Mobile App Development






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






89

Hybrid Mobile App Development






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






91

ShareFile Story

• as





http://www.informationweek.com/news/smb/mobile/showArticle.jhtml?articleID=229400677&cid=RSSfeed_IWK_ALL


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






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






References• Phone Gap Documentation• Titanium Mobile Documentation• ShareFile Story

94





http://docs.phonegap.com/

http://developer.appcelerator.com/apidoc/mobile/latest

http://www.informationweek.com/news/smb/mobile/showArticle.jhtml?articleID=229400677&cid=RSSfeed_IWK_ALL

Documents

Http://meetup.com/technext Cross Platform Mobile Applications By Rohit Ghatol Contact me – [email protected]