Model-Driven Development of Single-Page Applications Using UML State Machines and Maude

Current approaches to model-driven development of web applications focus on traditional, hypertext-based web applications. Consequently, their models mainly address the aspects hyptertext structure and navigation paths of the web application. The presentation aspect, however, is supported only in a rather abstract manner, in particular, modeling the different states of the HTML elements is not supported. Therefore, while useful for their intended purpose of modeling traditional, thin-client applications, these approaches are not quite suitable for designing modern Single Page Applications (SPAs), whose functionalities are reflected by changes of their HTML elements’ properties and dependencies between them rather than by hypertext structures and navigation paths. In the realm of SPAs, modeling, formal model validation, and code generation need better support.In this paper, we present an approach to modeling SPAs with UML state machines and translating these to JavaScript controller code as well as to the formal specification language Maude. Also, we demonstrate how the formal model can be used to verify the modeled system. Our approach thus provides an intuitive, easy-to-use, and yet powerful means to model-driven development of SPAs.