6032663
TRANSCRIPT
-
8/18/2019 6032663
1/5
HYBRID APPLICATION
DEVELOPMENT IN PHONEGAP USING
UI TOOLKITSRAJESH KUMARTechnical Lead, Aricent
PUNEET INDER KAUR
Senior Software Engineer, Aricent
-
8/18/2019 6032663
2/5
2Hybrid Application Development in PhoneGap Using UI Toolkits1Hybrid Application Development in PhoneGap Using UI Toolkits
HYBRID APPLICATION
DEVELOPMENT INPHONEGAP USING UI TOOLKITS
Introduction
PhoneGap is a hybrid application development platform that
supports multiple platforms such as iOS, Android, Blackberry,
Windows Phone 7 (WP7), and Windows Phone 8 (WP8). It is an
application development framework that enables users to
develop mobile apps using HTML, CSS, and JavaScript (JS).
PhoneGap renders applications developed using these Web-
specific technologies on smartphones, thus enabling application
development for iOS, Android, Blackberry, WP7, and WP8
platforms without knowing the native programming APIs.
PhoneGap provides APIs to allow developers to use device-
specific features such as phone camera, accelerometer, contacts,
and storage using the PhoneGap standard plug-ins. It enables
developers to create custom platform-specific implementations
using custom plug-ins. Plug-ins enable developers to add
PhoneGap Features
UI FRAMEWORKS USED IN PHONEGAP
PhoneGap applications use HTML5/CSS for creating UI of the
applications, with several UI frameworks available that can be
used to create fast and impressive mobile applications in
PhoneGap (e.g., jQuery, jQuery Mobile, and Sencha Touch).
The snapshots below show sample screens of UI created using
Sencha Touch and jQuery Mobile.
> 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
interfaces
> require native functionality such as WiFi, with NFC
connectivity not provided by PhoneGap wrapper APIs
> require a native look and feel for each platform
Market Overview
TRENDS IN HYBRID APPLICATION DEVELOPMENT
Hybrid applications, which offer a balance between HTML5-
based Web apps and native apps, will be used in more than 50
percent of mobile apps by 2016, according to a report from IT
research firm Gartner. Gartner forecasts that by the end of
2013, mobile phones will overtake PCs as the most common
Web-access devices. They recommend organizations be open
to augmentations to the Web (such as hybrid application
development) to deploy on mobile today. According to a report
by Forrester, the choice between adopting a native application
development approach or one that uses HTML5 depends on
the people who will use the apps, the company’s business
objectives, and the strategies they plan to employ in order to
achieve those objectives.
COMPETING HYBRID APPLICATION DEVELOPMENT
FRAMEWORKS
Contemporary hybrid application frameworks include Adobe
PhoneGap, Adobe Air/Flex, Appcelerator (Titanium), Motorola
Solutions (RhoMobile), Qt (Nokia), Sencha, and Xamarin
(MonoTouch and Mono for Android). According to the
independent research firm Vision Mobile, PhoneGap is the
leader in developer mindshare of cross-platform technologies,
like those seen in the snapshot below.
PhoneGap was named “2012 Technology of the Year” by InfoWorld
[7] and “Best Cross-Platform Development Tool” by Code
Project[8].
functionality that is not provided by PhoneGap APIs. For example,
if an application requires accessing Near Field Communication
(NFC) hardware and reading/writing NDEF messages, then
plug-ins will have to be written for the targeted platforms.
PHONEGAP ARCHITECTURE
PhoneGap resides above the Mobile Application Framework.
WebView uses the HTML rendering engine and the JS engine
to render HTML/CSS and execute Java Script. PhoneGap
provides plug-ins in the form of JS APIs that can be used in the
WEB application to access the native features of the OS.
WHEN TO USE PHONEGAP
PhoneGap can be used in situations where development time
and costs must be reduced. PhoneGap can be used when
applications meet the following conditions:
PhoneGap Architecture
WEB APP
PhoneGap Framework
Mobile Application Framework
Mobile OS
Database
Device Driver
Services
Input
Graphics
Sensors
UI Framework Window Manager
HTML Rendering Engine (WebView) Plug-in (PhoneGap, Custom)
Cross-Platform Tool Mindshare Index 2012
Top-10 CPTs being used by developers,irrespective of their primary tool
% of developers using each tool (normalized)
PhoneGap
Sencha Touch/jQTouch
Mono
Appcelerator
Adobe Flex
Unity 3
Corona
AppMobi
RunRev
MoSync
0 10 15 20 25 30 35 40
32%
30%
26%
24%
22%
20%
17%
16%
16%
16%
-
8/18/2019 6032663
3/5
3Hybrid Application Development in PhoneGap Using UI Toolkits 4Hybrid Application Development in PhoneGap Using UI Toolkits
> Debugging a JS app in PhoneGap is not as easy as in
the native environment. One could develop in a desktop
browser for most functionality and then use the device
simulator and browser to debug. But debugging a PhoneGap
application directly on a device can be rather difficult
because the project must be uploaded to gith ub and t he
debugging tool is only available online, both of which
require Internet access.
> Lack of pre-built UI widgets, transitions, and standard
controls. Development time can take longer, especially when
a more polished app with a native look and feel is desired.
Although Sencha Touch, jQuery Mobile, and similar
frameworks with pre-built UI elements can be used but a
good amount of time may have to be spent styling the app
to look native.
Same application executed in Windows Phone 8, Android, and iOS
Same application executed in Windows Phone 8, Android, and iOS
Windows Phone 8 Android iOS
Windows Phone 8 Android iOS
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.
GLOBALIZATION SUPPORT
PhoneGap provides wrapper APIs to implement globalization.
Each PhoneGap Globalization wrapper API has a set of APIs for
getting preferred language and locale name, changing strings
to numbers (or vice versa), getting currency patterns, getting
number patterns, etc. These APIs can also be used to serve
HTML pages customized according to a user’s current locale.
MULTIPLE SCREENS
Multiple screen sizes and resolutions are handled in PhoneGap
using a technique called Responsive Web Development.
Responsive WEB DESIGN uses CSS media queries to determine
display resolution and adjust page layout based on screen
resolution. PhoneGap application can also use jQuery-based
APIs for checking screen resolution and density, which can be
used to serve the suitable resources for the device. PhoneGap
application can also use CSS to detect orientation of the device.
NETWORK STATUS
PhoneGap provides wrapper APIs to determine the network
status of the device (connected/disconnected) and currently
active network (WiFi or cellular data).
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.
Phonegap Limitations, as Seen onVersion 2.4
APPLICATION DEVELOPMENT
> Visible differences were observed while running the same
application on different operating systems (WP8, Android,
and iOS). For example, while developing a prototype
application in PhoneGap, it was observed that some elements
such as rounded-corner buttons and display of “hint” text
in the input box were not visible in WP8. OS-dependent
CSS were then written to overcome this problem. The
representative snapshot below shows the difference in GUI
on different mobile phones while working with CSS and
HTML5.0 on PhoneGap.
For creating similar UI on different platforms, quirks were
required for each platform. For example, for displaying both
the hint text in the Input box and the rounded corners, different
HTML properties were used to enable these properties on thepage level and the “X-UA-Compatible” tag was added in the
HTML header. The representative snapshot below shows the
results after quirks were applied over the UI using CSS and
HTML5.0 on PhoneGap.
> Platform-specific CSS must be written to make UI look
native. No native controls are available and functions like
scrolling behave differently on different platforms. Overall,
the experience of a web application is rarely (if ever) equal
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.
WIDGETS JQUERY, JQUERY MOBILE SENCHA TOUCH
Layout
Menus
Dialog
Drag and Drop
List View
Grid View
Checkbox
Radio Button/Toggle Buttons
Spinners/Pickers
Image Gallery
Progress bar
Supported (Y) (N)
-
8/18/2019 6032663
4/5
5Hybrid Application Development in PhoneGap Using UI Toolkits 6Hybrid Application Development in PhoneGap Using UI Toolkits
PERFORMANCE
> Hardware acceleration is available for iOS4 or later and
Android 3.x or 4.x devices. Hardware-acceleration-enabled
applications sometimes fail to render correctly on scroll on
Android devices, and if hardware acceleration is disabled,
the quality of animation suffers.
> Initial load time of an application (5-10 seconds) that is
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
alleviate this.
> PhoneGap UI can be created using frameworks such as
jQuery, jQuery Mobile, and Sencha Touch. The UI performance
using these frameworks in PhoneGap is not as good as a
UI created using native code widgets.
> The frameworks perform differently from each other. For
example, jQuery’s list view performs better than Sencha
Touch, while performance of Image Gallery’s swipe and
flick using Sencha Carousel is better than jQuery Mobile.
SenchaTouch and jQuery Mobile lack standard mobile UI
widgets (i.e., jQuery Mobile doesn’t 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
a user’s finger flings faster on the screen. Also, the scroll
stops sooner in Sencha Touch than jQuery Mobile. The
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
MEMORY
> 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 nat ive
SDK on Android are shown in the table below.
> PhoneGap does not have direct API for releasing the unused
memory, which can cause an out-of-memory issue in theapplication.
Conclusion
PhoneGap is, on the whole, a neat solution. It gives developers
the benefit of less effort required to create applications for
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 early—as 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 forcreating applications that fall in to following categories:
> Developing for only one platform (i.e., the application is
feasible on only one of the platforms)
> When the performance of the application is very critical,
like in games
> When fancy animations and transitions are needed
> If your organization does not have web developers with
expertise in HTML, CSS and JS
Acronyms
API Application Programming Interface
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
REFERENCES
(1) PhoneGap download link, http://phonegap.com/download/
(2) Setting up for various platforms, http://docs.phonegap.com/en/2.4.0/guide_getting-started_index.md.html
(3) Debugging support in PhoneGap, https://github.com/phonegap/phonegap/wiki/Debugging-in-PhoneGap
(4) PhoneGap features, http://phonegap.com/about/feature/
(5) Sencha Touch home, http://www.sencha.com/products/touch
(6) jQuery home, http://jquery.com/
(7) InfoWorld, http://www.infoworld.com/slideshow/24605/infoworlds-2012-technology-of-the-year-award-winners-183313#slide2
(8) CodeProject, http://phonegap.com/2012/06/12/adobe-phonegap-named-best-cross-platform-development-tool-by-codeproject/
PhoneGap
Native
19 MB
5 MB
Framework used Memory footprint
RAJESH KUMAR
is Technical Leader in Application
Engineering functions at Aricent.
He has over six years of experience
in the industry and has worked on
mobile application platforms such
as Android, Symbian, and BREW.
PUNEET INDER KAUR
is Senior Software Engineer in the
Application Engineering functions
at Aricent. She has over 3 years
of experience in the industry
and has worked in application
development on Android platform.
-
8/18/2019 6032663
5/5
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.
http://www.aricent.com/http://www.aricent.com/http://www.aricent.com/