11. Native App
Web Server
Ruby/
java
Native Http Request
App External
Web
Service
Files
Images and Database
other
Device Backend 3rd Party
Execute UI & some Execute central Application logic
application logic
13. Native App : Advantages & disadvantages
Production
Learning Curve : Easy, Great Number of Tutorials + Libraries
Tools : Great IDE with good debugging supports
Monetization : Direct access to market place / app store
Usage Scenario
Data Driven App
Rich Media
User Experience
Hardware : Direct Access to all Sensor / APIs
User Interface
Offline Capability : Available( SQL database / Flat File)
Platform
IOS Windows Phone 7.x
Android Others...
Cost for cross – platform : Vendor Lock-in, device specific optimization
18. Server-Side Web
Web Server
Ruby/
java
Web Http Request
Browser External
Web
Service
Files
Images and
other Database
Device Backend 3rd Party
Executes UI & some Executes UI & central Application logic
Client side logic
19. Frameworks / Toolkits
Zurb Foundation
http://foundation.zurb.com/
Twitter Bootstrap
http://twitter.github.com/bootstrap/
21. Mobile Web : Advantages & disadvantages
Production
Learning Curve : Easy, Great Number of Tutorials + Libraries .
Tools : Use any editor of your choice.
Monetization : No App Store destribution.
Usage Scenario
Data Driven App
Rich Media : Inferior Performance
User Experience
Hardware : Limited access of H/W features & APIs
User Interface : Fancy UI possible, but platform specific style required
Offline Capability : Available( SQL database / Flat File)
Platform
iOS Windows Phone 7.x (Mango)
Android Others (Responsive Design)
Cost for cross – platform : Low, plain HTML run on any type of browser
23. Client-Side Web
Web Browser Web Server
JavaScript Ruby/
Http java
Request External
Web
Service
Files
Images and
Images and
other
other Database
Files
Images and
other Database
Device Backend 3rd Party
Executes UI & some Only central Application logic
Application logic
26. Client-Side Web : Advantages & disadvantages
Production
Learning Curve : Easy, Great Number of Tutorials + Libraries .
Tools : Use any editor of your choice.
Monetization : No App Store distribution
Usage Scenario
Data Driven App
Rich Media : Inferior Performance
User Experience
Hardware : Limited access of H/W features & APIs
User Interface : Mostly iOS like UI library
Offline Capability : HTML 5, Otherwise Limited
Platform
iOS Windows Phone 7.x (Mango)
Android Others (Responsive Design)
Cost for cross – platform : Low, plain HTML run on any type of browser
28. Hybrid Apps
Native App
Web Server
Native Code
Ruby/ http://
http:// java
External
Interpreter Web
Service
http://
Bridge
Files
JavaScript Images and
other Database
Device Backend 3rd Party
Executes UI & some Only central Application logic
Application logic
31. Hybrid Apps : Advantages & disadvantages
Production
Learning Curve : Easy, Great Number of Tutorials + Libraries .
Tools : Use any editor of your choice / commercial tools.
Monetization : App Store distribution
Usage Scenario
Data Driven App
Rich Media : Inferior Performance
User Experience
Hardware : Access to most H/W features & many API available
User Interface : Huge effort required to match native UI
Offline Capability :
Platform
iOS Windows Phone 7.x (Mango)
Android Others (Responsive Design)
Cost for cross – platform
33. Interpreted Apps
Native App
Native APIs
http:// Web Server
API
API API
API API
API API
API
Ruby/
java
Abstraction Layer
Abstraction Layer http://
Interpreter Files
Images and
other Database
Database
Database
Application
Application Backend
Script
Script
Files
Files
Device
Executes UI & some Client side logic Only central Application logic
36. Interpreted Apps : Advantages & disadvantages
Production
Learning Curve : Specific API, Great Number of Tutorials + Libraries .
Tools : IDEs, including debugger
Monetization : App Store distribution
Usage Scenario
Data Driven App
User Experience
Hardware : Access to H/W & API available, wrapped with specific API
User Interface : truly native widgets
Offline Capability
Platform
IOS Windows Phone 7.x
Android Others
Cost for cross – platform
40. Cross Compiled Apps : Advantages & disadvantages
Production
Learning Curve : New tool chain (take getting used to)
Tools : IDEs, but debugging in target environment.
Monetization : App Store distribution
Usage Scenario
Data Driven App
Rich Media : No partial supports
User Experience
Hardware : Access to H/W & API available, wrapped with specific API
User Interface : Truly native widgets.
Offline Capability :
Platform
iOS Windows Phone 7.x (Mango)
Android Others (Responsive Design)
Cost for cross – platform
41. Production Native Web Client-Side Hybrid Interpreted Cross
web Compiled
Learning Curve
Tools
Monetization
Usages
Scenario
Data-driven App
Rich Media
User
Experience
Hardware
User Interface
Offline capability
Platforms
iOS
Android
WP7
Others
Cost for cross
platform
44. Advantages...
Need to Know: Javascript , HTML, CSS,
Ruby/ Python / PHP
Supported OS for Mobile Apps
Supported OS for Desktop Apps
Native
UI
Open Source
Full Access : camera, gps, local file system, phone book, more ….
45. Your Application Your Application
Optional Optional
UI API Phone API UI API Phone API
Module Module
Javascript – Objective C Bridge Javascript – Java Bridge
iPhone OS Android OS
Native iPhone APP Native Android APP
Your Application
UI API Phone API
Optional Desktop supports
Module
Ruby , php, Python
Javascript – Ruby - Python Bridge to OS
and Javascript
Windows OS – Mac OS – Linux OS
46. 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);
47. 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
}
};
