一句话：提出 VizMod，通过视觉分析与无监督学习从 UI mockup 自动生成可复用 Web 组件（如 React 组件）。
论文旨在自动化将图形设计师的 UI mockup 转换为最终 Web 应用中可复用组件这一耗时手工过程。方法上，VizMod 对 mockup 进行视觉分析，并通过无监督学习从视觉线索中识别可复用 Web 组件（如 React 组件），进而生成相应代码与重构。评估在五个真实 Web mockup 上进行，将变换与生成组件同 Web 开发专家的判断比较：平均精确率 94%、召回率 75%，重构带来的代码复用率平均为 22%。
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.
DOI 原文 ·
@inproceedings{paperbot4765,
title = {Generating reusable web components from mockups},
author = {Mohammad Bajammal and Davood Mazinanian and Ali Mesbah},
booktitle = {ASE},
year = {2018},
doi = {10.1145/3238147.3238194}
}