HTML5Fest Mobile Web Ron Perry Developing Downloadable Mobile Apps Using HTML5 and PhoneGap
-
Upload
siva-tarun -
Category
Documents
-
view
12 -
download
3
description
Transcript of HTML5Fest Mobile Web Ron Perry Developing Downloadable Mobile Apps Using HTML5 and PhoneGap
-
Developing downloadable mobile apps using HTML5 and PhoneGap Apache Callback
Ron Perry, CTO, Worklight Inc.
-
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
-
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:
-
HTML5 makes mobile web apps possible
-
Native apps can still do much more
Video Processing
VoIP Audio Processing Access Camera
App-Store Presence
-
Downloadable (Native) Apps
File System (on Mobile
Device)
Native App (Java/Obj-C/C#)
Mobile OS
-
Mobile Browser
Web Apps
Web App (HTML, CSS, JS)
Mobile OS
Web Server
-
Hybrid to the rescue
Advantages
Portability Reuse of
existing skills Access to
device APIs App-store presence
Combine HTML/CSS/JS with native code
User interface in HTML/CSS
Logic and interaction in JS
Special functions written in platform-specific native code
-
Hybrid Apps
File System (on Mobile
Device)
Mobile OS
Native Container
HTML, CSS, JS
-
Full Native
Speed as Necessary
Reasonable Available Low
Overhead Hybrid
App Development Comparison
Native
Device Access
Speed App Store Approval Process
Full Very Fast Available Mandatory
Development Cost
Expensive
Partial Fast Not
Available Reasonable None Web
-
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
-
PhoneGap Open Source Framework
The de-facto standard for hybrid app development
Provides: A template implementation for the native container
Implementation of the JSNative bridge for 6 mobile OSs
OS-independent JS APIs for activating device functions
-
PhoneGap provides JS access to device APIs
-
PhoneGap run-time (native+JS) is part of the app
-
Example: raising a native alert from JS code
-
Example: getting device info
-
Example: accessing the camera
-
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!
-
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, distributors in Israel
Freely available on the app store
-
For More Information
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!
http://www.phonegap.com/http://incubator.apache.org/projects/callback.htmlhttp://www.worklight.com/resources/webinars-and-toolshttp://www.worklight.com/resources/webinars-and-toolshttp://www.worklight.com/resources/webinars-and-toolshttp://www.worklight.com/resources/webinars-and-toolshttp://www.worklight.com/resources/webinars-and-tools