HYBRID APPLICATION

DEVELOPMENT IN
PHONEGAP USING
UI TOOLKITS
RAJESH KUMAR
Technical Lead, Aricent

PUNEET INDER KAUR

Senior Software Engineer, Aricent

> are required to be supported on multiple mobile platforms

> are existing Web-based applications that must be ported
on mobile platforms
> do not require high graphical performance such as for
gaming applications
Certain factors must be kept in mind when choosing a specific
approach for development. Native development is preferred
over development using hybrid or Web-based development,
but only when the applications:
> are performance-centric, meeting strict launch times and
having smooth, complex animations and highly graphical

HYBRID APPLICATION
DEVELOPMENT IN
PHONEGAP USING UI TOOLKITS
Introduction

functionality that is not provided by PhoneGap APIs. For example,

PhoneGap is a hybrid application development platform that

(NFC) hardware and reading/writing NDEF messages, then

supports multiple platforms such as iOS, Android, Blackberry,

plug-ins will have to be written for the targeted platforms.

interfaces
> require native functionality such as WiFi, with NFC

Market Overview
TRENDS IN HYBRID APPLICATION DEVELOPMENT
Hybrid applications, which offer a balance between HTML5based Web apps and native apps, will be used in more than 50

PhoneGap resides above the Mobile Application Framework.

PhoneGap renders applications developed using these Web-

WebView uses the HTML rendering engine and the JS engine

specific technologies on smartphones, thus enabling application

to render HTML/CSS and execute Java Script. PhoneGap

development for iOS, Android, Blackberry, WP7, and WP8

provides plug-ins in the form of JS APIs that can be used in the

platforms without knowing the native programming APIs.

WEB application to access the native features of the OS.

10

15

20

25

30

35

40

32%

Sencha Touch/
jQTouch

30%
26%

Mono

24%

Appcelerator

22%

Adobe Flex
Unity 3

20%
17%

AppMobi

16%

RunRev

16%

MoSync

16%

percent of mobile apps by 2016, according to a report from IT

research firm Gartner. Gartner forecasts that by the end of

develop mobile apps using HTML, CSS, and JavaScript (JS).

0
PhoneGap

Corona

Windows Phone 7 (WP7), and Windows Phone 8 (WP8). It is an

PHONEGAP ARCHITECTURE

% of developers using each tool (normalized)

connectivity not provided by PhoneGap wrapper APIs

> require a native look and feel for each platform

if an application requires accessing Near Field Communication

application development framework that enables users to

Cross-Platform Tool Mindshare Index 2012

Top-10 CPTs being used by developers,
irrespective of their primary tool

2013, mobile phones will overtake PCs as the most common

PhoneGap Features

Web-access devices. They recommend organizations be open

PhoneGap provides APIs to allow developers to use device-

to augmentations to the Web (such as hybrid application

UI FRAMEWORKS USED IN PHONEGAP

development) to deploy on mobile today. According to a report

PhoneGap applications use HTML5/CSS for creating UI of the

by Forrester, the choice between adopting a native application

applications, with several UI frameworks available that can be

development approach or one that uses HTML5 depends on

used to create fast and impressive mobile applications in

the people who will use the apps, the companys business

PhoneGap (e.g., jQuery, jQuery Mobile, and Sencha Touch).

specific features such as phone camera, accelerometer, contacts,

WHEN TO USE PHONEGAP

objectives, and the strategies they plan to employ in order to

and storage using the PhoneGap standard plug-ins. It enables

PhoneGap can be used in situations where development time

achieve those objectives.

developers to create custom platform-specific implementations

and costs must be reduced. PhoneGap can be used when

using custom plug-ins. Plug-ins enable developers to add

applications meet the following conditions:

The snapshots below show sample screens of UI created using

Sencha Touch and jQuery Mobile.

COMPETING HYBRID APPLICATION DEVELOPMENT

FRAMEWORKS
Contemporary hybrid application frameworks include Adobe

WEB APP

PhoneGap, Adobe Air/Flex, Appcelerator (Titanium), Motorola

Solutions (RhoMobile), Qt (Nokia), Sencha, and Xamarin

PhoneGap Framework
HTML Rendering Engine (WebView)

(MonoTouch and Mono for Android). According to the

independent research firm Vision Mobile, PhoneGap is the

Plug-in (PhoneGap, Custom)

leader in developer mindshare of cross-platform technologies,

like those seen in the snapshot below.

Mobile Application Framework

UI Framework

Window Manager

PhoneGap was named 2012 Technology of the Year by InfoWorld

[7] and Best Cross-Platform Development Tool by Code

Mobile OS

Project[8].

Database

Services

Graphics

Device Driver

Input

Sensors

PhoneGap Architecture

Hybrid Application Development in PhoneGap Using UI Toolkits

Hybrid Application Development in PhoneGap Using UI Toolkits

Supported (Y)

WIDGETS

JQUERY, JQUERY MOBILE

(N)

SENCHA TOUCH

Layout
Menus
Dialog
Drag and Drop
List View
Grid View
Checkbox
Radio Button/Toggle Buttons
Spinners/Pickers
Image Gallery
Progress bar
Different widgets available in jQuery and Sencha frameworks

The list above is a comparative analysis of UI widgets available

in jQuery, jQuery Mobile, and Sencha Touch UI frameworks. It
provides details of what can be achieved in these UI frameworks.

Windows Phone 8

Phonegap Limitations, as Seen on

Version 2.4

Android
Same application executed in Windows Phone 8, Android, and iOS

> Lack of pre-built UI widgets, transitions, and standard

GLOBALIZATION SUPPORT

APPLICATION DEVELOPMENT

PhoneGap provides wrapper APIs to implement globalization.

> Visible differences were observed while running the same

Each PhoneGap Globalization wrapper API has a set of APIs for

application on different operating systems (WP8, Android,

getting preferred language and locale name, changing strings

and iOS). For example, while developing a prototype

to numbers (or vice versa), getting currency patterns, getting

application in PhoneGap, it was observed that some elements

number patterns, etc. These APIs can also be used to serve

such as rounded-corner buttons and display of hint text

HTML pages customized according to a users current locale.

in the input box were not visible in WP8. OS-dependent

iOS

> Debugging a JS app in PhoneGap is not as easy as in

controls. Development time can take longer, especially when

the native environment. One could develop in a desktop

a more polished app with a native look and feel is desired.

browser for most functionality and then use the device

Although Sencha Touch, jQuery Mobile, and similar

simulator and browser to debug. But debugging a PhoneGap

frameworks with pre-built UI elements can be used but a

application directly on a device can be rather difficult

good amount of time may have to be spent styling the app

because the project must be uploaded to github and the

to look native.

debugging tool is only available online, both of which

require Internet access.

CSS were then written to overcome this problem. The

MULTIPLE SCREENS
Multiple screen sizes and resolutions are handled in PhoneGap
using a technique called Responsive Web Development.

representative snapshot below shows the difference in GUI

on different mobile phones while working with CSS and
HTML5.0 on PhoneGap.

Responsive WEB DESIGN uses CSS media queries to determine

For creating similar UI on different platforms, quirks were

display resolution and adjust page layout based on screen

required for each platform. For example, for displaying both

resolution. PhoneGap application can also use jQuery-based

the hint text in the Input box and the rounded corners, different

APIs for checking screen resolution and density, which can be

HTML properties were used to enable these properties on the

used to serve the suitable resources for the device. PhoneGap

page level and the X-UA-Compatible tag was added in the

application can also use CSS to detect orientation of the device.

HTML header. The representative snapshot below shows the

results after quirks were applied over the UI using CSS and

NETWORK STATUS

HTML5.0 on PhoneGap.

PhoneGap provides wrapper APIs to determine the network

> Platform-specific CSS must be written to make UI look

status of the device (connected/disconnected) and currently

native. No native controls are available and functions like

active network (WiFi or cellular data).

scrolling behave differently on different platforms. Overall,

the experience of a web application is rarely (if ever) equal

FILE APIS
File APIs of PhoneGap can be used to access files on a local
file system and upload/download files from a remote server.

to the experience of a native application.

> Because PhoneGap covers multiple platforms, it is often
one step behind the native platforms when new features
are introduced.

Windows Phone 8

Android

iOS

Same application executed in Windows Phone 8, Android, and iOS

Hybrid Application Development in PhoneGap Using UI Toolkits

Hybrid Application Development in PhoneGap Using UI Toolkits

PERFORMANCE
Framework used

> Hardware acceleration is available for iOS4 or later and

Memory footprint

Android 3.x or 4.x devices. Hardware-acceleration-enabled

Acronyms

RAJESH KUMAR

API

Application Programming Interface

Engineering functions at Aricent.

CSS

Cascading Style Sheets

DOM

Document Object Model

HTML

Hypertext Markup Language

JS

JavaScript

NFC

Near Field Communication

NDEF

Near Field Communication Data Exchange Format

UI

User Interface

WP7

Windows Phone 7

WP8

Windows Phone 8

He has over six years of experience

applications sometimes fail to render correctly on scroll on

Android devices, and if hardware acceleration is disabled,
the quality of animation suffers.

PhoneGap

basically the result of CSS parsing, calculating, running JS,

rendering HTML DOM elements, etc. can be an issue. An
intermediate splash screen or loading icon can help

Native

> PhoneGap UI can be created using frameworks such as

jQuery, jQuery Mobile, and Sencha Touch. The UI performance

>

> PhoneGap does not have direct API for releasing the unused
memory, which can cause an out-of-memory issue in the
application.

The frameworks perform differently from each other. For

flick using Sencha Carousel is better than jQuery Mobile.

Conclusion

SenchaTouch and jQuery Mobile lack standard mobile UI

PhoneGap is, on the whole, a neat solution. It gives developers

widgets (i.e., jQuery Mobile doesnt provide a widget like

Carousel). To resolve this issue, a single application can use
jQuery Mobile and Sencha Touch together to create a UI.
>

A prototype application to compare the performance of a

list view was developed in native, jQuery Mobile, and Sencha
Touch on an Android device running Android version 2.3.5.
The video in the link provided below gives a hands-on
experience using these UI toolkits. The Sencha Touch list
view stutters while scrolling and does not respond well when

perceived difference in performance of the list view created

in jQuery Mobile versus that in Sencha Touch is of the order
of ten percent. The list view created using jQuery Mobile
was only marginally slower than the one created in native.
This makes choosing the right framework for creating UI
in PhoneGap more challenging.
http://www.youtube.com/watch?v=rjvoPLtiIGo&featu
re=youtu.be

>

Heavy memory footprint from the loading of WebView,

JavaScript engine, etc., along with the application. A
prototype application comparing the memory footprint of
a sample Hello World application on PhoneGap and native
SDK on Android are shown in the table below.

Application Engineering functions

at Aricent. She has over 3 years
of experience in the industry
and has worked in application
development on Android platform.

multiple platforms and to reach out to potential users in a

timely fashion. It is very useful for the following types of
applications:
>

Reaching the market earlyas a critical business requirement

>

No need for fancy animation/transition

>

Limited interaction with the native OS, when a good level of

interaction can be achieved using the PhoneGap plug-ins

>

Pushing an HTML5 Web site for mobile as a native package

application to improve distribution and discoverability

> Supporting multiple platforms without investing in learning

native SDK for all platforms
Just like no single T-shirt size fits all, PhoneGap is not a solution
for every kind of application. Native SDK should be used for

REFERENCES

creating applications that fall in to following categories:

(1) PhoneGap download link, http://phonegap.com/download/

> Developing for only one platform (i.e., the application is

MEMORY

is Senior Software Engineer in the

the benefit of less effort required to create applications for

a users finger flings faster on the screen. Also, the scroll

stops sooner in Sencha Touch than jQuery Mobile. The

rajesh3.kumar@aricent.com

puneet.kaur@aricent.com

example, jQuerys list view performs better than Sencha

Touch, while performance of Image Gallerys swipe and

as Android, Symbian, and BREW.

PUNEET INDER KAUR

5 MB

alleviate this.

UI created using native code widgets.

in the industry and has worked on

mobile application platforms such

19 MB

> Initial load time of an application (5-10 seconds) that is

using these frameworks in PhoneGap is not as good as a

is Technical Leader in Application

(2) Setting up for various platforms, http://docs.phonegap.com/en/2.4.0/guide_getting-started_index.md.html

feasible on only one of the platforms)

(3) Debugging support in PhoneGap, https://github.com/phonegap/phonegap/wiki/Debugging-in-PhoneGap

(4) PhoneGap features, http://phonegap.com/about/feature/

> When the performance of the application is very critical,

(5) Sencha Touch home, http://www.sencha.com/products/touch

like in games

(6) jQuery home, http://jquery.com/

> When fancy animations and transitions are needed

(7) InfoWorld, http://www.infoworld.com/slideshow/24605/infoworlds-2012-technology-of-the-year-award-winners-183313#slide2

> If your organization does not have web developers with

(8) CodeProject, http://phonegap.com/2012/06/12/adobe-phonegap-named-best-cross-platform-development-tool-by-codeproject/

expertise in HTML, CSS and JS

Hybrid Application Development in PhoneGap Using UI Toolkits

Hybrid Application Development in PhoneGap Using UI Toolkits

aricent.com 2013 Aricent Group. All rights reserved.

All Aricent brand and product names are service marks, trademarks, or
registered marks of Aricent Inc. in the United States and other countries.