Upload
halie-colin
View
218
Download
0
Tags:
Embed Size (px)
Citation preview
Developing downloadable mobile apps using HTML5 and PhoneGap “Apache Callback”
Ron Perry, CTO, Worklight Inc.
2
Agenda
Downloadable (native) apps vs. Web apps• HTML5 web apps vs. Downloadable apps
Using HTML5 in downloadable apps: the hybrid model• How hybrid apps work• Advantages and disadvantages
Writing an app with PhoneGap• The concept• Accessing device APIs
Our experience with PhoneGap
3
Critical HTML5 features are supported on mobile
iOS5 Android 2.2, 2.3 WinPhone 7.5• Canvas• Audio• Local Storage• Geolocation• Video• CSS3 borders, anim• Web Applications• SVG
• Elements• CSS3 position:fixed• Drag & Drop• Files• WebGL• IndexedDB, WebSQL
Desktop:
4
HTML5 makes mobile web apps possible
5
Native apps can still do much more
Video Processing
VoIP Audio ProcessingAccess Camera
App-Store Presence
6
Downloadable (Native) Apps
File System (on Mobile
Device)
Native App(Java/Obj-C/C#)
Mobile OS
7
Mobile Browser
Web Apps
Web App(HTML, CSS, JS)
Mobile OS
Web Server
8
Hybrid to the rescue
Advantages
Portability Reuse of existing skills
Access to device APIs
App-store presence
Combine HTML/CSS/JS with native codeUser interface in
HTML/CSSLogic and interaction
in JS
Special functions written in platform-specific native code
9
Hybrid Apps
File System (on Mobile
Device)
Mobile OS
Native Container
HTML, CSS, JS
10
FullNative
Speed as Necessary
Reasonable Available Low OverheadHybrid
App Development Comparison
Native
Device Access Speed App Store Approval
Process
Full Very Fast Available Mandatory
Development Cost
Expensive
Partial Fast Not AvailableReasonable NoneWeb
11
Architecture of a hybrid app
Native container:• Creates instance of UIWebView / android.webkit.WebView / etc.• Navigates to main html file• Implements listener/handler for requests coming from JS code• Activates JS code when necessary
HTML5/CSS3/JS code:• Implements UI and app logic• Activates native handlers through OS-specific mechanism (custom URL
scheme)• Receives responses through JS handlers
HTML resources can be packaged into downloadable app for performance boost
12
PhoneGap – Open Source Framework
The de-facto standard for hybrid app developmentNow in transition into becoming “Apache Callback”Provides:• A template implementation for the native container• Implementation of the JS<->Native bridge for 6 mobile OSs• OS-independent JS APIs for activating device functions
13
PhoneGap provides JS access to device APIs
14
PhoneGap run-time (native+JS) is part of the app
15
Example: raising a native alert from JS code
16
Example: getting device info
17
Example: accessing the camera
18
Worklight Platform: PhoneGap-based client-side
The Worklight Platform provides an enterprise-grade infrastructure for mobile apps
Includes features such as security, authentication, data-integration, push notifications, diagnostics, direct update and more
We chose PhoneGap as the basis for our client-side technology, (while exposing the PhoneGap APIs) and are very happy with the result!
19
A couple of Worklight-based apps
Lotte Card (Korean credit card company):• Combines 150 HTML5 screens with a
native augmented reality screen• Developed very quickly for iPhone and
Android
RealNews (for iPad):• Developed by RealCommerce, Worklight’s
distributors in Israel• Lists “hot” Israeli news articles by # of likes• Freely available on the app store
For More Information
20
Resource Location
PhoneGap Site http://www.phonegap.com
Apache Project Page http://incubator.apache.org/projects/callback.html
Worklight Webinars http://www.worklight.com/resources/webinars-and-tools
Thank You!