Managing Customizable User Interface for Web Application Product Lines using Delta Modeling

In web application development, engineers must implement the User Interface (UI) using diverse implementation artifacts such as HTML, CSS, and JavaScript. Employing a Model-Driven Engineering (MDE) for developing UI may reduce the development effort by automatically generating these artifacts. Additionally, we can combine an MDE approach with Software Product Line (SPL) concepts to model and generate UI variants automatically. However, UI development is a complex and multi-faceted problem. The UI must satisfy the customer preferences for various aspects (e.g., coloring scheme, choice of UI elements, and layouts) while also having a good usability level. Purely generated UI is often unable to comply with these requirements and thus forces the engineers to develop the UI manually instead. In this paper, we proposed an approach for managing customizable UI variants in the context of a web application product line. Our approach uses Interaction Flow Modeling Language (IFML) to model web application UI. Additionally, we define a delta modeling extension for IFML to support modeling UI variants. We implement a tool support that allows engineers to use our approach for modeling and generating UI variants. The tool support also provides a mechanism for UI customization based on developing a set of interchangeable interface styles. We evaluated the feasibility of our approach by applying it to three case studies and conducted a questionnaire survey to assess the usability of the generated UI variants. Our evaluation results show that our approach can be a good starting point to manage UI variants with good usability.