Abstract
Since the emergence of mobile devices, the architecture of mobile applications has been transformed significantly. In mobile applications, the User Interface (UI) is one of the major elements, but its development is complex and time-consuming. Existing practices do not support various presentation issues of the UI at a higher abstraction level, in a retargetable fashion, with complete tool support. Therefore, it is critical to develop a simple and automated framework for the development of mobile UIs by exploiting model-driven engineering concepts. In this paper, a Unified Modeling language (UML) profile for Mobile User Interfaces (UMMUI) has been proposed, which employs some standard UML notations for representing the mobile UI requirements at a higher abstraction level. Subsequently, a complete open-source transformation engine has been developed to automatically transform the high-level source models (in UMMUI) into the target low-level React Native implementation. Finally, the applicability of the proposed framework is validated through two benchmark case studies, i.e., Patient Management System and Library Application. The results verify that the proposed framework allows the modeling of UIs with simplicity and generates the target code automatically with minimum transformation losses.