cross platform mobile developmemnt
DESCRIPTION
TRANSCRIPT
Cross-Platform Mobile Development
Write Once..
Run Everywhere..
Any device..
Cell phone usages is ubiquitous
2008-122009-04
2009-082009-12
2010-042010-08
2010-122011-04
2011-082011-12
2012-042012-08
0
20
40
60
80
100
120
"Desktop""Mobile"
3%12%
52%
32%
Growth of the mobile web
Source : http://gs.statcounter.com/#mobile_vs_desktop-IN-monthly-200812-201208
I want a Mobile App
2008-12 2009-04 2009-08 2009-12 2010-04 2010-08 2010-12 2011-04 2011-08 2011-12 2012-04 2012-060
5
10
15
20
25
30
35
40
45
"SymbianOS""iOS""Android""BlackBerry OS""Samsung"
Growth of Top 5 mobile operating system
http://gs.statcounter.com/#mobile_os-ww-monthly-200812-201206
Mobile Platforms
iOSAndroidBlackBerryWPOther
2015
Operating System
2011 Market Share
2015 Market Share
Android 38.9% 43.8%BlackBerry 14.2% 13.4%iOS 18.2% 16.9%
WP7 / WM 3.8% 20.3%Other 24.9% 5.6%Total 100% 100%
2011
2011
2015
Mobile Platforms
The Native Experience
IDE
IDE
IDE
Emulator Store Consumer
Emulator
Simulator
Store
Store
Consumer
Consumer
The Native Experience
NativeApp
NativeApp
Device
Web Server
Ruby/java
FilesImages and
otherDatabase
Http RequestExternal
WebService
Execute UI & some application logic
Execute central Application logic
Backend 3rd Party
Native App
Demo
ProductionLearning Curve : Easy, Great Number of Tutorials + Libraries Tools : Great IDE with good debugging supportsMonetization : Direct access to market place / app store
Usage ScenarioData Driven AppRich Media
User ExperienceHardware : Direct Access to all Sensor / APIsUser InterfaceOffline Capability : Available( SQL database / Flat File)
Cost for cross – platform : Vendor Lock-in, device specific optimization
PlatformIOSAndroid
Windows Phone 7.xOthers...
Native App : Advantages & disadvantages
The Native Experience
Multi-plarform Apps
● Is this only for rich guys
● Time to complete a app
5 Approaches● Mobile Web● Client Side Web● Hybrid App● Interpreted App● Cross Compiling
The Mobile Web
Web Browser
Web Browser
Device
Web Server
Ruby/java
Database
Http RequestExternal
WebService
Executes UI & some Client side logic
Executes UI & central Application logic
Backend 3rd Party
FilesImages and
other
Server-Side Web
Frameworks / Toolkits
Zurb Foundation
http://foundation.zurb.com/
Twitter Bootstrap
http://twitter.github.com/bootstrap/
Demo
ProductionLearning Curve : Easy, Great Number of Tutorials + Libraries .Tools : Use any editor of your choice.Monetization : No App Store destribution.
Usage Scenario
Data Driven AppRich Media : Inferior Performance
User ExperienceHardware : Limited access of H/W features & APIsUser Interface : Fancy UI possible, but platform specific style required Offline Capability : Available( SQL database / Flat File)
Cost for cross – platform : Low, plain HTML run on any type of browser
PlatformiOSAndroid
Windows Phone 7.x (Mango)Others (Responsive Design)
Mobile Web : Advantages & disadvantages
Client-Side Web
Device
Web Server
Ruby/java
Database
Http Request External
WebService
Executes UI & some Application logic
Only central Application logic
Backend 3rd Party
FilesImages and
other
Client-Side Web
JavaScriptJavaScript
FilesImages and
other
FilesImages and
other DatabaseDatabase
Web Browser
Framework / toolkits
Demo
ProductionLearning Curve : Easy, Great Number of Tutorials + Libraries .Tools : Use any editor of your choice.Monetization : No App Store distribution
Usage ScenarioData Driven AppRich Media : Inferior Performance
User ExperienceHardware : Limited access of H/W features & APIsUser Interface : Mostly iOS like UI libraryOffline Capability : HTML 5, Otherwise Limited
Cost for cross – platform : Low, plain HTML run on any type of browser
Platform
iOSAndroid
Windows Phone 7.x (Mango)Others (Responsive Design)
Client-Side Web : Advantages & disadvantages
Hybrid Apps
Device
Web Server
Ruby/java
Database
ExternalWeb
Service
Executes UI & some Application logic
Only central Application logic
Backend 3rd Party
FilesImages and
other
Native Code
Interpreter
JavaScriptJavaScriptBridge
Native App
http://
http://
http://
Hybrid Apps
Framework / toolkits
Demo
ProductionLearning Curve : Easy, Great Number of Tutorials + Libraries .Tools : Use any editor of your choice / commercial tools.Monetization : App Store distribution
Usage ScenarioData Driven AppRich Media : Inferior Performance
User ExperienceHardware : Access to most H/W features & many API availableUser Interface : Huge effort required to match native UI Offline Capability :
Cost for cross – platform
Platform
iOSAndroid
Windows Phone 7.x (Mango)Others (Responsive Design)
Hybrid Apps : Advantages & disadvantages
Interpreted Apps
Device
Web Server
Ruby/java
Database
Backend
FilesImages and
other
DatabaseDatabase
http://
FilesFiles
ApplicationScript
ApplicationScript
Interpreter
APIAPI APIAPI APIAPI APIAPI
Abstraction LayerAbstraction Layer
Native APIs
Native App
http://
Only central Application logicExecutes UI & some Client side logic
Interpreted Apps
Framework / toolkits
Demo
ProductionLearning Curve : Specific API, Great Number of Tutorials + Libraries .Tools : IDEs, including debugger Monetization : App Store distribution
Usage Scenario
Data Driven App
User ExperienceHardware : Access to H/W & API available, wrapped with specific APIUser Interface : truly native widgetsOffline Capability
Cost for cross – platform
PlatformIOSAndroid
Windows Phone 7.x Others
Interpreted Apps : Advantages & disadvantages
Image found at : http://www.flickr.com/photos/danholton/2853935782/sizes/m/in/photostream/
Cross Compiling
UI(iOS)UI
(iOS)
UI(Android)
UI(Android)
UI(wp7)UI
(wp7)
Core(shared)Core
(shared)
C#
MonoTouch(iOS)
MonoDroid(Android)
Mono compiler
MSIL compiler
.NET RT(WP7)
NativeApp
NativeApp
NativeApp
WP7
Android
iOS
Backend
Cross Compiling (Mono)
Framework / toolkits
ProductionLearning Curve : New tool chain (take getting used to)Tools : IDEs, but debugging in target environment. Monetization : App Store distribution
Usage ScenarioData Driven AppRich Media : No partial supports
User ExperienceHardware : Access to H/W & API available, wrapped with specific APIUser Interface : Truly native widgets. Offline Capability :
Cost for cross – platform
Platform
iOSAndroid
Windows Phone 7.x (Mango)Others (Responsive Design)
Cross Compiled Apps : Advantages & disadvantages
Production Native Web Client-Side web
Hybrid Interpreted Cross Compiled
Learning Curve
Tools Monetization
Usages Scenario Data-driven App
Rich Media
User Experience
Hardware
User Interface
Offline capability
Platforms iOS Android W P 7 Others
Cost for cross platform
Questions
Advantages...
Open Source
Supported OS for Mobile Apps
Supported OS for Desktop Apps
Native UI
Full Access : camera, gps, local file system, phone book, more ….
Need to Know: Javascript , HTML, CSS, Ruby/ Python / PHP
Your Application
UI API Phone API
Javascript – Objective C Bridge
iPhone OS
OptionalModule
Your Application
UI API Phone API
Javascript – Java Bridge
Android OS
OptionalModule
Native iPhone APP Native Android APP
Your Application
UI API Phone API
Javascript – Ruby - Python Bridge to OS
Windows OS – Mac OS – Linux OS
OptionalModule
Desktop supports Ruby , php, Python and Javascript
var root = Titanium.Filesystem.resourcesDirectory;
var win = Titanium.UI.createWindow({orientationModes : [Ti.UI.PORTRAIT],backgroundImage : root + 'images/background.png'});var loginBtn = Ti.UI.createButton();
loginBtn.addEventListener('click',function() {var homeWin = require('../pages/home').getHomeWin;var homePage = new homeWin();homePage.open();win.close();
});
win.add(loginBtn);
var xhr = Titanium.Network.createHTTPClient();xhr.onerror = function(e) {
// Do some thing to notify the user};
xhr.open("POST", "http://abcd.com/users/login");xhr.setRequestHeader("content-type","application/json");var param = {
"user_name" : "soutom","password" : "mindfire",};
xhr.send(JSON.stringify(param));xhr.onload = function() {
if (this.status == '200') {// Success Block
}else{// Error Block
}};
Questions
Thank You
