Cross Platform Mobile ApplicationsBy Rohit GhatolContact me – rohit.ghatol@synerzip.com rohitsghatol@gmail.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

Topics• Mobile Trends• Understanding Mobile Apps• Cross Platform Mobile App Development• Pure HTML/JavaScript – PhoneGap• Interpreted JavaScript – Titanium

• Native Mobile App Development• Hybrid Mobile App Development• Building your own Cross Platform Framework

Mobile Trends

Source - http://www.betanews.com/joewilcox/article/The-Mobile-Web-is-NOW-tough-luck-PCs/1278532718

Source - http://www.betanews.com/joewilcox/article/The-Mobile-Web-is-NOW-tough-luck-PCs/1278532718

Frequent Users Rare Users

Local Business Search

Source - http://www.marketingprofs.com/charts/2010/3857/local-business-search-via-mobile-up-14

Mobile Trends

2000 2000-2005 2005-2010 2010-2015

DesktopWebMobile

Mobile Trend Perception

Understanding Mobile Apps

Reaching Mobile Users

Characteristics

Complete Feature SetMostly Feature Sub Set

Characteristics

Complete Feature SetAlmost CompleteFeature Set

Characteristics

Touch based

Traditional

Accelerometer

Compass

Layar Application

Characteristics

Location Aware and highly accurate

Can be Location Aware but approximate

Characteristics

Handy Camera and Voice Recording

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

Shopping Applications

Characteristics

Push NotificationNotifying the User proactively

Challenges in building Mobile Applications

Challenges – Mobile App Dev

Windows 7

Fragmentation

Challenges – Mobile App Dev

Windows 7

Multiple Teams/Products

Challenges – Mobile App Dev

Windows 7

Uniform User Experience

Challenges – Mobile App Dev

Feature Fragmentation

Types of Mobile App Dev• Native Mobile Apps• Cross Platform Mobile Apps• Hybrid partly Native partly Cross Platform

Native Mobile Apps

When To

• Long Running Services

• Complex N/W comm.

• Canvas based Apps

• Only Few Platforms

When Not To

• Replica Web Apps

• Standard Restful

• Widget based apps

• Many Platforms

Cross Platform Mobile Apps

When To

• Replica Web Apps

• Standard Restful

• Widget based apps

• Many Platforms

When Not To

• Long Running Services

• Complex N/W comm.

• Canvas based Apps

• Only Few Platforms

Hybrid Mobile Apps

When To

• Fairly Simple UI

• Complex Backend

• Quite few platforms

• E.g ShareFile

• Recommended method - 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

Cross Platform Mobile App Development

Cross Platform Strategies

Common Platform

e.g WebKit

Mapping to Native

PhoneGap Titanium

Cross Platform Source Code

WebKit Platform• All Mobile Platforms have something common that is a

Modern Browser

• All these browsers are based on WebKit

• Moreover all these platform support showing embedded browser in Applications (aka WebView)

• Strange enough all these WebViews provide hooks from javascript to java and vice a versa

• In short WebView is the new Virtual Machine

Mapping to Native Code• Say Application is written in JavaScript

• The JavaScript code is running in Interpreter

• The Interpreter internally forwards calls to the native code

• Limitation being the you can only map to subset of code available on all target platforms.

• OR you allow for fragmentation in api, like Titanium Mobile does for involving Android services

blackberry

ios

android

Mobile App Dev Frameworks

Common Platform

• PhoneGap• Titanium Desktop

Mapping to Native

• Titanium Mobile• Rho Mobile

PhoneGap

PhoneGap

• Only platform to support 6 Platforms

PhoneGap• Standards based and extended

PhoneGap Features

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

• Use existing IDEs like Eclipse or Xcode, PhoneGap has no IDE

Demo Screens - IPhone

Demo Screens - Android

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

Digging Deeper

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>

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

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

PhoneGap Walkthrough• Lets see a Live Demo

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

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

Samples• Multipage Template• Page Slide Transitions• Dialogs• Toolbars• Forms• Lists

Titanium Mobile

Titanium Mobile

Titanium MobileTitanium JavaScript

Wekit JavascriptCore Mozilla Rhino

Interpreted By

IPhone Android

Titanium Architecture

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

Demo Screens - IPhone

Demo Screens - Android

Directory Structure

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

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

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

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

Titanium Walkthrough• Lets see a Live Demo

Challenges and Advantages• Being Native is the biggest strength

• Limited cross platform api is a weakness

• Platform specific api leads to fragmentation within code

Native Mobile App Development

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

• Have concrete plans on • What is Trial app?• How does user upgrade?• Use in app billing to have fine grained control

• Plan for risks if this is your companies first Mobile App deployment

Hybrid Mobile App Development

Hybrid App Development• Have Web Developers for Common UI• Have native code experts for heavy weight lifting• Use frameworks like PhoneGap to glue the above two pieces• Measure at every milestone to keep track of effect of changes• Use Automation to regress every layer

ShareFile Story

• as

Comparison

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

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

Cross Desktop App Dev• Following are options worth considering• Nokia QT (webkit based)• Titanium Desktop (webkit based)• Adobe Air (flash based)• Java• Many more

Building your own Framework

Common HTML/JavaScript Code

WebKit

IPhone,IPad, Mac

Obj c

WebKit

Android

Java

WebKit

Windows

C#

WebKit

?

?

JavaScript to Native Channel• Assume a single channel from Javascript to native and back

from native to Javascript is present

• This Single Channel can provide infinite control to the native code. One needs to just add more code to the native end and add new messages for it to be exposed.

• However, understand that Javascript is single threaded and the callbacks will execute only if there is no javascript running.

Building Proof of Concepts• Building Proof of Concepts is straight forward on• Android• IPad, IPhone, IPod Touch and Mac• Even for BlackBerry and WebOS there is some documentatiion

• For Windows, Linux and other mobile platforms one can refer to the source code of• Titanium Desktop• Phone Gap