An automated, model-driven of software engineering, approach to the development of single page applications

Abstract

Single Page Applications (SPA) are the modern trend in web applications. Compared to multipage applications, SPAs load an entire web application once and only change parts of the page on every subsequent load. While studies exist on the auto-generation of code specifically using the Model Driven Architecture (MDA) approach for developing applications that have Interactive Graphical User Interfaces (IGUI), there remains a gap for automatically developing applications with IGUI that are SPAs. Developers still face the trouble of writing and testing boilerplate codes, a daunting and time-consuming task. This study presents an MDA approach for the development of SPAs, as current MDA methodologies for developing IGUIs can only generate multi-page Rich Internet Applications (RIA), yet web applications have evolved into SPAs. Together with the approach, this study also presents a transformation tool coined CRUD-Bolt to be used with it. CRUD-Bolt accepts class diagram configurations as input and outputs a React-based SPA component capable of handling Create, Retrieve, Update, and Delete (CRUD) features. It also outputs the test files to auto-test the component. To validate the approach, this study uses a case study where a complete SPA is built using it. The case study is based on the Bangladesh Institute of Research and Rehabilitation in Diabetes, Endocrine, and Metabolic Disorders’ database system, which has 27 entities that collectively have a total of 135 fields. The results show that our approach, compared to manual and other MDA approaches for building SPAs, saves 76% and 62.5% of time, reduces errors by 66.7% and 50%, and reduces units of work by 89.5% and 91.3%, respectively.