Date post: | 13-Jan-2015 |
Category: |
Technology |
Upload: | rohit-ghatol |
View: | 5,175 times |
Download: | 0 times |
Cross Platform Mobile ApplicationsBy Rohit GhatolContact me – [email protected] [email protected]
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