25 Years of Model-Driven Web Engineering : What we achieved, what is missing

Model-Driven Web Engineering (MDWE) approaches aim to improve the Web applications development process by focusing on modeling instead of coding, and deriving the running application by transformations from conceptual models to code. The emergence of the Interaction Flow Modeling Language (IFML) has been an important milestone in the evolution of Web modeling languages, indicating not only the maturity of the field but also a final convergence of languages. In this paper we explain the evolution of modeling and design approaches since the early years (the 90’s) detailing the forces which drove that evolution and discussing the strengths and weaknesses of some of those approaches. A brief presentation of IFML is accompanied with a thorough analysis of the most important achievements of the MDWE community as well as the problems and obstacles that hinder the dissemination of model-driven techniques in the Web engineering field.Laboratorio de Investigación y Formación en Informática Avanzada (LIFIA

Measuring Interaction Design before Building the System: a Model-Based Approach

Early prototyping of user interfaces is an established good practice in interactive system development. However, prototypes cover only some usage scenarios, and questions dealing with number of required steps, possible interaction paths or impact of possible user errors can be answered only for the specific scenarios and only after tedious manual inspection. We present a tool (MIGTool) that transforms models of the behavior of a user interface into a graph, upon which usage scenarios can be easily specified, and used by MIGTool to compute possible interaction paths. Metrics based on possible paths, with or without user navigation errors, can then be computed. For example, when analyzing four mail applications, we show that Gmail has 3 times more shortest routes, has twice more routes that include a single user error, has routes with 13\ufewer steps, but has also optimal routes with the smallest probability to be chosen. Without MIGTool, this kind of analysis could only be done after building some prototype of the system, and then only for specific scenarios by manually tracing user actions and relative changes to the screens. With MIGTool the exploration of suitability of a design with respect to different scenarios, or comparison of different design alternatives against a single scenario, can be done with just a partial specification of the user interface behavior. This is made possible by the ability to associate scenarios steps to required user actions as defined in the model, by an efficient strategy to identify complete execution traces that users can follow, and by computing a range of diverse metrics on these results

Code Generation based on IFML for the User Interfaces of the Square Kilometre Array (SKA)

The Square Kilometre Array (SKA) project is responsible for developing the SKA Observatory, the world’s largest radiotelescope ever built. In this context, a number of Graphical User Interfaces (GUI) have to be designed and built to be used for monitoring and control, testing, simulation, integration, commissioning and maintenance. The Tango framework and its UI tools, selected for SKA in 2015, support the types of basic control interfaces currently used at both radio telescopes and within high energy physics experiments. This paper reports on the development of a Qt/Taurus code generator prototype based on the IFML (Interaction Flow Modeling Language) standard and respective modeling tools, that are extended for supporting the platform-specific code generation. The purpose of this work is to enable the use of low-code development in SKA GUI design, thus enabling increased efficiency, reliability and coherency of the produced UI. We present a simple GUI use case as complete example of software development cycle starting from requirements and including IFML modelling, Qt/Taurus automatic coding, interface evaluation and validation

Adaptive model for web engineering methods to develop multi web applications in agile environment

Model Driven Web Engineering (MDWE) is an application of a model driven paradigm in the domain of web software development. MDWE is helpful because technologies and platforms of web applications constantly evolve into Web Engineering Methods (WEMs). The evolution of web applications has consequently introduced new features and challenges, therefore existing WEMs need to be improved. These WEMs have failed to develop modern web applications’ features. Furthermore, no single WEM is capable of covering the whole lifecycle phases. These issues decrease the usability. In addition, the Interaction Flow Modeling Language (IFML) as a recent method has also not been able to address them. This thesis developed a new WEM, Useable Adaptive Agile IFML (UAA-IFML) to solve these issues in several steps. In this research, mixed methods used were qualitative and quantitative methodologies. In the first step, a new adaptive model was defined for supporting the features of multi-web applications. The new model was developed via an adaptive model into the IFML metamodels known as Adaptive IFML (AIFML). In the second step, IFML was enriched through MockupDD for covering lifecycle, known as Agile IFML (A-IFML). This is because MockupDD provides an agile environment, hence agile lifecycle can solve the lifecycle issue. In the third step, a new adaptive model and agile process were combined as Adaptive Agile IFML (AAIFML). This integration increased the usability of the IFML method. In presenting the usability of AA-IFML, experimentation of the framework was extended to evaluate the usability of WEMs. Besides, feedbacks on the usability of AA-IFML were obtained from developers around the world using three instruments, namely performing tasks, answering questionnaires, and interviewing experts. Analysis on the feedback indicated a 20% improvement usability of the AA-IFML compared with current IFML. The findings have shown that the UAA-IFML is beneficial for developers, as they would only need to use one method to design modern web application features in the whole lifecycle phases

The SKA dish local monitoring and control system user interface

The Square Kilometre Array (SKA) project is responsible for developing the SKA Observatory, the world's largest radiotelescope ever built: eventually two arrays of radio antennas - SKA1-Mid and SKA1-Low - will be installed in the South Africa's Karoo region and Western Australia's Murchison Shire, each covering a different range of radio frequencies. In particular SKA1-Mid array will comprise 133 15m diameter dish antennas observing in the 350 MHz-14 GHz range, each locally managed by a Local Monitoring and Control (LMC) system and remotely orchestrated by the SKA Telescope Manager (TM) system. Dish LMC will provide a Graphical User Interface (GUI) to be used for monitoring and Dish control in standalone mode for testing, TM simulation, integration, commissioning and maintenance. This paper gives a status update of the LMC GUI design involving users and tasks analysis, system prototyping, interface evaluation, provides details on the GUI prototypes being developed and technological choices and discuss key challenges in the LMC UI architecture, as well as our approaches to addressing them. In the GUI design task we have adopted a Usage-Centered Design (UCD) approach based on the early involvement of users whose feedback is being iteratively considered in analysis phases, as well as in design and evaluation. An IFML based user interaction modeling approach has been adopted

25 Years of Model-Driven Web Engineering : What we achieved, what is missing

Model-Driven Web Engineering (MDWE) approaches aim to improve the Web applications development process by focusing on modeling instead of coding, and deriving the running application by transformations from conceptual models to code. The emergence of the Interaction Flow Modeling Language (IFML) has been an important milestone in the evolution of Web modeling languages, indicating not only the maturity of the field but also a final convergence of languages. In this paper we explain the evolution of modeling and design approaches since the early years (the 90’s) detailing the forces which drove that evolution and discussing the strengths and weaknesses of some of those approaches. A brief presentation of IFML is accompanied with a thorough analysis of the most important achievements of the MDWE community as well as the problems and obstacles that hinder the dissemination of model-driven techniques in the Web engineering field.Laboratorio de Investigación y Formación en Informática Avanzada (LIFIA

Migrating legacy web applications

Applications are a ubiquitous tool when running on mobile devices become an opportunity for a new digital business model. However, enterprises implemented the core business in legacy applications that are not designed to run properly on mobile devices. Consequently, this migration involves time and cost. The main contribution of this study to these limitations is an approach to assist this migration based on Markov chains that is a predictive user behaviour method that allows that available functionality is prioritized, the experience of User Interface is re-thought, and the new design is evaluated with a preliminary running version of the legacy app. An experiment on ten participants shows that a dynamic user interface that implements the Markov model provides the users with better usability, evidenced with an improvement of productivity labour and the Nielsen heuristics comparison between versions. This work suggests this model makes possible a smart and proactive interface design

Migrating legacy web applications

Applications are a ubiquitous tool when running on mobile devices become an opportunity for a new digital business model. However, enterprises implemented the core business in legacy applications that are not designed to run properly on mobile devices. Consequently, this migration involves time and cost. The main contribution of this study to these limitations is an approach to assist this migration based on Markov chains that is a predictive user behaviour method that allows that available functionality is prioritized, the experience of User Interface is re-thought, and the new design is evaluated with a preliminary running version of the legacy app. An experiment on ten participants shows that a dynamic user interface that implements the Markov model provides the users with better usability, evidenced with an improvement of productivity labour and the Nielsen heuristics comparison between versions. This work suggests this model makes possible a smart and proactive interface design.Laboratorio de Investigación y Formación en Informática Avanzad

Towards fast metamodel evolution in LiquidML

The software industry is applying Model-driven development approaches due to a core set of benefits, such as raising the level of abstraction and reducing coding errors. However, their underlying modeling languages tend to be quite static, making their evolution hard, specifically when the corresponding metamodel does not support primitives and/or functionalities required in specific business domains. This paper presents an extension to the LiquidML language to support fast metamodel evolution by allowing experts to abstract new language concepts from primitives while supporting automatic tool evolution and zero application downtime. To probe our claims, we evaluate the evolutionary capabilities of existing modeling languages and LiquidML in a real world language extension.Ministerio de Economía y Competitividad TIN2016-76956-C3-2-R (POLOLAS)Ministerio de Economía y Competitividad TIN2015-71938-RED

Closing the Gap Between Designers and Developers in a Low-Code Ecosystem

Digital systems play an important role in the strategy of companies nowadays as they are crucial to achieve their business goals as well as gain a competitive advantage. This is particularly true for systems designed for the end-users market. Not only has the number of such systems been growing steadily but the requirements and expectations of users regarding usability and performance have also increased. Developing software systems is a complex process that comprises several stages and involves multiple professionals responsible for different tasks. Two stages of the process are the design and implementation of User Interfaces. UX and UI designers produce artifacts such as mockups and prototypes using design tools describing what should be the systems behavior, interactivity and look and feel. Next, Front-end and Back-end developers implement the system according to the specifications defined by designers. Designers and developers use different methodologies, languages, and tools. This introduces a communication gap between both groups, and hence collaboration between them is not always smooth. This ends up causing less efficient processes, rework and loss of information. Developers sometimes overlook the importance of User Experience and Front-end De velopment. The corresponding project stages suffer when collaboration between groups is not optimal. Problems are particularly striking during the transition from design arti facts to front-end code. The procedures for doing this are often manual, very error-prone, and time-consuming for developers that end-up completely re-doing the designers’ work in the target web technology. The aim of this dissertation is to improve the efficiency of collaboration between de signers and front-end developers in the OutSystems ecosystem. This was carried out by developing a tool that transforms UX/UI design artefacts into low-code web-technology using model transformation and meta-modelling techniques. The approach has been evaluated in practice by a team of professional designers and front-end developers. Re sults show savings between 20 and 75% according to the project complexity in the effort invested by development teams in the above mentioned process.Os sistemas digitais têm um papel muito importante hoje em dia na estratégia das empresas, uma vez que as ajudam a atingir os seus objetivos de negócios assim como a ganhar vantagem competitiva face às demais. Isto é particularmente verdade para os sistemas destinados ao mercado dos utilizadores finais. Não só aumentou significativamente o número de tais sistemas como aumentaram também os requisitos e expectativas dos seus utilizadores. O desenvolvimento de sistemas de software é um processo complexo que envolve um número alargado de profissionais com diferentes perfis. Duas das fases são o design de interfaces e a sua implementação. Os UI e UX designers produzem um conjunto de ficheiros utilizando ferramentas de design descrevendo o comportamento, interação e aparência do sistema. Os Front-end e Back-end developers implementam as funcionalidades do sistema com base nas especificações dos designers. Designers e developers trabalham utilizando diferentes metodologias, linguagens e ferramentas. Isto introduz uma lacuna entre os grupos e dificulta a sua colaboração, originando processos menos eficientes, trabalho refeito e perda de informação. Os engenheiros de software por vezes negligenciam disciplinas tais como a Experi ência do Utilizador e o Front-end. Estas fases dos projetos são prejudicadas quando a colaboração entre os grupos não é ótima. Os problemas são particularmente evidentes durante a transição entre design e Front-end. Os procedimentos são manuais, altamente propensos a erros e demorados para os developers, que acabam por refazer o trabalho dos designers na tecnologia web desejada. O objetivo desta dissertação é melhorar a eficiência da colaboração entre designers e front-end developers no ecossistema OutSystems. Isto foi levado a cabo desenvolvendo uma ferramenta capaz de transformar artefactos de UX/UI em low-code utilizando transformações de modelos e técnicas de meta-modeling. A abordagem foi avaliada em prática por uma equipa profissional de designers e front-end developers. Os resultados obtidos mostram poupanças entre os 20 e os 75% de acordo com a complexidade do projeto no esforço investido pelas equipas de desenvolvimento no processo mencionado acima