A Model Driven Framework for the Development of Multi-Platform Mobile User Interfaces

Abstract

Since the emergence of mobile devices, the architecture of mobile applications have been transformed significantly and its complexity has grown enormously. In such mobile applications, the User Interface (UI) is an important ingredient and with the increased complexity, its development is getting cost / time-consuming process. There exist several mobile platforms (e.g. Android, IOS etc.) where each has its own operating requirements. Even single platform contains several versions of operating systems with different operating requirements. In this situation, the development of multifaceted mobile user interfaces for different platforms is very challenging especially dealing with the productivity and time-to-market constraints. Consequently, there is a strong need to develop a simple and automated framework for the development of multi-platform mobile user interfaces by exploiting the concepts of Model Driven Architecture (MDA). Therefore, in this research, a model-based framework is proposed for the development of multiplatform mobile user interfaces. Particularly, the UMUI (Unified modeling language profile for multi-platform Mobile User Interfaces) has been developed, which adapts the concepts of UML Class Diagram for representing the mobile user interface requirements at higher abstraction level. As a part of research, a complete MMUI (Model driven multiplatform Mobile User Interfaces) transformation engine has been developed, utilizing Model-to-Text (M2T) approach, in order to automatically transform the high level UMUI source models into low level react native implementation. Finally, the proposed framework application is validated through two bench mark case studies i.e. Patient Management System & Library Application. The results prove that the proposed framework allows the modeling of multiplatform user interfaces with styling, layout, native look and feel requirements through UMUI with simplicity. Subsequently, the deployable react native code can automatically be generated from the source models through MMUI transformation engine. It has been concluded that the proposed framework is highly beneficial to achieve major business objectives like productivity and time-to-market for mobile applications.