DEVELOPING A CROSS-PLATFORM MOBILE APPLICATION USING HTML5, JQUERY MOBILE AND PHONEGAP

Alexander Zibula1 and Tim A. Majchrzak2 1Best Practice Consulting AG (bpc), Munster,¨ Germany 2Department of Information Systems, University of Munster,¨ Munster,¨ Germany

Keywords: App, Mobile Application, Cross-platform, iOS, Android, HTML5, PhoneGap, jQuery Mobile, Smart Meter, iPhone, , Apache Callback.

Abstract: Mobile computing devices are becoming more prevalent. Mobile applications extend their scope and utility. Developing such apps introduces a problem: developers are being forced to develop their applications to target each mobile platform from scratch or to rely on Web-based solutions that do not provide a “native” look and feel. In order to investigate novel methods of multi-platform app development and to review HTML5, we built an app using several cutting-edge development frameworks. Our scenario—a smart meter tool—is an active area of research in itself. We present approaches in the field of multi-platform app development and illustrate the technological background. We provide an overview of our development process. Finally, we evaluate our app and discuss our findings in order to provide generalizable results.

1 INTRODUCTION ers’ perception. The third category are native apps that have been written for a specific platform—either Since the advent of the Internet as a universal technol- a virtual machine or a mobile (device) operating sys- ogy, mobile computing has continuously increased in tem. importance. Beginning with , in partic- Developing apps is far from hassle-free. Due to ular the iPhone in 2007 (Macedonia, 2007), mobile rapid progress in hardware development, software de- Internet usage has greatly increased. For example, in velopment has not kept up the pace (as illustrated in Germany it rose from 9 % to 16 % from 2009 to 2010 Section 2).1 To some extent it is unclear whether clas- (Mobile Internetnutzung, 2012). At the same time, sical software development methods can be applied to mobile devices—i.e. mobile phones, smartphones, mobile devices. Even worse, there are a number of in- and tablet computers (pads)—have been equipped compatible platforms. Development of PC programs with increasing amounts of memory and computa- for multiple platforms is much more convenient than tional power. Consequently, there is a demand for it used to be. A Java program runs on any system that software that makes the most of these devices. can host an adequate virtual machine. Even programs Mobile applications already generate significant natively developed for one platform can usually be revenue—USD 5.2 billion in 2010 according to Gart- cross-compiled for other platforms (e.g. in C++ via ner (Gartner, 2012). These so called apps have Gtk+ (Logan, 2001)) if they do not heavily make use become commonplace, even though technologically of platform-dependent functionality. Traditional de- they are “ordinary” computer programs. In the sim- velopment for mobile apps means writing programs plest form, a Web site optimized for mobile devices for each platform from scratch. Only few approaches (Webapp) is already considered an app. In a more existed to circumvent this problem. dedicated form, Web-based content is rendered by a To investigate possibilities of cross-platform de- ’s internal browser but displayed within velopment, we designed an app using HTML5 an app installed on it. This can offer access to de- (HTML5, 2012), PhoneGap (PhoneGap, 2012), and vice features but might not provide much more than an icon on the device’s , changing the us- 1This surprisingly aligns with what is known as the soft- ware crisis (Dijkstra, 1972) for stationary computers.

Zibula A. and A. Majchrzak T.. 13 DEVELOPING A CROSS-PLATFORM MOBILE SMART METER APPLICATION USING HTML5, JQUERY MOBILE AND PHONEGAP. DOI: 10.5220/0003900100130023 In Proceedings of the 8th International Conference on Web Information Systems and Technologies (WEBIST-2012), pages 13-23 ISBN: 978-989-8565-08-2 Copyright c 2012 SCITEPRESS (Science and Technology Publications, Lda.) WEBIST2012-8thInternationalConferenceonWebInformationSystemsandTechnologies

jQuery Mobile (jQuery Mobile, 2012). Our aims were pected to have a “native” look and feel and they are to understand how they are used, how development unable to use device-specific functionality. differs from classical applications, and how well the The following five multi-platform development apps perform. To add rigor while working on a highly approaches will likely become important in the near relevant topic, and to broaden the scope of our re- future. Firstly, HTML5 (HTML5, 2012) promises to search, we selected smart metering (Popa et al., 2010) combine the convenience of developing Web user in- as our scenario. We thereby developed a new kind of terfaces (UI) with the ability to use a device’s specific app that is demanding w.r.t. mobile device resource functionality. It is introduced in Section 3. Secondly, utilization. hybrid apps combine the features of HTML with na- Smart grids have been proposed as an energy grid tive code that is provided by specialized frameworks upgrade (Javadi and Javadi, 2010) in order to more ef- (Barney, 2009). In general, do not re- ficiently distribute and use energy, particularly in light quire detailed knowledge of the target platform but of regenerative sources (Knab et al., 2010). Despite only of Web technologies. An example is Phone- the need for cautions (Meehan, 2010) their emergence Gap (PhoneGap, 2012). Thirdly, interpreted apps can be taken for granted. Smart meters are part of can be used. Instead of writing platform-dependent smart grids. They measure energy throughput and of- code, scripting languages that are interpreted on the fer the possibility to better control consumption (Lee target platform are used. An example is Appceler- et al., 2011). For example, energy-pricing through- ator Titanium (Appcelerator, 2012). Fourthly, with out a day can be adjusted by demand. An analysis cross-compilers code is written once and compiled to of benefits from smart metering has been described platform-dependent apps. An example is XMLVM by Gnilka, Meyer-Spasche & Folta (Gnilka et al., (XMLVM, 2012). Fifthly, model-driven software de- 2009). The architecture of smart meters and smart velopment (MDSD) can be applied. The idea is to de- grids is complex because it involves various commu- scribe an app in an abstract notation (the model) that nication partners, communication channels, and inter- is transformed and compiled to platform-dependent mediaries. apps. An example is applause (Applause, 2012), Our work makes several contributions. Firstly, which is based on a domain-specific language (DSL). it presents a novel approach for developing mobile Neither of the approaches can yet be seen as a defi- applications against multiple platforms with a sin- nite solution. Further frameworks exist that fall in be- gle code-base. Secondly, it introduces an innovative tween the above sketched categories. Cross-platform smart meter application. Thirdly, it discusses the find- app development not only is a topic of academic re- ings in the light of future development projects. And search but also for practitioners (Allen et al., 2010). fourthly, it briefly compares current approaches for Although HTML5 is still considered a “working cross-platform app development. draft” (HTML5, 2012), standardization is at an ad- This paper is structured as follows. Section 2 out- vanced stage. This is also reflected by the appear- lines related work and alternative approaches. Our ance of practitioners’ textbooks such as that by PIL- work’s technological background is sketched in Sec- GRIM (Pilgrim, 2010). Even Webapp development for tion 3. Section 4 explains the app development. Eval- Android and iOS using HTML is covered (Oehlman uation and discussion are given in Section 5. Sec- and Blanc, 2011; Layon, 2010). Most scientific arti- tion 6 draws a conclusion. cles that have been published in this field do not di- rectly relate to our work. They cover issues such as Web3D (Di Cerbo et al., 2010), accessibility (Pfeif- 2 RELATED WORK AND fer and Parker, 2009), mashups (Aghaee and Pau- tasso, 2010), and HTML5 usage in general (Harjono ALTERNATIVE APPROACHES et al., 2010). We did not identify scientific papers on HTML5 in the context of app development be- Related work can be discussed from various per- sides a paper by MELAMED &CLAYTON (Melamed spectives. Firstly, other approaches for developing and Clayton, 2009). The authors compare HTML5 to mobile applications for multiple platforms are high- J2ME and native app development in the context of lighted. Secondly, papers on HTML5 are assessed. pervasive media applications. They find that HTML Finally, smart meter apps are reviewed. With re- is a “good solution” for “creating and distributing gard to approaches for multi-platform development, most pervasive media applications” (Melamed and we leave out Webapps and apps that can be installed Clayton, 2009). Only few non-scientific sources ex- natively but only use the internal browser to render ist that develop proof-of-concept apps (Rogers, 2010; HTML 4.01 or XHTML 1.1. Even if Web pages Suhonos, 2010). are optimized for mobile devices, they cannot be ex-

14 DEVELOPINGACROSS-PLATFORMMOBILESMARTMETERAPPLICATIONUSINGHTML5,JQUERY MOBILEANDPHONEGAP

It is not feasible to review papers on smart grids or on smart meter devices. A myriad of articles ex- ist but they are beyond the scope of this work since all facets of smart metering are addressed. From the relevant papers, some address distinctive imple- mentation issues (e.g. (Song et al., 2011; McLaugh- lin et al., 2010)) or software that concerns its em- bedding into infrastructures (for instance (Capodieci et al., 2011)). However, these approaches have little in common with our app. The work presented by WEISS,MATTERN, GRAML,STAAKE,&FLEISCH (Weiss et al., 2009) is similar to ours. They propose a Web-based API to access smart meters and visualize data on mobile phones. The device used appears to be an iPhone; however, WEISS et al. focus on smart metering as- Figure 1: PowerMeter (Google PowerMeter, 2012) pects rather than on the app itself. Therefore, their and Vattenfall Smart Meter App (Vattenfall Smart Meter App, 2012). work and ours are complementary. WASSERMAN (Wasserman, 2010) compiled a short article on “soft- ware engineering issues” for app development. He mode as well as a shorter charset definition as shown thereby predicts some of our findings. in Listing 1. It adds, changes, and removes sev- Many smart meter apps can be identified that have eral elements and attributes, including new seman- not been developed with scientific progress in mind. tic sectioning elements such as

,
, We expect that several proof-of-concept apps exist
,
,