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!