Adaptive Mobile Web Applications Through Fine-Grained Progressive Enhancement Heiko Desruelle, Dieter Blomme, Frank Gielen Ghent University – IBBT Dept. of Information Technology – IBCN, Ghent, Belgium fheiko.desruelle, dieter.blomme, [email protected] Abstract—The availability of mobile devices is growing at Web systems are traditionally engineered along three an incredible pace. This trend has set a need for applications orthogonal dimensions: the development phases, the sys- being available at anytime, anywhere, and on any device. As tem’s views, and its aspects (as illustrated in Figure 1) most mobile users carry their device at all times, being truly mobile provides users an unprecedented freedom. Neverthe- [11]. The phase dimension sets out the different stages of less the clear advantages, application developers are facing web development, ranging from analysis to implementation. challenges due to device fragmentation. Current application Each of these phases requires a number of specific views development solutions are insufficiently prepared for the high addressing the systems content, its navigation structure, and variety of mobile platforms and hardware characteristics. the presentation. Finally, the aspects dimension defines the In this paper we propose a platform for the development and delivery of adaptive mobile applications. An adaptive structural and behavioral aspects of each of the views. The application composition approach is introduced, capable of growing presence of mobile applications emphasizes the autonomously bypassing fragmentation related issues. This need for fragmentation management within the web engi- goal is achieved by incorporating fine-grained progressive neering model. This concern has to be handled throughout application enhancements through a quantitative evaluation every stage of the application’s development life cycle. As strategy. proposed by Kappel et al., adaptability can be considered Keywords-mobile web, adaptive mechanism, progressive en- as an additional web engineering dimension, crosscutting hancement, quantitative evaluation. all other web modeling dimensions [9]. From a developer’s perspective, the straightforward incorporation of adaptability I. INTRODUCTION remains an important challenge [11]. Even with the use of Mobile is a powerful mass medium, with a greater reach standardized web technology, efficiently managing mobile and faster growth than any other known media type [1]. fragmentation remains an important research topic. The dif- Furthermore, the technology itself is rapidly maturing. Ad- ferent mobile browsers still contain many variability points, vanced features such as mobile internet access and inte- making true mobile convergence not to be expected any time grated sensors have become a standard capability of devices soon [6]. throughout all user segments. As users carry their mobile de- Since the early days of web engineering, developers vice practically at all times, a need has been established for have tried to cope with the differences between browsers. mobile applications and services being available anywhere Graceful degradation is a widespread design strategy that and at any time. However, various technological challenges focuses on providing optimal support for the most advanced reside in the development of applications that automatically browsers. Less capable browsers are only considered during cover many types of devices [6]. This barrier is a result the last development phase. This approach often results of the heavily fragmented mobile landscape. In order to in a poor stripped-down version. The graceful degradation attain a sustainable share of the mobile market, applications need to be made adaptable to various combinations of hardware, operating systems, APIs, etc. The absence of appropriate platform and tool support make it the developer’s responsibility to deal with adaptability requirements, which considerably drives up development costs and narrows target markets. Against this backdrop, the use of the web as an application platform is gaining momentum. Device indepen- dent web technologies such as HTML, CSS and JavaScript offer application developers an unprecedented market reach. Furthermore, the International Telecommunication Union (ITU) estimates the use of mobile internet connectivity to surpass access rates of traditional desktop-based internet by Figure 1. Adaptability as a crosscutting aspect on the traditional modeling the year 2013 [7]. dimensions of web engineering (from Koch et al. [10]) introduce such a mobile progressive enhancement platform. To support developers in the creation of adaptive mobile applications, we propose a method on how to extend existing application frameworks with mobile progressive enhance- ment capabilities. Furthermore, we introduce an adaptive application composition algorithm, which will be at the heart of composing optimal progressive enhancement stacks. With this approach, we propose a robust and future proof method Figure 2. Fine-grained mobile progressive enhancement. A dynamic for the flexible composition of web applications based on process, driven by the specific capabilities of a client’s mobile device the specific capabilities of a user’s mobile device. The remainder of this paper is structured as follows. Section II discusses the algorithmic structure of our ap- methodology expects users to just upgrade their browser proach. Section III deals with the architectural aspects of when the degraded version does not fit their needs. However, extending application frameworks with mobile progressive for most mobile devices upgrading the default browser is not enhancement capabilities. In section IV we discuss the proof an option. of concept implementation of the architecture, followed Progressive enhancement (PE), on the other hand, reverses by some evaluation results. Finally, future work and our the graceful degradation approach and aims at maximizing conclusion are presented in Section V. accessibility over browsers with different capabilities [13]. Progressive enhancement tries to achieve this goal by forcing II. ADAPTIVE APPLICATION COMPOSITION ALGORITHM developers to take the less capable devices into account In this section we propose an adaptive application com- from the very start of the development process. First, a position algorithm, realizing the above defined objective to basic markup document is created, providing an optimal enable the capability-driven progressive enhancement of web experience for devices with the lowest common denominator applications. Mobile applications should provide users with (LCD) of available capabilities. Incrementally and unob- an optimal experience based on the specific capabilities of trusively, one or more layers of structural, presentational, their device. In order to cope with the wide variety of mobile and behavioral enhancements are added in function of the characteristics, we introduce a quantitative evaluation algo- browser’s specific capabilities. rithm derived from the Logic Scoring of Preference (LSP) The progressive enhancement methodology can be applied method. This adaptive application composition algorithm is in a mobile context to tackle fragmentation related issues. designed to support fine-grained progressive enhancement However, when turning the theoretical approach into actual and is capable of suggesting a stack of layers that optimally practice, a considerable number of challenges come into fits the user’s mobile device. play. Today, the use of CSS3 Media Queries [15] and externally linked resources are the most common practice A. Basic Algorithm for selecting appropriate enhancement layers. The number LSP is a quantitative decision method, proposed by Du- of detectable variability points is limited, as adaptation can jmovidc [3]. It is designed to assist decision makers in the only be performed based on the device’s screen capabilities evaluation, comparison, and selection of complex hardware and coarse-grained styling and scripting support. Compared and software systems. The method has shown its use in to desktop browsers, the mobile ecosystem contains far more various domains, especially concerning situations with large combinations of browsers with graded CSS and JavaScript and complex solution spaces. To evaluate a set of candidate support. To provide optimized end-user usability, progressive solutions, LSP starts by assessing n individual performance enhancement should also reckon with the different interac- variables. These variables define the n properties that an tion methods and hardware characteristics offered by mobile ideal solution is expected to have. As the algorithm deals devices. For example, a touch-based device will often require with complex decision problems, most candidate solutions an additional presentational enhancement layer, providing a will not perfectly match the preset criteria. Nevertheless, user interface with more space to accurately click buttons, such candidates should not be rejected, as their overall links, etc. evaluation might still lead to an acceptable solution. LSP In order to create a viable progressive enhancement so- addresses this issue by taking into account how well a lution, it has become increasingly important to support the candidate matches the different performance variables. For use of more fine-grained enhancement layers. As shown in each variable i, a degree of suitability Ei 2 [0; 1] is Figure 2, an intelligent mechanism is needed, supporting calculated. This score expresses