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