Modularly Generating Multi-platform Single Page Applications with FrontEnd Patterns

Single Page Application (SPA) is a most popular approach for developing responsive frontend web applications. We proposed in recent works a generative module-based method for SPA. This method is based on domain driven design and consists in a generic and foundational metamodel for SPA. It is applicable to four popular frontend frameworks (Angular, React, React Native and Vuejs). However, creating real-world, complex SPAs requires design patterns at higher levels of abstraction. In this paper, we extend our previous works with a method to modularly generate SPAs from cross-framework frontend design paterns. We define an enhanced metamodel in UML/OCL and use an annotation-based DSL as an intermediate representational language to realise this model. We use this language to construct multi-platform code generators for the frontend frameworks in high-level object oriented programming platforms. We implement our method in a Java software framework and demonstrate its effectiveness with a set of commonly-used cross-framework frontend patterns.