Evaluating Frameworks for Creating Mobile Web Apps Frameworks for Creating Mobile Web ... Mobile Web apps are an alternative to native apps ... development tools, but do not consider mobile Web

  • Published on

  • View

  • Download

Embed Size (px)


  • 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

    heitkoetter@wi.uni-muenster.de, tima@ercis.de, {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.


    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.


    Presented at WEBIST 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.


    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.


    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)



  • 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, because its evaluationwould not provide additional insight. Several frame-works followed with significantly less mentions, ofwhich we selected The-M-Project as a promising al-ternative. Google Web Toolkit combined with mgwtcompletes the set of candidates. As apps using GWTare programmed in Java, this combination representsa differing approach to mobile Web development.

    As they run within a browser environment, mo-bile Web apps have some limitations, mostly regard-ing access to device-specific features and hardware.Depending on requirements, they are not always theoptimal choice for cross-platform app development,as demonstrated by Heitkotter et al. (2012).. Severalpopular cross-platform development frameworks arebased on Web technologies. They follow a so-calledhybrid approach and package mobile Web apps witha runtime that gives access to device features. Suchdevelopment projects often utilize mobile Web frame-works as well. Hence, we analyzed in how far frame-works can be combined with PhoneGap (2013), alsonamed Apache Cordova, a popular hybrid framework.

    3.2 jQuery Mobile

    jQuery Mobile (2013) makes the user interface ofWeb pages accessible on mobile devices. To developan app with jQuery Mobile, developers merely needto use HTML5; at first glance, development is quitesimilar to Web development in general. By assign-ing specific attributes and values to HTML elements,they can be transformed into mobile-optimized UI el-ements or get a certain role, such as header or but-ton. Before the app is rendered in the clients browser,jQuery Mobile enhances the HTML markup based onvalues of these attributes by adding additional markupand CSS classes. Besides UI components, jQueryMobile provides animations and JavaScript supportfor touch events. It does not include an API for ad-vanced features such as data binding or internation-alization. It does, however, incorporate the popularJavaScript library jQuery (2012).

    jQuery Mobile aims to deliver a uniform user

    interface and high-class JavaScript to a wide rangeof mobile devices. All prevalent operating sys-tems, namely Android, iOS, BlackBerry OS, Win-dows Phone and Symbian, are supported. MobileWeb apps using jQuery Mobile can also be packagedwith PhoneGap. The framework uses progressive en-hancement (Firtman, 2012), which adjusts the presen-tation according to supported features of displayingdevices. It thus enables jQuery Mobile apps to run onnearly every smartphone browser.

    Created in November 2010 by the jQuery Project(2012), jQuery Mobile is since maintained as opensource under MIT license. Beneath the jQueryProject, it is supported by companies like Adobe,Mozilla Corporation, Palm, BlackBerry, and Nokia.It is part of a large ecosystem, which, besides others,includes a ThemeRoller for developing custom styles.Our review assesses version 1.2.

    3.3 The-M-Project

    The-M-Project (2013) provides a JavaScript frame-work for creating mobile Web apps with a Model-View-Controller (MVC) architecture. Apps are writ-ten entirely in JavaScript, without HTML or CSS.Not only data model and controller logic are imple-mented in JavaScript, but also the user interface. TheJavaScript code of an application builds up the HTMLat runtime in the clients browser, resorting to jQueryMobile for creating the UI. In addition to meansfor programmatic UI definition, The-M-Projects APIprovides features such as data binding, event han-dling, AJAX requests, and internationalization.

    It is licensed under MIT License and primarily de-veloped by Panacoda. The first version was releasedin 2011. Our evaluation examines version 1.2. Sincemobile Web apps using The-M-Project only requireHTML5, they are available for all platforms wherejQuery Mobile is supported and can also be packagedwith PhoneGap (The-M-Docs. Native Packaging,2012). The-M-Project includes Espresso, a build toolsimplifying the development lifecycle. It sets up theinitial project structure and creates required compo-nents. Furthermore, Espresso supports optimizing,packaging, and deploying the mobile Web app.

    3.4 Sencha Touch

    Sencha Touch (2012) enables the structured develop-ment of mobile Web apps by only using JavaScript,similar to The-M-Project. Main elements of theframework are components: an extensive inheritancehierarchy of components contains all functionality.Hence, developing with Sencha Touch mostly con-



  • sists of instantiating and configuring these compo-nents. Since most components allow nesting othercomponents or docking them to their sides, even com-plex structures can be realized. This procedure ap-plies to creating the user interface, where layouts de-termine how nested components are aligned, and todynamic parts. A MVC architecture supports modu-larity and the utilization of dynamic data.

    Sencha Touch was announced in June 2010 and isdeveloped by Sencha Inc. We examine Version 2, re-leased in May 2012. It is compatible with Android,iOS, and BlackBerry, but provides no explicit sup-port for Windows Phone or Symbian. Packaging withPhoneGap is possible (Dougan, 2012). Sencha Cmdis a build tool for projects using Sencha Touch. It canbe used to set up, build, and deploy a project.

    3.5 Google Web...