Generating Reusable Web Components from Mockups

Abstract

The transformation of a user interface mockup designed by a graphic designer to web components in the final app built by a web developer is often laborious, involving manual and time consuming steps. We propose an approach to automate this aspect of web development by generating reusable web components from a mockup. Our approach employs visual analysis of the mockup, and unsupervised learning of visual cues to create reusable web components (e.g., React components). We evaluated our approach, implemented in a tool called VizMod, on five real-world web mockups, and assessed the transformations and generated components through comparison with web development experts. The results show that VizMod achieves on average 94% precision and 75% recall in terms of agreement with the developers’ assessment. Furthermore, the refactorings yielded 22% code reusability, on average.

Web UI Web Components Refactoring Computer Vision ASE

BibTex

@inproceedings{Bajammal:ASE:2018:VizMod,
    author={Bajammal, Mohammad and Mazinanian, Davood and Mesbah, Ali},
    title={Generating Reusable Web Components from Mockups},
    booktitle={Proceedings of the 33rd IEEE/ACM International Conference on Automated Software Engineering},
    series = {ASE 2018},
    location = {Montpellier, France},
    numpages = {12}
    year = 2018,
}