Towards the integration of user interface prototyping and model-based development

Abstract

The main objective of this paper is to make a contribution in the automation of web applications' development, starting from prototypes of their graphical user interfaces. Due to the exponential increase in the use of internet-based services and applications, there is an also increasing demand for Web designers and developers. At the same time, the proliferation of languages, frameworks and libraries illustrates the current state of immaturity of web development technologies. This state of affairs creates difficulties in the development and maintenance of Web applications. In this paper, we argue that integrating concepts of model-based user interface development with the more traditional user-centred design approach to development can provide an answer to this situation. An approach is presented that allows designers to use prototyping tools, in this case Adobe XD, to design graphical interfaces, and then automatically converts them to $\mathbf{(Vue.js +Bootstrap)}$ code, thus creating a first version of the implementation for further development. This is done through the interpretation of the SVG file that Adobe XD exports.