Generating reusable web components from mockups

Mohammad Bajammal, Davood Mazinanian, Ali Mesbah

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.

BibTeX

@inproceedings{Bajammal-al:ASE18,
  author    = {Mohammad Bajammal and
               Davood Mazinanian and
               Ali Mesbah},
  title     = {Generating reusable web components from mockups},
  booktitle = {ASE},
  pages     = {601--611},
  publisher = {{ACM}},
  year      = {2018},
}

Generating reusable web components from mockups

Abstract

Related papers