cross platform mobile applications webinar 110414145021 phpapp01

8/2/2019 Cross Platform Mobile Applications Webinar 110414145021 Phpapp01

1/73

Cross PlatformMobile ApplicationsBy Rohit GhatolContact me

[email protected]

[email protected]
mailto:[email protected]:[email protected]:[email protected]:[email protected]


2/73

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
http://www.synerzip.com/http://quickoffice.com/http://blog.punegtug.org/http://blog.punegtug.org/http://quickoffice.com/http://www.synerzip.com/


3/73

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


4/73

Mobile Trends


5/73

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


6/73

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

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


7/73


8/73

Mobile Trends

2000 2000-2005 2005-2010 2010-2015

Desktop

Web

Mobile

Mobile Trend Perception


9/73

Understanding Mobile Apps


10/73

Reaching Mobile Users


11/73

Characteristics

Complete Feature SetMostly Feature Sub Set


12/73

Characteristics

Complete Feature SetAlmost Complete

Feature Set


13/73

Characteristics

Touch based

Traditional

Accelerometer

Compass


14/73

Layar Application


15/73

Characteristics

Location Aware and

highly accurate

Can be Location Aware

but approximate


16/73

Characteristics

Handy Camera and Voice Recording

Upcoming NFC (Near Field Communication)

turning phone into Credit Card, Access Card,

Business Card Exchanger


17/73

Shopping Applications


18/73

Characteristics

Push NotificationNotifying the User proactively


19/73

Challenges in building MobileApplications


20/73

Challenges Mobile App Dev

Windows 7

Fragmentation


21/73


Windows 7

Multiple Teams/Products


22/73


Windows 7

Uniform User Experience


23/73


Feature Fragmentation


24/73

Types of Mobile App Dev

Native Mobile Apps

Cross Platform Mobile Apps

Hybrid partly Native partly Cross Platform


25/73

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


26/73

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


27/73

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 developcommon part

Use Native to develop the weight

lifting parts
http://wiki.phonegap.com/w/page/36752779/PhoneGap-Pluginshttp://wiki.phonegap.com/w/page/36752779/PhoneGap-Pluginshttp://wiki.phonegap.com/w/page/36752779/PhoneGap-Pluginshttp://wiki.phonegap.com/w/page/36752779/PhoneGap-Plugins


28/73

Cross Platform Mobile App

Development


29/73

Cross Platform Strategies

CommonPlatform

e.g WebKit

Mapping to

Native

PhoneGap Titanium

Cross PlatformSource Code


30/73

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 fromjavascript to java and vice a versa

In short WebView is the new Virtual Machine


31/73

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

black

berry

ios

android


32/73

Mobile App Dev Frameworks

Common Platform

PhoneGap

Titanium Desktop

Mapping to Native

Titanium Mobile

Rho Mobile


33/73

PhoneGap


34/73

PhoneGap

Only platform to support 6 Platforms


35/73

PhoneGap

Standards based and extended


36/73


37/73

PhoneGap Features


38/73

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


39/73

Demo Screens - IPhone


40/73

Demo Screens - Android


41/73

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


42/73

Digging Deeper


43/73

Bootstrapping phonegap

Phone Gap


44/73

Bootstrapping phonegap

function init() {

document.addEventListener('deviceready ,loadMap,false);

}


45/73


46/73

PhoneGap Walkthrough

Lets see a Live Demo


47/73

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


48/73

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


49/73

Titanium Mobile


50/73

Titanium Mobile


51/73

Titanium Mobile

Titanium JavaScript

Wekit

JavascriptCoreMozilla Rhino

Interpreted By

IPhone Android


52/73

Titanium Architecture


53/73

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


54/73

Demo Screens - IPhone


55/73

Demo Screens - Android


56/73

Directory Structure


57/73

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


58/73

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


59/73

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

};


60/73

search.js (Event handling)

//send ajax request to fetch altrnatives for searchText

function searchAlternatives(searchText){

xhr.open('GET','http://api.alternativeto.net/software/'+searchText+'/?c

ount=15');

xhr.send();

}

//start search when user hits enter on search box

search.addEventListener('return', function(e)

{

actInd.show();

searchAlternatives(e.value);

});


61/73

Titanium Walkthrough

Lets see a Live Demo


62/73

Challenges and Advantages

Being Native is the biggest strength

Limited cross platform api is a weakness

Platform specific api leads to fragmentation within code


63/73

Native Mobile App

Development


64/73

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


65/73


66/73

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
http://www.informationweek.com/news/smb/mobile/showArticle.jhtml?articleID=229400677&cid=RSSfeed_IWK_ALL


67/73

ShareFile Story

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


68/73

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 forHTML/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


69/73

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


70/73

Cross Desktop App Dev

Following are options worth considering

Nokia QT (webkit based)

Titanium Desktop (webkit based)

Adobe Air (flash based)

Java

Many more


71/73

Building your own Framework

Common HTML/JavaScript

Code

WebKit

IPhone,IPad, Mac

Obj c

WebKit

Android

Java

WebKit

Windows

C#

WebKit

?

?


72/73

JavaScript to Native Channel

Assume a single channel from Javascript to native and backfrom 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 andadd 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.


73/73

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

cross platform mobile applications webinar 110414145021 phpapp01

Documents