HYBRID APPLICATION DEVELOPMENT IN PHONEGAP USING UI TOOLKITS

HYBRID APPLICATION

DEVELOPMENT IN

PHONEGAP USING

UI TOOLKITS

RAJESH KUMAR Technical Lead, Aricent

PUNEET INDER KAUR

2

1

HYBRID APPLICATION

DEVELOPMENT IN

PHONEGAP 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)

> 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 github and the 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 on

Version 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 the page 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

5

Hybrid Application Development in PhoneGap Using UI Toolkits Hybrid Application Development in PhoneGap Using UI Toolkits

6

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 native 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 the application.

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 for creating 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.

[email protected]

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.

aricent.com © 2013 Aricent Group. All rights reserved.