Hybrid mobile applications combine native and web technologies. They use a native shell application containing a web view to display web-based UIs, allowing development with web standards like HTML, CSS, and JavaScript. This provides better performance than pure web apps while reducing costs compared to purely native apps. Popular hybrid frameworks include Titanium, PhoneGap, Rhodes, jQTouch, and iUI. They support building cross-platform mobile apps for devices like iPhone, Android, BlackBerry and more.

1. HYBRID MOBILE
APPLICATION FRAMEWORK
http://iolo.pe.kr/

2. Backgrounds

3. Mobile Platforms in Action - 春秋戰國時代

4. Mobile Platforms - Developer’s Considerations
Symbian Blackberry Palm Windows
Android iPhoneOS MeeGo Bada
OS OS WebOS Mobile
Nokia,Sony,
Vendor Google Apple RIM Palm Microsoft Intel, Nokia Samsung
Ericsson
Symbian Blackberry Windows
Kernel Linux OSX/Darwin Linux Linux Nucelus OS
OS OS CE
Objective-C,
C++(QT),HT C++/C#/VB
Java(Dalvik), HTML/CSS/ C++, HTML/CSS/ C++(QT),C(
SDK ML/CSS/Jav (.NET), C++
C/C++(NDK) JavaScrpt(D Java(ME) JavaScript GTK)
aScript(WRT) Silverlight
ashCode)
WebKit/Chr
Web WebKit/Saf RIM, Opera WebKit, IE Mobile, Gecko/Fenn
ome, Opera WebKit Dolphine
Browser ari Mini Opera Mini Opera Mini ec, WebKit
Mini
Blackberry Palm Windows
Android MeeGo Samsung
AppStore App Store Nokia OVI App World WebOS Market
Market Software App Store
App Store pace

5. Mobile Application Models

6. Native Mobile Application
 Utilize the Platform/Vendor Specific Native SDK
 Programming Languages
 C/C++
 Objective-C
 Java/Dalvik
 Java/ME
 C#/.NET
 HTML/CSS/JavaScript
 Frameworks/Libraries
 CocoaTouch, CoreGraphics, CoreAnimation, …
 WPF, Silverlight Web
 OpenGL/ES Browser
 QT, GTK
 Symbian WRT
Native
 Development Environment SDK
 Eclipse with various plugins
 Andorid SDK / NDK Mobile
 Xcode/OSX, DashCode Device
 GCC toolchain

7. Mobile Web Application
 Utilize the Built-in Web Browser
 Server-side Mobile Web Application
 Client-side Mobile Web Application
 Programming Languages
 HTML/CSS/JavaScript
 Frameworks/Libraries
 jQuery, DojoToolkit, Prototype/Scriptaculuous, …
 Development Environment
Web
 Web Browser with Firebug… Browser
Native
SDK
Mobile
Device

8. Alternative Mobile Application Models?
Application Quality
Native
BEST Mobile
Applications
?
Mobile
Web WORST
Applications
Development Cost

9. Hybrid Mobile Application
 Client-side Mobile Web Application with the Boilerplate Native App
 Embed the Built-in Web Browser as a Platform Runtime
 Create a Boilerplate Native App as an Web Application Launcher
 Programming Languages
 More “Experienced” HTML/CSS/JavaScript
 Native Support
 C/C++, Objective-C, C#/.NET, …
 Frameworks/Libraries
 Light-weight JavaScript Frameworks for Mobile
 jQTouch, iUI, … Web
Browser
 Native Support
 Titanium
 PhoneGap Native
 Rhodes SDK
 Development Environment
Mobile
 Web Browser with Firebug …
Device
 Device Specific Packaging Tools

10. Positioning of Hybrid Mobile Application
Application Quality
Native
BEST Mobile
Applications
Hybrid
Mobile
Applications
Mobile
Web WORST
Applications
Development Cost

11. Mobile Application Models
Native Mobile Applications Hybrid Mobile Applications Mobile Web Applications
Proprietary
UI Toolkit JavaScript Frameworks/Libraries
UI Toolkit
Web Standards
Proprietary
Frameworks HTML5 CSS JavaScript
Native Libraries Platform Dependant Device API Platform Independent Device API
Proprietary
Built-in Web Browser
Development Environment
Platform Specific Native SDK
Android
iPhone SDK .NET Mobile …
SDK/NDK

12. Mobile Application Frameworks

13. Titanium by Appcelerator
 Home Page
 http://www.appcelerator.com/
 Features
 Adobe AIR-like RIA style framework
 Supported Devices
 Desktop (Windows/Mac/Linux)
 Android, iPhone
 iPad(BETA), Blackberry(BETA), WM(unofficial)
 Programming Language
 JavaScript(UI, Device API, …), HTML, CSS
 License
 OSS(APL2). Commercial Tech. Support/Education
 Community(Free)/Professional($199/M)/Enterprise($499/M)
 PROS
 Built-in UI Toolkit
 Desktop support(embedded WebKit)
 CONS
 Built-in UI Toolkit
 Buggy development tools(Titanium Developer)

14. Titanium by Appcelerator

15. PhoneGap by Nitobi
 Home Page
 http://phonegap.com/
 Features
 Custom DAP with natvie mobules for various Mobile Platforms
 jQuery-like JavaScript libraries
 Supported Devices
 iPhone, Android, Blackberry
 WM(unofficial), Symbian/WRT(unofficial), Palm/WebOS(unofficial), Maemo(unofficial)
 Programming Language
 JavaScript(Device API), HTML, CSS
 License
 OSS(MIT License). Commercial Tech. Support / Education
 PROS
 Full-featured mobile device emulator (PhoneGap Simulator)
 Plenty document / active developer community
 CONS
 Manual build/deploy with Ruby
 No bult-in UI Toolkit

16. PhoneGap by Nitobi

17. Rhodes by Rhomobile
 Home Page
 http://rhomobile.com/products/rhodes/
 Features
 RoR-like framework with embedded ruby(erb)
 Offline-Online Sync(RhoSync; commercial).
 Virtualized online development/test environment (RhoHub; commercial)
 Supported Devices
 iPhone, Blackberry, WM, Symbian, Android
 Programming Languages
 Embedded Ruby, Javascript(UI Toolkit, Device API, …) HTML, CSS
 License
 OSS(GPLv3). For commercial application $500/App(No user limit)
 PROS
 Various supported devices
 Virtualized online development/test environment
 CONS
 Unfamiliar framework
 GPL

18. Rhodes by Rhomobile

19. JavaScript UI Toolkits
 jQTouch
 http://jqtouch.com/
 jQuery plugin
 Optimized for mobile browser
 iPhone/WebKit dedicated features
 Custome theme support
 OSS(MIT)
 iUI
 http://code.google.com/p/iui/
 The first JavaScript UI Toolkit for iPhone
 DashCode-like light-weight JavaScript UI Toolkit
 Web standard oriented HTML/CSS.
 Custom theme support
 OSS(BSD)
 Platform-specific Mobile Web Frameworks
 DashCode/XCode
 Symbian/WRT
 Palm/WebOS

20. Mobile Application Frameworks
Device Supported Developer Standard-
Cost Productivity UI
Control Devices Pool aware
Native X X O O X △ X
Web O O X X O O O
Titanium △ △ △ △ △ X X
PhoneGap △ △ X △ △ X △
Rhodes X △ △ △ △ X X
? O O O O O O O

21. Hybrid Mobile Application Framework

22. Hybrid Mobile Application
Framework
Web Standards
Application
HTML5 CSS3 JavaScript UI Toolkit*
Framework*
Development Lifecycle Management Tools* Mobile Device Simulator*
Device API Wrapper( javascript)*
Device Independant API( javascript)
Device Dependant Impl(native)* BONDI/DAP/WA
impl(native)
iPhone Android WM
Objective-C Java/Dalvik C++/C#/.NET
Mobile Platforms with “State of the Art” Browser

23. …
 …

24. May the Source be with You…