Generating Multi-platform Single Page Applications: A Hierarchical Domain-Driven Design Approach

Single Page Application (SPA) is a most common approach for developing modern web applications. A chief benefit of SPA is reduced round-trip to the server and more responsive user experience. Although several well-known SPA frameworks have been developed and applied in practice, SPA developers are still facing two main challenges: (i) design an SPA that would work accross the frameworks and (ii) realise this design in an intermediate high-level language that would effectively be transformed into a target framework of choice. In this paper, we propose a multi-platform, hierarchical domain-driven design method to tackle these challenges. Our method uses the domain model as the core to build the SPA. We formulate a set of essential technical SPA requirement patterns and, based on these, define a precise SPA metamodel in UML/OCL. We use an annotation-based DSL as an intermediate representational language for the SPA metamodel and from this propose an SPA generator that generates SPAs for four popular SPA frameworks (Angular, React (Native) and Vuejs). The evaluation results show that our method is very promising for building multi-platform SPAs.