Automated Generation of Web Application Front-end Components from User Interface Mockups

Oksana Nikiforova, Kristaps Babris, Farshad Mahmoudifar

2024

Abstract

In modern web development, the design-to-code process is a critical bottleneck, often characterized by inefficiencies and inconsistencies between initial design concepts and implemented user interfaces. Bridging this gap demands innovative solutions that streamline the translation of design artefacts, such as wireframes/mockups, into functional front-end components. Generation of user interface (UI) elements has also been in the spotlight of researchers all along. There are several solutions to support the transformation of different automation processes and elements, but the fact that common methods and tools for generating UIs are still not widely used shows that this problem has not been solved yet. In this paper, we propose model-driven approach to automate the generation of front-end source code from wireframe representations and, thereby facilitating rapid prototyping and enhancing collaboration between designers and developers. The paper offers the conceptual solution for front-end components generation from the mockups developed in the UI design tools, where it is possible to have formal definition of the UI elements source code. The offered solution is approbated on the abstract practical example, where mockups designed in the tool draw.io are used as a source for generation of front-end components of the web application deployed in AngularJS framework.

Paper Citation

in Harvard Style

Nikiforova O., Babris K. and Mahmoudifar F. (2024). Automated Generation of Web Application Front-end Components from User Interface Mockups. In Proceedings of the 19th International Conference on Software Technologies - Volume 1: ICSOFT; ISBN 978-989-758-706-1, SciTePress, pages 100-111. DOI: 10.5220/0012759500003753

in Bibtex Style

@conference{icsoft24,
author={Oksana Nikiforova and Kristaps Babris and Farshad Mahmoudifar},
title={Automated Generation of Web Application Front-end Components from User Interface Mockups},
booktitle={Proceedings of the 19th International Conference on Software Technologies - Volume 1: ICSOFT},
year={2024},
pages={100-111},
publisher={SciTePress},
organization={INSTICC},
doi={10.5220/0012759500003753},
isbn={978-989-758-706-1},
}

in EndNote Style

TY - CONF

JO - Proceedings of the 19th International Conference on Software Technologies - Volume 1: ICSOFT
TI - Automated Generation of Web Application Front-end Components from User Interface Mockups
SN - 978-989-758-706-1
AU - Nikiforova O.
AU - Babris K.
AU - Mahmoudifar F.
PY - 2024
SP - 100
EP - 111
DO - 10.5220/0012759500003753
PB - SciTePress