evaluating frameworks for creating mobile web apps · pdf fileevaluating frameworks for...

Download Evaluating Frameworks for Creating Mobile Web Apps · PDF fileEvaluating Frameworks for Creating Mobile Web ... Mobile Web apps are an alternative to native apps ... development tools,

If you can't read please download the document

Upload: vudan

Post on 06-Feb-2018

229 views

Category:

Documents


2 download

TRANSCRIPT

  • Evaluating Frameworks for Creating Mobile Web Apps

    Henning Heitkotter, Tim A. Majchrzak, Benjamin Ruland and Till WeberDepartment 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 oneplatform. 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-basedinteraction 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 frameworksof high quality. Based on these criteria, we evaluate jQuery Mobile, Sencha Touch, The-M-Project, andGoogle Web Toolkit combined with mgwt, thereby assessing their suitability for certain situations. We findSencha Touch suited for mobile Web apps of moderate and increased complexity, while jQuery Mobile is agood starting point for apps primarily concerned with a mobile user interface.

    1 INTRODUCTION

    Mobile devices such as smartphones and tablets arestill gaining popularity among consumers and enter-prises (Gartner, 2012). In some areas they are alreadyreplacing rather than just complementing PCs andlaptops. For software developers, mobile devices area blessing and a curse at the same time. Obviously,there is a demand for new apps, and the devices of-fer novel possibilities such as GPS positioning and of course truly mobile usage. At the same time,a variety of platforms such as Android or iOS (Linand Ye, 2009), a variety of frameworks, and a lackof best practices make it cumbersome to implementthem. If multiple platforms have to be supported, ef-fort increases almost linearly with the number of plat-forms. This leads to a need for cross-platform devel-opment.

    In the last decade, companies have significantlyinvested in Web technology (Chatterjee et al., 2002;Basu et al., 2000). More and more, applications thatdo not require rich clients for profound reasons (e. g.,integrated development environments or professionalmedia editing tools) are provided as Web apps. Usersmerely require a Web browser to use them.

    The ambition to support multiple platforms andexisting knowledge of Web technologies make Webapps an interesting choice for app development. Ingeneral, they promise to offer almost as good plat-form support as native apps. The latter are developed

    using a platforms source development kit (SDK) andshould be employed if truly native performance andlook & feel are desirable. Unfortunately, the require-ments for Web apps on mobile devices differ fromWeb apps in general. To effectively implement themor to make existing Web apps suitable for mobile de-vices, sophisticated framework support is advisable.An abundance of available frameworks hampers aneasy selection, though. Moreover, there is hardly anyguidance for informed decision-making.

    To fill this gap, it is important to evaluate frame-works based on sound criteria. In this paper, wedescribe our criteria-based evaluation process, whichcan be sketched as follows: Based on typical require-ments of apps and on an extensive set of informationresources, we derive eleven qualitative criteria. Thesecriteria, accompanied by corresponding assessmentguidelines, are then used to evaluate four frameworks.Background information and, more importantly, ownexperience are the foundation for judging to what de-gree a framework fulfills a certain criterion.

    Our paper makes a number of contributions. First,we describe a novel set of evaluation criteria use-ful beyond their application in this paper. Second,we evaluate the frameworks in detail and give oper-ationalizable decision advice. Third, we contribute tothe theory with a discussion of implications of our re-search. By outlining which approaches look promis-ing and where current frameworks lack features, wehighlight areas for further research and development.

    209

    Presented at WEBIST 2013.

    http://www.webist.org/?y=2013

  • This paper is structured as follows. Related workis studied in Section 2. Section 3 introduces the con-cept of mobile Web apps and presents the frameworksanalyzed later, including their general characteristics.Our evaluation criteria are developed in Section 4 andthen used in Section 5 to evaluate the frameworks.Section 6 discusses and summarizes the findings, be-fore we conclude in Section 7.

    2 RELATED WORK

    Our kind of research is literature-driven. There-fore, relevant citations are provided in the corre-sponding paragraphs throughout this paper. In thissection, we distinguish our work from existing ap-proaches. The main observation is that there are noall-encompassing reviews based on scientific criteria.Rather, many papers evaluate single frameworks inisolation or a combination thereof. This most likelyis owed to the novelty of the field of research. Nev-ertheless, these papers have made valuable contribu-tions and in parts have been influential for our work.

    Several papers evaluate technologies for Web appssuch as HTML5 (HTML5, 2012). With additions likeoffline support, HTML5 is particularly suited for mo-bile Web apps. This is also reflected in recently pub-lished textbooks (e. g., (Oehlman and Blanc, 2011)).Assessment of HTML5 is positive (Harjono et al.,2010; Melamed and Clayton, 2009). Obviously, it ismature enough for widespread usage (Lubbers et al.,2011). Typically, HTML5 and JavaScript are utilizedtogether (Meyer, 2011).

    Frameworks are often evaluated in the context ofapp development. For example, in a comparison ofWeb apps and native apps it makes sense to mentionjQuery mobile (Charland and Leroux, 2011). Thisdoes not help to compare jQuery mobile to compet-ing approaches, though. The same applies to workon HTML5 that includes framework recommenda-tions (e. g., (Curran et al., 2012)). The paper bySmutny goes a step further and briefly compares sev-eral frameworks (Smutny, 2012). However, he doesnot propose a catalogue of criteria for doing so.

    Another thread of research is scenario-based eval-uation of existing technologies. For example, Zibulaand Majchrzak (2012) use HTML5, jQuery Mobile,and PhoneGap to build an app for smart metering.However, while such papers help to understand thefeasibility of possible technology stacks, they do notprovide a greater image such as our work.

    Our previous paper on evaluating cross-platformdevelopment approaches in general (Heitkotter et al.,2012) presents complementary work. It thereby helps

    to make a decision on a higher-level: Web app or not.The research design is similar to this article, whilethe outcome is of course different. Ohrt and Turau(2012) present a broad comparison of cross-platformdevelopment tools, but do not consider mobile Webapps.

    3 MOBILE WEB APPS

    This section examines mobile Web apps as a cross-platform approach to app development and introducesfour frameworks that will be analyzed later.

    3.1 General

    A Web application, short Web app, is a Web sitethat provides an application within browsers, as op-posed to static content (Connors and Sullivan, 2010,Sect. 1.3.2). It is built with Web technologies such asHTML5, CSS, and JavaScript to enable a dynamic ex-perience. A mobile Web app is intended to be used onmobile devices. It may be a mobile-optimized versionof an existing Web app. In contrast to standard mo-bile apps, mobile Web apps are not installed on thedevice (e. g., via an app store) but accessed throughthe browser. Although built with the same set of tech-nologies, special requirements due to the mobile en-vironment call for a different approach and specificoptimizations.

    Mobile-specific requirements mainly stem fromlimited screen size available on mobile devices, a dif-ferent style of user interaction through touch gestures,and the mobile context. The smaller screen of smart-phones and, to a lesser extent, of tablets requires adifferent user interface (UI) layout and mobile ver-sions of typical HTML elements. For example, amulti-column layout is usually not feasible in mo-bile Web apps; instead, fixed toolbars for header orfooter can provide universal navigation. Users inter-act with their devices primarily through touch inter-action, which replaces the traditional pointer-basedinteraction combined with keyboard input. This re-quires several adaptations. UI elements have to beof sufficient size if users shall select them. MobileWeb apps should not expect the user to enter a largeamount of text. They should, however, support ges-tures as an additional means of interaction. The mo-bile context includes more particularities that have tobe accounted for such as limited hardware resourcesand instable or slow network connections. Hence,mobile Web apps should optimize network requests.

    Combined with nearly 100 best practices recom-mended by the World Wide Web Consortium (W3C)

    WEBIST2013-9thInternationalConferenceonWebInformationSystemsandTechnologies

    210

  • for developing mobile Web pages (Connors and Sul-livan, 2010; Rabin and McCathieNevile, 2008), theaforementioned requirements highlight the need forWeb frameworks that support the development of mo-bile Web apps. Hence, there are various suchlikeframeworks. In order to select promising frameworksfor evaluation, we studied Web sites and literaturedealing with mobile Web frameworks. jQuery Mo-bile and Sencha Touch were mentioned most oftenand will be analyzed in the following. Third-placedjQTouch bears close resemblance to jQuery Mobileand is not investigated further,