From Interface Mockups to Web Application Models

From Interface Mockups to Web Application Models José Matías Rivero 1,2, Gustavo Rossi 1,2, Julián Grigera 1, Esteban Robles Luna 1,3, Antonio Navarro 4 1 LIFIA, Facultad de Informática, UNLP, La Plata, Argentina {mrivero, gustavo, julian.grigera, esteban.robles}@lifia.info.unlp.edu.ar 2 Also at Conicet 3 Also at CICPBA 4 Dpto. de Ingeniería del Software e Inteligencia Artificial, Universidad Complutense de Madrid, anavarro@fdi.ucm.es Abstract. The process of modeling and implementing Web applications has been successfully improved by the use of Model-Driven Web Engineering (MDWE) methodologies. However, because of their traditional process models, these methodologies delay the generation of application prototypes until all design aspects (e.g. domain and navigation) are completed. These aspects are crucial for developers but not for customers, who are interested in viewing parts of the application running as early as possible. In this paper we introduce a novel model driven approach that starts from user interface specifications, using mockups to derive concrete presentation implementations we call it Mockup- Driven Development or just MockupDD. Then, by using lightweight enrichments and applying heuristics over these models, we show how we obtain navigation and content specifications in the context of different MDWE methods. Keywords: Mockups, User-Interface, Agile, Web Engineering, MDD 1 Introduction The development of web applications is a challenging activity involving complex aspects. Many methodologies [1, 2] use models to specify these aspects at a high level of abstraction, and then derive running implementations from such models. These Model-Driven Web Engineering (MDWE) methodologies tend to be designercentric, as they start the web application specification around design concepts like classes, associations, etc. As a consequence, customers and final users cannot really get involved in the development process. In order to encourage this collaboration, agile methodologies 1 propose to integrate customers in the day-to-day work, letting the processes emerge naturally from daily practice. In this context, the agile modeling approach [3] pursues a fast construction of models by following a just barely good enough strategy, i.e. models should be as simple as possible and must be constructed in small increments, using the simplest tools. User Interface (UI) mockups are one of this kind of agile models that can be used to represent requirements in a language that is understandable by both customers and developers. Also, the recent appearances of 1 Principles behind the Agile Manifesto - http://agilemanifesto.org/principles.html

mockup tools like Balsamiq 2 or Axure 3 suggest that UI prototypes are becoming a popular way to represent, communicate and specify requirements. In this work we propose a model-driven development approach that follows the agile modeling principles. It starts by creating UI mockups with direct participation of customers through digital mockup tools. Mockups are then processed to obtain technology independent UI models (called Structural UI models or just SUI) that can be easily mapped to concrete web implementations. Then, these models are enriched to specify navigation, content, content management and data flow. According to our experience this approach: (i) supports customers integration in the development process from the first stages; (ii) supports continuous derivation of application prototypes; (iii) encourages an iterative and lightweight modeling strategy that eases the introduction of new features in short releases; and (iv) it can be also integrated with different MDWE approaches just by adjusting the model transformation process. Since it strongly relies in UI mockups, we call it Mockup-Driven Development (MockupDD). The paper is structured as follows: in Section 2 we discuss some related work. Section 3 introduces how our process is structured in detail, including some examples to show how it works. Section 4 briefly comments our tool support for the approach and some initial feedback that we obtained when applying and evaluating it. Finally, in Section 5 we will conclude summarizing our approach and commenting some further work we are pursuing. 2 Related Work Many mockup tools have appeared in the last years, showing an increasing interest for UI mockups as requirements artifacts; many cases of successful use of mockups in agile development approaches in industry have been observed as well [4, 5]. In addition, statistical studies have been conducted showing that the use of user interface mockups effectively increases and eases software comprehension with a reduced cost in the development process [6]. Mockup tools have been also successfully integrated to bug tracking, project management and wiki environments. User interface mockups are usually linked to other requirements specifications artifacts like User Stories [7]. Also, a common practice with mockups is to informally annotate them in order to specify requirements that cannot be expressed directly through user interface in plain text [8]. In [9], enriched mockups have been used in the context of the OO-Method model-driven approach to derive structural task models. The idea of combining abstract UI prototypes with a requirement specification language to specify human-computer interaction in the form of storyboards is shown in [10]. Additionally, the use of structured UI prototypes to define detailed content specifications in the form of Entity-Relationship models has been observed elsewhere [11]. In our previous work [12] we defined how mockups constructed with different mockup tools can be translated to a common technology independent UI metamodel 2 Balsamiq Mockups http://balsamiq.com/products/mockups 3 Axure http://axure.com

and then derived to different concrete web technologies. We also introduced the idea of applying enrichments to this model to derive navigation models for a concrete MDWE methodology and then inferring content models through a set of heuristics [13]. This paper focuses on SUI model level, using a refined version of these enrichments to define basic navigation and content specification and then inferring advanced features like content management and data workflow through heuristics. The resulting approach represents an agile model-driven methodology to specify heterogeneous features of web applications that can be translated into code or MDWE models. 3 The Overall Approach in a Nutshell Mockups allow specifying user interface features in a simple way, facilitating the fast and just barely good enough modeling approach. They eliminate the burden that development environments usually entail for specifying user interfaces, like detailing containment structure, layout, data sources, etc. We propose to reuse mockups by translating them into our technology-independent SUI models, which can be enriched with navigation and content specifications and, using a set of heuristics, derive almost complete web models and functional code. Though in our previous work [13] we comment how heuristics can be applied over MDWE models generated from enriched UI specifications to obtain different features, here we introduce heuristics directly over enriched SUI models to generate them, making it more suitable in the context of non model-driven environments. Figure 1. Workflow of our approach. While most MDWE methodologies do not allow generating code directly from presentation models, we provide a code generation tool that facilitates the generation of running prototypes used to validate requirements with customers. Consequently, as we outline in Figure 1, our approach allows using SUI models enriched with navigation and content specs, generating different kinds of models or following a code-based methodology, in which running prototypes of the application are incrementally generated and enriched.

3.1 From Mockups to Structural UI Models The first step of our process is to transform mockups into a technology independent UI model, formed out of instances of the meta-model classes described in Figure 1. The key component of this transformation process is the Mockup Processing Engine (MPE) that uses tool-dependent parsers to process mockup files and obtain final SUI models through a series of internal processors. Developers can parameterize algorithms and heuristics applied by the MPE to assure the consistency and adequacy of the obtained SUI model. For the sake of conciseness we do not include a complete description of this step, which can be read in a previous work [12]. 3.2 The Tagging Approach Whereas SUI models represent a structural view of the application (just like any other UI model), no behavior or data can be obtained directly from them, so we define a set of tags that can be applied iteratively over the SUI models providing hints to derive several aspects of web application. A tag is a lightweight specification formed by a name and zero or more textual parameters that can be applied only over a particular widget type (and its subtypes). In the rest of this section we introduce how we can enrich SUI models with navigation and content aspects using tags. We will start showing our approach with the specification of navigation, a fundamental concern in web applications. Navigation is mainly described by two elements: navigational nodes (pages) and links between those nodes. We define two tags to represent these concepts: Node(<nodeId>) is applicable over Pages and assigns an unique id to the Page in order to be referenced by Links (and also for other purposes like naming during code generation). Link(<nodeId>) is applicable over SUI Links and Buttons, and defines a navigation to the Page tagged as Node(<nodeId>)as the default action for the widget to which it is applied. Using the information provided by navigation tags, we can derive simple and generic navigation models for common MDWE methodologies. In order to add content specifications, we introduce a tag named Data(<elementType>) that specifies an association between the underlying Widget and the <elementtype> class, i.e. it shows and/or allows creating or updating instances of that class. An example of the use of the introduced tags can be observed in Figure 2.

Figure 2. Two mockups enriched with Node, Link and Data tags. 3.3 Inferring Features through Heuristics At this point, navigation and content tags allow inferring pages, links and classes respectively, but through the combination of both tag sets semantics and the application of heuristics, we can infer content flow, content management and associations between classes in the content model. Though our approach can be used in the context of any code-based or MDWE methodology, we have chosen WebML [1] to show the semantics of the inferred features because its navigation metamodel is rich, concise and expresses data flow and content management in a compact and natural way. Basically, WebML allows describing hypertext structures through basic elements called units. The language defines several types of units; the main unit types are content and operation units that allow displaying content and specifying operations like object creation or deletion respectively. Units are connected by links that may represent both navigation and data flow, and can be grouped together into pages and modules. The language also allows defining content models through a metamodel containing classic content specifications like classes/entities, relationships, attributes, etc. Hypertext structures rely on these models to correctly specify and further derive the whole web application. The aforementioned inferred features from the tagged mockup of Figure 2 can be depicted in the WebML model diagram of Figure 3.a. Web models are obtained through a transformation process in which SUI models enriched with tags are analyzed and further WebML model elements are generated.

Figure 3. Inferred WebML models from tagged mockup of Figure 2 and Containment to Association heuristic structure. As we can notice in the figure, some heuristics have been implicitly used to infer extra features (e.g., links between units) in WebML models. One of this heuristics is called Containment to Association (depicted in Figure 3.b), that infers an association between classes/entities when both a Widget and its parent are tagged with Data tags. This heuristic is used to infer the association between Album and Comment classes among others in the model present in Figure 3.a. While heuristics help to derive approximate models that are effective in the most cases, in less common contexts they can infer imprecise or wrong features. Because of this, a final slight refactoring phase (as common in agile methodologies) must be carried out to obtain the final models. 4 Tool Support and Experience Our approach uses interface mockups as key artifacts in the development process. Since building mockups is usually simple, it can be done together with customers. To effectively add agility to our modeling process, tool support is fundamental. We have developed a tool (see Figure 4) that has been easily integrated into environments like Eclipse or Visual Studio allowing processing mockups files, drawing the obtained SUI models, tagging them and then watching the generated prototype in action. We have used MockupDD to assist the development of several applications. We appreciated more customer enthusiasm and integration to the development endeavour using mockups and tags in comparison with projects in which we used common textual requirements. We are currently conducting detailed quantitative and qualitative studies to measure the real impact of our approach in the development process.

Figure 4. Screenshot of our tagging tool running on Eclipse IDE. A SUI is being tagged, and the original Balsamiq mockup is shown on the right. 5 Concluding Remarks and Further Work In this paper we have presented an agile model-driven development approach that aims to enhance customer integration in the development process and, at the same time, allow modeling in small increments, using UI concepts as a common language between developers and customers. This approach presents a disruption from traditional agile ones since it incorporates mockups to the process, and uses them to create informal models that grow into accurate specifications, combining advantages of both agile and model-driven methodologies. Considering that we start the development from presentation specifications, we can constantly make use of code and model generation to rapidly obtain application prototypes at all stages of the development process. This particular feature of our approach facilitates constant interaction with customers by discussing on the generated prototypes. We showed how SUI models could be easily enriched with tags, lightweight specifications that provide useful hints to code and/or model generators. We have also shown the semantic power of such simple resource. Regarding future work, the definition of a pattern and heuristics catalogue represents a very important issue. In our opinion, with a complete list of patterns and inference rules, the most of common content management and data flow cases can be tackled and derived to models or code. Though we have used WebML as the target MDWE methodology along this paper, we are working on generating presentation, navigation, content and behavior models for other MDWE approaches like UWE [2]. Direct code generation to other modern web technologies like GWT and ASP.NET is another interesting field in the context of our approach. We are also interested in refining general tags, or adding methodology/platform-dependent tags to improve code generation.

Acknowledgments. Work partially supported by MICINN (TIN2009-14317-C03-01) and ANPCYT Project PICT 4187.6. References 1. Ceri, S., Fraternali, P., Bongio, A.: Web Modeling Language (WebML): A Modeling Language for Designing Web Sites. Computer Networks and ISDN Systems, 33(1-6), 137-157 (2000) 2. Koch, N., Knapp, A., Zhang G., Baumeister, H.: UML-Based Web Engineering, an Approach Based on Standards. In: Web Engineering, Modelling and Implementing Web Applications, 157-191. Springer (2008) 3. Ambler, S.: Agile Modeling: Effective Practices for Extreme Programming and the Unified Process. J. Wiley (2002) 4. Ferreira J., Noble J., & Biddle R.: Agile Development Iterations and UI Design. In: AGILE 2007 Conference, Washington, DC: IEEE Computer Society, 50-58 (2007) 5. Ton, H.: A Strategy for Balancing Business Value and Story Size. In: Agile 2007 Conference. Washington, DC: IEEE Computer Society, 279-284 (2007) 6. Ricca, F., Scanniello, G., Torchiano, M., Reggio, G., Astesiano, E.: On the Effectiveness of Screen Mockups in Requirements Engineering. ACM Press, New York, USA (2010) 7. Cohn, M.: User Stories Applied: for Agile Software Development. Addison- Wesley (2004) 8. Moore, J. M.: Communicating Requirements Using End-User GUI Constructions with Argumentation. In: 18th IEEE International Conference on Automated Software Engineering, 360-363, IEEE Computer Society (2003) 9. Panach, J.I., España, S., Pederiva, I., Pastor, O.: Capturing Interaction Requirements in a Model Transformation Technology Based on MDA. J. UCS 14, 1480-1495 (2008) 10. Mukasa, K.S., Kaindl, H.: An Integration of Requirements and User Interface Specifications. In: 6th IEEE International Requirements Engineering Conference, pp. 327-328. IEEE Computer Society (2008) 11. Ramdoyal, R., Cleve, A., Hainaut, J.-L.: Reverse Engineering User Interfaces for Interactive Database Conceptual Analysis. In: 22th International Conference in Advanced Information Systems Engineering (CAiSE), pp. 332-347. Springer Berlin Heidelberg (2010) 12. Rivero, J. M., Rossi, G., Grigera, J., Burella, J., Robles Luna, E., Gordillo, S. E.: From Mockups to User Interface Models: An Extensible Model Driven Approach. In: 10th International Conference on Web Engineering (ICWE), pp. 13-24. Springer (2010) 13. Rivero, J.M., Grigera, J., Rossi, G., Luna, E.R., Koch, N.: Improving Agility in Model-Driven Web Engineering. In: CAiSEʼ11 Forum Proceedings, pp. 163-170. CEUR, London, England (2011)