cross platform-mobile-applications

www.synerzip.com

Cross Platform Mobile ApplicationsBy Rohit GhatolContact me – rohit.ghatol@synerzip.com rohitsghatol@gmail.com

www.synerzip.com

2

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

3

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

www.synerzip.com

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 .

www.synerzip.com

5

Understanding Mobile Apps

www.synerzip.com

6

Reaching Mobile Users

www.synerzip.com

7

1. Mobile Features

Complete Feature SetMostly Feature Sub Set

www.synerzip.com

8

2. Tablet Features

Complete Feature SetAlmost CompleteFeature Set

www.synerzip.com

9

3. User Interaction

Touch based

Traditional

Accelerometer

Compass

www.synerzip.com

10

e.g Layar Application

www.synerzip.com

11

4. Location aware

Location Aware and highly accurate

Can be Location Aware but approximate

www.synerzip.com

12

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

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

www.synerzip.com

14

6. Push Notifications

Push NotificationNotifying the User proactively

www.synerzip.com

15

Challenges in building Mobile Applications

www.synerzip.com

16

1. OS Fragmentation

Windows 7

Fragmentation

www.synerzip.com

17

2. Multiple Teams/Product

Windows 7

Multiple Teams/Products

www.synerzip.com

18

3. Uniform User Experience

Windows 7

Uniform User Experience

www.synerzip.com

19

4. Feature Fragmentation

Feature Fragmentation

www.synerzip.com

20

Types of Mobile App Dev

1. Native Mobile Apps2. Cross Platform Mobile Apps3. Hybrid partly Native partly Cross Platform

www.synerzip.com

21

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

www.synerzip.com

22

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

www.synerzip.com

23

Cross Platform Mobile Apps

When To

• Time to market is critical

• Saving Cost is critical

When Not To

www.synerzip.com

24

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

www.synerzip.com

25

Cross Platform Mobile App Development

www.synerzip.com

26

Cross Platform Strategies

Common Platform

e.g WebKit

Mapping to Native

PhoneGap Titanium Mobile

Cross Platform Source Code

www.synerzip.com

27

Common Platform Approach

www.synerzip.com

28

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

www.synerzip.com

29

WebViews

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

www.synerzip.com

30

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

www.synerzip.com

31

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

www.synerzip.com

32

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

www.synerzip.com

33

Development• HTML/CSS Application uses Common API exposing device

features

www.synerzip.com

34

Development• Sample code

www.synerzip.com

35

Mapping to Native

www.synerzip.com

36

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)

www.synerzip.com

37

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

www.synerzip.com

38

Development

UI API Set

www.synerzip.com

39

Development

UI API Set

www.synerzip.com

40

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?

www.synerzip.com

41

Mobile App Dev Frameworks

Common Platform

• PhoneGapMapping to Native

• Titanium Mobile• Rhodes Mobile

www.synerzip.com

42

Compare Screens (IPhone)

PhoneGap Titanium Mobile

www.synerzip.com

43

Compare Screens (Android)

PhoneGap Titanium Mobile

www.synerzip.com

44

Open Source

MIT License

BSD License

www.synerzip.com

45

PhoneGap

• Only platform to support 6 Platforms

www.synerzip.com

46

PhoneGap• Standards based and extended

www.synerzip.com

47

www.synerzip.com

48

PhoneGap Features

www.synerzip.com

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

www.synerzip.com

50

Demo Screens - IPhone

www.synerzip.com

51

Demo Screens - Android

www.synerzip.com

52

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

53

www.synerzip.com

54

• Appcelerator Titanium SDK• Titanium Module SDK

• Appcelerator Titanium SDK• Titanium Module SDK

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

Apache License

www.synerzip.com

55

Titanium Mobile

www.synerzip.com

56

Titanium MobileTitanium JavaScript

Wekit JavascriptCore Mozilla Rhino

Interpreted By

IPhone Android

www.synerzip.com

57

Titanium Architecture

www.synerzip.com

58

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)

www.synerzip.com

59

Demo Screens - IPhone

www.synerzip.com

60

Demo Screens - Android

www.synerzip.com

61

Challenges and Advantages• Being Native is the biggest strength

• Limited cross platform api is a weakness

• Platform specific api leads to fragmentation within code

www.synerzip.com

62

Native Mobile App Development

www.synerzip.com

63

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

www.synerzip.com

64

Hybrid Mobile App Development

www.synerzip.com

65

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

www.synerzip.com

66

ShareFile Story

• as

www.synerzip.com

67

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

More will come out of discussion, comments are welcome

www.synerzip.com

68

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

www.synerzip.com

69

Code Walkthrough - PhoneGap

www.synerzip.com

70

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

www.synerzip.com

71

Digging Deeper

www.synerzip.com

72

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

73

Bootstrapping phonegapfunction init() { document.addEventListener('deviceready’,loadMap,false);}

www.synerzip.com

74

Bootstrapping phonegapfunction 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

75

PhoneGap Walkthrough• Lets see a Live Demo

www.synerzip.com

76

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

• Author – Rohit Ghatol

www.synerzip.com

77

Code Walkthrough – Titanium Mobile

www.synerzip.com

78

Directory Structure

www.synerzip.com

79

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

www.synerzip.com

80

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

81

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

www.synerzip.com

82

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

www.synerzip.com

83

Titanium Walkthrough• Lets see a Live Demo

www.synerzip.com

84

Questions?

www.synerzip.com

Hemant Elhence, hemant@synerzip.com469.322.0349

Agile Software Product Development Partner

www.synerzip.com

85

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 advantage5. Offers long term flexibility – allows (facilitates) taking offshore

team captive – aka “BOT” option

www.synerzip.com

86

Our Clients

www.synerzip.com

87

Questions?

www.synerzip.com

Hemant Elhence, hemant@synerzip.com469.322.0349

Agile Software Product Development Partner