Evaluating Frameworks for Creating Mobile Web Apps Henning Heitkotter,¨ Tim A. Majchrzak, Benjamin Ruland and Till Weber Department of Information Systems, University of Munster,¨ Munster,¨ Germany [email protected], [email protected], benjamin.ruland, tillweber1986 @gmail.com { } Keywords: App, Mobile Web App, Framework, Cross-platform, Comparison, Evaluation, User Interface. Abstract: Mobile Web apps are an alternative to native apps when developing mobile applications for more than one platform. They can be accessed from almost any current smartphone and tablet using a browser. However, de- veloping a Web app adapted to the particularities of mobile devices such as limited screen size and touch-based interaction requires consideration and effort. Several frameworks with different strengths and weaknesses sup- port creating mobile Web apps. In this paper, we develop a set of criteria to be met by mobile Web frameworks of high quality. Based on these criteria, we evaluate jQuery Mobile, Sencha Touch, The-M-Project, and Google Web Toolkit combined with mgwt, thereby assessing their suitability for certain situations. We find Sencha Touch suited for mobile Web apps of moderate and increased complexity, while jQuery Mobile is a good starting point for apps primarily concerned with a mobile user interface. 1 INTRODUCTION using a platform’s source development kit (SDK) and should be employed if truly native performance and look & feel are desirable. Unfortunately, the require- Mobile devices such as smartphones and tablets are ments for Web apps on mobile devices differ from still gaining popularity among consumers and enter- Web apps in general. To effectively implement them prises (Gartner, 2012). In some areas they are already or to make existing Web apps suitable for mobile de- replacing – rather than just complementing – PCs and vices, sophisticated framework support is advisable. laptops. For software developers, mobile devices are An abundance of available frameworks hampers an a blessing and a curse at the same time. Obviously, easy selection, though. Moreover, there is hardly any there is a demand for new apps, and the devices of- guidance for informed decision-making. fer novel possibilities such as GPS positioning and – of course – truly mobile usage. At the same time, To fill this gap, it is important to evaluate frame- a variety of platforms such as Android or iOS (Lin works based on sound criteria. In this paper, we and Ye, 2009), a variety of frameworks, and a lack describe our criteria-based evaluation process, which of best practices make it cumbersome to implement can be sketched as follows: Based on typical require- them. If multiple platforms have to be supported, ef- ments of apps and on an extensive set of information fort increases almost linearly with the number of plat- resources, we derive eleven qualitative criteria. These forms. This leads to a need for cross-platform devel- criteria, accompanied by corresponding assessment opment. guidelines, are then used to evaluate four frameworks. In the last decade, companies have significantly Background information and, more importantly, own invested in Web technology (Chatterjee et al., 2002; experience are the foundation for judging to what de- Basu et al., 2000). More and more, applications that gree a framework fulfills a certain criterion. do not require rich clients for profound reasons (e. g., Our paper makes a number of contributions. First, integrated development environments or professional we describe a novel set of evaluation criteria use- media editing tools) are provided as Web apps. Users ful beyond their application in this paper. Second, merely require a Web browser to use them. we evaluate the frameworks in detail and give oper- The ambition to support multiple platforms and ationalizable decision advice. Third, we contribute to existing knowledge of Web technologies make Web the theory with a discussion of implications of our re- apps an interesting choice for app development. In search. By outlining which approaches look promis- general, they promise to offer almost as good plat- ing and where current frameworks lack features, we form support as native apps. The latter are developed highlight areas for further research and development. 209 Presented at WEBIST 2013. WEBIST2013-9thInternationalConferenceonWebInformationSystemsandTechnologies This paper is structured as follows. Related work to make a decision on a higher-level: Web app or not. is studied in Section 2. Section 3 introduces the con- The research design is similar to this article, while cept of mobile Web apps and presents the frameworks the outcome is of course different. Ohrt and Turau analyzed later, including their general characteristics. (2012) present a broad comparison of cross-platform Our evaluation criteria are developed in Section 4 and development tools, but do not consider mobile Web then used in Section 5 to evaluate the frameworks. apps. Section 6 discusses and summarizes the findings, be- fore we conclude in Section 7. 3 MOBILE WEB APPS 2 RELATED WORK This section examines mobile Web apps as a cross- platform approach to app development and introduces Our kind of research is literature-driven. There- four frameworks that will be analyzed later. fore, relevant citations are provided in the corre- sponding paragraphs throughout this paper. In this 3.1 General section, we distinguish our work from existing ap- proaches. The main observation is that there are no A Web application, short Web app, is a Web site all-encompassing reviews based on scientific criteria. that provides an application within browsers, as op- Rather, many papers evaluate single frameworks in posed to static content (Connors and Sullivan, 2010, isolation or a combination thereof. This most likely Sect. 1.3.2). It is built with Web technologies such as is owed to the novelty of the field of research. Nev- HTML5, CSS, and JavaScript to enable a dynamic ex- ertheless, these papers have made valuable contribu- perience. A mobile Web app is intended to be used on tions and in parts have been influential for our work. mobile devices. It may be a mobile-optimized version Several papers evaluate technologies for Web apps of an existing Web app. In contrast to standard mo- such as HTML5 (HTML5, 2012). With additions like bile apps, mobile Web apps are not installed on the offline support, HTML5 is particularly suited for mo- device (e. g., via an app store) but accessed through bile Web apps. This is also reflected in recently pub- the browser. Although built with the same set of tech- lished textbooks (e. g., (Oehlman and Blanc, 2011)). nologies, special requirements due to the mobile en- Assessment of HTML5 is positive (Harjono et al., vironment call for a different approach and specific 2010; Melamed and Clayton, 2009). Obviously, it is optimizations. mature enough for widespread usage (Lubbers et al., Mobile-specific requirements mainly stem from 2011). Typically, HTML5 and JavaScript are utilized limited screen size available on mobile devices, a dif- together (Meyer, 2011). ferent style of user interaction through touch gestures, Frameworks are often evaluated in the context of and the mobile context. The smaller screen of smart- app development. For example, in a comparison of phones and, to a lesser extent, of tablets requires a Web apps and native apps it makes sense to mention different user interface (UI) layout and mobile ver- jQuery mobile (Charland and Leroux, 2011). This sions of typical HTML elements. For example, a does not help to compare jQuery mobile to compet- multi-column layout is usually not feasible in mo- ing approaches, though. The same applies to work bile Web apps; instead, fixed toolbars for header or on HTML5 that includes framework recommenda- footer can provide universal navigation. Users inter- tions (e. g., (Curran et al., 2012)). The paper by act with their devices primarily through touch inter- Smutny goes a step further and briefly compares sev- action, which replaces the traditional pointer-based eral frameworks (Smutny, 2012). However, he does interaction combined with keyboard input. This re- not propose a catalogue of criteria for doing so. quires several adaptations. UI elements have to be Another thread of research is scenario-based eval- of sufficient size if users shall select them. Mobile uation of existing technologies. For example, Zibula Web apps should not expect the user to enter a large and Majchrzak (2012) use HTML5, jQuery Mobile, amount of text. They should, however, support ges- and PhoneGap to build an app for smart metering. tures as an additional means of interaction. The mo- However, while such papers help to understand the bile context includes more particularities that have to feasibility of possible technology stacks, they do not be accounted for such as limited hardware resources provide a greater image such as our work. and instable or slow network connections. Hence, Our previous paper on evaluating cross-platform mobile Web apps should optimize network requests. development approaches in general (Heitkotter¨ et al., Combined with nearly 100 best practices recom- 2012) presents complementary work. It thereby helps mended by the World Wide Web Consortium (W3C) 210 EvaluatingFrameworksforCreatingMobileWebApps for developing mobile Web pages (Connors and Sul- interface and high-class JavaScript to a wide range livan, 2010; Rabin and McCathieNevile, 2008), the of mobile devices. All prevalent operating sys- aforementioned requirements highlight the need for tems, namely Android, iOS, BlackBerry OS, Win- Web frameworks that support the development of mo- dows Phone and Symbian, are supported. Mobile bile Web apps. Hence, there are various suchlike Web apps using jQuery Mobile can also be packaged frameworks. In order to select promising frameworks with PhoneGap. The framework uses progressive en- for evaluation, we studied Web sites and literature hancement (Firtman, 2012), which adjusts the presen- dealing with mobile Web frameworks. jQuery Mo- tation according to supported features of displaying bile and Sencha Touch were mentioned most often devices.