Model-Driven Development of Single Page Applications

Prevalent approaches to Model-Driven Web Engineering focus on traditional, hypertext-based web applications, but do not scale well for modern, single page applications (SPAs), where the functionalities are rather reflected by changes of their HTML elements’ properties and dependencies between them than hypertext structures and navigation paths. In the realm of SPAs, modeling, formal model validation, and code generation need better support. We propose an approach to the model-driven development of SPAs. We model the behavior of SPAs with UML state machines and translate these to JavaScript as well as a formal specification, which can be formally verified. Our approach thus provides an intuitive and easy-to-use means, which is backed by formal methods, to model-driven development of SPAs.