José Matías Rivero

Mockup-Driven Development: Providing agile support for Model-Driven Web Engineering

Context: Agile software development approaches are currently becoming the industry standard for Web Application development. On the other hand, Model-Driven Web Engineering (MDWE) methodologies are known to improve productivity when building this kind of applications. However, current MDWE methodologies tend to ignore important aspects of Web Applications development supported by agile processes, such as constant customer feedback or early design of user interfaces. Objective: In this paper we analyze the difficulties of supporting agile features in MDWE methodologies. Then, we propose an approach that eases the incorporation of well-known agile practices to MDWE. Method: We propose using User Interface prototypes (usually known as mockups) as a way to start the modeling process in the context of a mixed agile-MDWE process. To assist this process, we defined a lightweight metamodel that allows modeling features over mockups, interacting with end-users and generating MDWE models. Then, we conducted a statistical evaluation of both approaches (traditional vs. mockup-based modeling). Results: First we comment on how agile features can be added to MDWE processes using mockups. Then, we show by means of a quantitative study that the proposed approach is faster, less error-prone and still as complete as traditional MDWE processes. Conclusion: The use of mockups to guide the MDWE process helps in the reduction of the development cycle as well as in the incorporation of agile practices in the model-driven workflow. Complete MDWE models can be built and generated by using lightweight modeling over User Interface mockups, and this process suggests being more efficient, in terms of errors and effort, than traditional modeling in MDWE.

From mockups to user interface models: an extensible model driven approach

Sketching web applications with mockup tools is a common practice that improves the process of elicitation and validation of requirements in web applications. However, mockups are used as a quick and dirty way of gathering requirements, thus discarded before development. As a consequence, concepts captured in them are usually lost in the manual transformation between mockups and the final user interface. In this paper we present a model-driven approach that overcomes this problem by importing mockups and then transforming them into a technology-dependent model. Development then begins from the imported version of the mockups.

Towards Agile Model-Driven Web Engineering

The increasing growth of the Web field has promoted the development of a plethora of Model-Driven Web Engineering (MDWE) approaches. These methodologies share a top-down approach: they start by modeling application content, then they define a navigational schema, and finally refine the latter to obtain presentation and rich behavior specifications. Such approach makes it difficult to acquire quick feedback from customers. Conversely, agile methods follow a non-structured, implementation-centered process building software prototypes to get immediate feedback. In this work we propose an agile approach to MDWE methodologies (called Mockup-Driven Development, or MockupDD) by inverting the development process: we start from user interface mockups that facilitate the generation of software prototypes and models, then we enrich them and apply heuristics in order to obtain software specifications at different abstraction levels. As a result, we get an agile prototype-based iterative process, with advantages of a MDWE one.

MockAPI: an agile approach supporting API-first web application development

In the last years, agile development methodologies have been widely adopted. However, they still lack support for API requirements while, at the same time, public RESTful APIs are fueling a rapid growth of web applications providing services built on other services. On the other hand, whereas Model-Driven Development techniques successfully increase the productivity in the development of data-intensive web applications, they lack the agility required when developing heterogeneous web applications with frequent requirement changes. In this paper we introduce MockAPI, an approach based on annotating user interface mockups that combines the advantages of agile approaches and Model-Driven Development. We introduce a metamodel for annotations and demonstrate how to derive running API prototypes as starting point for agile development. RESTful API best practices and API-first development are introduced into the agile process. The MockAPI approach defines a set of constraints to accelerate the development of web applications. We also show the results of a brief validation applying MockAPI to popular web sites.

Automatic detection of usability smells in web applications

Abstract Usability assessment of web applications continues to be an expensive and often neglected practice. While large companies are able to spare resources for studying and improving usability in their products, smaller businesses often divert theirs in other aspects. To help these cases, researches have devised automatic approaches for user interaction analysis, and there are commercial services that offer automated usability statistics at relatively low fees. However, most existing approaches still fall short in specifying the usability problems concretely enough to identify and suggest solutions. In this work we describe usability smells of user interaction, i.e., hints of usability problems on running web applications, and the process in which they can be identified by analyzing user interaction events. We also describe USF, the tool that implements the process in a fully automated way with minimum setup effort. USF analyses user interaction events on-the-fly, discovers usability smells and reports them together with a concrete solution in terms of a usability refactoring, providing usability advice for deployed web applications.

From interface mockups to web application models

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.

A Tool for Detecting Bad Usability Smells in an Automatic Way

The refactoring technique helps developers to improve not only source code quality, but also other aspects like usability. The problems refactoring helps to solve in the specific field of web usability are considered to be issues that make common tasks complicated for end users. Finding such problems, known in the jargon as bad smells, is often challenging for developers, especially for those who do not have experience in usability. In an attempt to leverage this task, we introduce a tool that automatically finds bad usability smells in web applications. Since bad smells are catalogued in the literature together with their suggested refactorings, it is easier for developers to find appropriate solutions.

From requirements to web applications in an agile model-driven approach

Web applications are hard to build not only because of technical reasons but also because they involve many different kinds of stakeholders. Involving customers in the development process is a must, not only while eliciting requirements but also considering that requirements change fast and they must be validated continuously. However, while model-driven approaches represent a step forward to reduce development time and work at a higher level of abstraction, most of them practically ignore stakeholders involvement. Agile approaches tend to solve this problem, though they generally focus on programming rather than modeling. In this paper we present an extension to an approach that combines the best of both worlds, allowing a formal and high-level design style with constant involvement of customers, mainly in the definition of navigation, interaction and interface features. We extended it by adding transformation features that allow mapping requirement models into content and navigation ones. We provide a proof of concept in the context of the WebML design method and an empiric validation of the approachs advantages.

CrowdMock: an approach for defining and evolving web augmentation requirements

Abstract Web Applications are accessed by millions of users with different needs, goals, concerns, or preferences. Several well-known Web Applications provide personalized features, e.g., they recommend specific content to users by contemplating individual characteristics or requirements. However, since most Web Application cannot consider all users’ requirements, many developers started to create their own mechanisms for adapting existing applications. One of the most popular techniques for third-party applications adaptation is Web Augmentation, which is based on the alteration of its original user interface, generally by using scripts running at the client side (e.g., the browser). In the context of Web Augmentation, two user roles have emerged: scripters who are those users able to create a new augmentation artifact, and endusers without programming skills, that just consume the artifacts that may satisfy totally or partially their needs. Scripters and end users generally do not know each other, and they have rarely a contact, beyond the fact that they use the same script repositories. When end users cannot get their needs covered with existing artifacts, they claim for new ones by specifying their requirements (called Web Augmentation requirements) using textual descriptions, which are usually hard to interpret by scripters. Web Augmentation requirements are a very particular kind of Web requirements for which there partially exist a solution implemented by the Web site owner, but still users need to change or augment that implementation with very specific purposes that they desire to be available in such site. In this paper, we propose an approach for defining and evolving Web Augmentation requirements using rich visual prototypes and textual descriptions that can be automatically mapped onto running software artifacts. We present a tool implemented to support this approach, and we show an evaluation of both the approach and the tool.

MockupDD: Facilitating Agile Support for Model-Driven Web Engineering

Model-Driven Web Engineering methodologies provide a more productive way of building Web Applications using high-level models and generating final implementations from them. However, they follow a waterfall-like development process, forcing to specify a different set of models sequentially to obtain a first runnable prototype of the Web Application. On the other hand, agile methodologies pursue an iterative process based on the delivery of application prototypes in short periods of time using manual coding, which results less productive and more error-prone in comparison to model-based approaches. In this work we propose a hybrid agile and Model-Driven approach called MockupDD that intends to blend the best of MDWE and agile development processes.