Edelweiss Applied Science and Technology ISSN: 2576-8484 Vol. 9, No. 6, 1530-1544 2025 Publisher: Learning Gate DOI: 10.55214/25768484.v9i6.8185 © 2025 by the authors; licensee Learning Gate © 2025 by the authors; licensee Learning Gate History: Received: 3 April 2025; Revised: 6 June 2025; Accepted: 9 June 2025; Published: 19 June 2025 * Correspondence: nadri.khiati@univ-saida.dz WA2MA: A model-driven approach for reengineering web applications into mobile applications Nadri Khiati1*, Djelloul Bouchiha2, Yahia Atig3, Sofiane Boukli Hacene4 1,4EEDIS Laboratory, University of Sidi Bel Abbes, Algeria; nadri.khiati@univ-saida.dz (N.K.). 2,3Department of Computer Science, University Centre of Naama, Algeria. Abstract: With the increasing prevalence of mobile computing, organizations must adapt legacy web applications to pervasive information systems, ensuring seamless accessibility across diverse devices. This paper introduces WA2MA, a model-driven reengineering approach for systematically transforming web applications into mobile applications. The approach follows a structured three-phase process based on Model-Driven Architecture (MDA) principles: Reverse Engineering, where Platform- Independent Models (PIMs) are extracted to represent the structural and behavioral aspects of the existing web application; Transformation, where these models are refined into Platform-Specific Models (PSMs) using a tailored Unified Modeling Language (UML) profile to address mobile platform constraints; and Forward Engineering, where automated model-to-text transformations generate a significant portion of the mobile application’s source code. The Acceleo technology is leveraged to facilitate this automation through predefined transformation rules and code generation templates. A case study demonstrates the effectiveness of the WA2MA approach, highlighting a substantial reduction in manual effort and improved consistency in the generated code. This research contributes to the advancement of model-driven engineering (MDE) by providing a structured and scalable methodology for the migration of web applications to mobile platforms. Keywords: Code generation, Mobile applications, Model-Driven architecture MDA, Pattern, Pervasive information systems (PIS), Profile, Software reengineering, Unified modeling language (UML), Web applications. 1. Introduction The rapid advancements of wireless and mobile technologies has introduced a new era defined by the emergence of pervasive information systems (PIS) [1]. These systems, powered by ubiquitous computing, have revolutionized how we access and interact with information. In the modern interconnected world, information is no longer confined to specific locations or devices; it is accessible from a variety of devices, at any time, and from virtually any place. This paradigm shift presents a critical challenge: how to effectively adapt and reengineer legacy information systems (ISs), particularly web applications, to meet the requirements of pervasive information systems, with a strong emphasis on mobile applications. This complex transformation process, commonly referred to as re-engineering [2] is the focal point of our research. In this paper, we propose a systematic approach for reengineering legacy web applications into pervasive information systems, with a focus on mobile platforms, leveraging the principles of Model- Driven Architecture (MDA) a methodology that emphasizes the use of models as the primary artifacts throughout the software development lifecycle. The process is structured around three key phases: Reverse-engineering, Transformation, and Forward-engineering. • Reverse-engineering: This phase involves the extraction of High-level PIMs from the web application, providing a comprehensive overview of its structure and functionality. These models serve as the foundation for the subsequent phases of transformation and forward- https://orcid.org/0009-0008-1498-5265 https://orcid.org/0000-0001-7314-4329 https://orcid.org/0000-0003-0771-4180 https://orcid.org/0000-0002-9760-3806 1531 Edelweiss Applied Science and Technology ISSN: 2576-8484 Vol. 9, No. 6: 1530-1544, 2025 DOI: 10.55214/25768484.v9i6.8185 © 2025 by the authors; licensee Learning Gate engineering, The MDA principles ensures that these models remain independent of the target platform, allowing for more flexible and scalable transformations. • Transformation: During this phase, we obtain PSMs models by refining PIMs using a proposed UML profile, adapting them to meet the specific needs of mobile platforms. UML, as a standardized visual language for modeling software systems, plays a crucial role here. By extending UML through specialized profiles for mobile applications, we can introduce platform- specific features and constraints. • Forward-engineering: In the forward-engineering phase, we use Acceleo1 an MDA based technology to automate the generation of mobile application source code from the UML models. Acceleo supports Model-to-Text generation by utilizing a repository of mapping rules and patterns for technologies such as PHP and Android Java. This automation ensures consistency, reduces manual intervention, and accelerates the development process. The main contributions of this research include: 1) A comprehensive survey of existing work in web reverse-engineering and mobile application generation. 2) The development of the WA2MA approach, based on MDA principles, for reengineering web applications into mobile applications. This approach integrates reverse-engineering, transformation, and forward-engineering phases, leveraging our custom-developed JAAB tool to automate code generation. 3) A case study demonstrating the practical application of the proposed approach, illustrating its effectiveness in reducing manual effort and improving the efficiency of the reengineering process. The remainder of this paper is structured as follows: Section 2 reviews related work in the domain. Section 3 introduces the WA2MA framework, detailing the tools and methodologies involved. Section 4 presents a case study that showcases the application of the approach. Finally, Section 5 concludes the paper and outlines directions for future research. 2. Related Work Over the last decade, several proposals have addressed the challenge of reengineering web applications into various other technologies. Most of these solutions address only parts of the reengineering process (e.g., reverse-engineering). Below, we highlight the contributions made in this domain, particularly those leveraging model-driven techniques. The field of web reverse-engineering has seen the development of various tools and methodologies, each tailored to address the inherent complexities of web applications. In this context, Bruneliere, et al. [3]. introduced MoDisco, an open-source Eclipse project designed for model-driven reverse- engineering of legacy systems. This project supports processes such as migration, refactoring, and quality assurance, playing a crucial role in transforming legacy systems into modern architectures [3]. Similarly, Reis and da Silva [4] proposed XIS-Reverse, a model-driven reverse-engineering approach that extracts XIS models from legacy relational database schemas and user preferences, facilitating the transformation of legacy information systems [4]. In the broader domain of Model-Driven Engineering (MDE) and Model-Driven Development (MDD), several contributions have been made towards the modeling and automatic generation of mobile applications. For instance, Benouda, et al. [5] presented an MDA approach for mobile application development that incorporates UML-based modeling and automatic code generation, aiming to accelerate the mobile application development process by generating platform-independent models [5]. Lachgar et al. expanded on this by adopting an MDA approach for designing mobile application UIs. They utilized Domain-Specific Languages (DSLs) to create Platform-Independent Models (PIMs) 1https://eclipse.dev/acceleo/overview.html 1532 Edelweiss Applied Science and Technology ISSN: 2576-8484 Vol. 9, No. 6: 1530-1544, 2025 DOI: 10.55214/25768484.v9i6.8185 © 2025 by the authors; licensee Learning Gate in a textual format, applying transformations through Xtext and Xtend 2 to generate platform-specific GUIs [6]. A slightly different approach was taken by Koji, et al. [7] who proposed a UML-based MDD method that separates the design of smartphone applications into structural and UI views. This approach enhances flexibility in application design across multiple mobile operating systems by using a Smartphone Feature Specific Model and a GUI builder independent of the operating system [8]. In the same vein, Ribeiro and Silva introduced XIS-Mobile, a DSL that defines a UML profile generating PIMs, which can be transformed into platform-specific code for multiple mobile platforms, addressing platform fragmentation [9]. Expanding the scope of cross-platform GUI generation, Channonthawat and Limpiyakorn [10] presented a model-driven approach that generates Android GUI code from Windows navigation diagrams. This approach converts input diagrams into XML for UI layouts and Java for UI actions, demonstrating the flexibility of MDA in transforming one platform’s models into another’s code [10]. Vaupel et al. proposed an MDD approach for modeling mobile applications, supported by an Eclipse- based tool environment that included data, behavior, and UI models, alongside code generators for Android and iOS [11]. Further advancing the MDD approach, Rieger and Kuchen developed the MAML framework, a graphical DSL for modeling business apps. MAML models are translated into md2 models, which are subsequently transformed into platform-specific code for Android (Java) and iOS (Swift), facilitating seamless model-to-code generation [12]. Similarly, Rehman et al. made significant contributions to cross-platform GUI modeling through MDSE, utilizing UML profiles to generate platform-specific code using Xamarin for both Android and iOS platforms [13]. Few approaches offer a comprehensive solution that covers the entire reengineering process. Bouougada, et al. [14] introduced a model-driven methodology for transforming web applications into linked data, focusing on enhancing the interconnectivity and semantic structure of web content [14]. In contrast, Mehra et al. developed KIRKE, a system that does not directly generate mobile application code but instead creates a wrapper that enables web application functionalities to be accessed as web services within mobile applications [15]. Moreover, Fernandes et al. explore how Progressive web Applications (PWAs) embody the principles of Pervasive Information Systems (PIS), offering flexible, adaptable applications that function seamlessly across various operating systems and devices [16]. Additionally, in the area of cybersecurity, Bisht proposed a solution aimed at reengineering the security of web applications in cloud environments, employing machine learning algorithms to improve security measures [17]. 3. Proposed Approach The Model-Driven Architecture (MDA) paradigm, introduced by the Object Management Group (OMG), provides the theoretical foundation for the proposed approach. MDA emphasizes the use of models as primary artifacts throughout the software development lifecycle, advocating for the separation of system functionality from underlying technological platforms [18]. By abstracting system functionalities into Platform-Independent Models (PIMs), MDA promotes flexibility and facilitates the reuse of core logic across diverse technological environments. These PIMs are subsequently transformed into Platform-Specific Models (PSMs) that incorporate the necessary details for deployment on targeted platforms. As illustrated in Figure 1, the automated model transformation process, governed by predefined rules and mapping specifications, ensures consistency, reduces manual effort, and accelerates the generation of platform-specific code [18]. 1533 Edelweiss Applied Science and Technology ISSN: 2576-8484 Vol. 9, No. 6: 1530-1544, 2025 DOI: 10.55214/25768484.v9i6.8185 © 2025 by the authors; licensee Learning Gate Figure 1. MDA Process flow and transformations [18]. Grounded in the principles of Model-Driven Architecture (MDA), the WA2MA (Web Application to Mobile Application) approach provides a systematic solution for reengineering legacy web applications into mobile applications. The approach is particularly suited for business-oriented, data- driven applications. It operates by analyzing the source code of conventional web applications (e.g., HTML, PHP, JSP) and systematically generating the corresponding mobile application source code. 1534 Edelweiss Applied Science and Technology ISSN: 2576-8484 Vol. 9, No. 6: 1530-1544, 2025 DOI: 10.55214/25768484.v9i6.8185 © 2025 by the authors; licensee Learning Gate Figure 2. High-level overview of the WA2MA framework. As depicted in Figure 2, WA2MA is structured into three core phases: reverse engineering, transformation, and forward engineering. Each of these phases is described in the following subsections. 3.1. Reverse-Engineering In this phase, Platform-Independent Models (PIMs) are derived from the source code of dynamic web applications (such as HTML, PHP, and JSP). These conceptual models, expressed as UML 1535 Edelweiss Applied Science and Technology ISSN: 2576-8484 Vol. 9, No. 6: 1530-1544, 2025 DOI: 10.55214/25768484.v9i6.8185 © 2025 by the authors; licensee Learning Gate diagrams, provide an abstract representation of the system's structure and functionality, independent of any specific implementation platform. To facilitate this process, the OntoWeR (Ontology-based Web Reverse-Engineering) tool we proposed in previous work, facilitates this process by utilizing OWL-DL domain ontologies to systematically extract UML class diagrams from the web application’s source code [19]. Figure 3. Snapshot of the OntoWeR tool [19]. OntoWeR employs descriptive logic reasoning to automatically generate diagrams that capture both the static and dynamic aspects of the web application. Its implementation is based on the Protégé- OWL API, which enhances the precision and efficiency of the reverse engineering process. 3.2. Transformation The transformation phase focuses on refining the Platform-Independent Model (PIM), previously derived during reverse engineering, into a Platform-Specific Model (PSM) tailored for mobile application development. Specifically, this step enhances the UML class diagram by applying a dedicated UML profile targeting the Android platform. A UML profile serves as a mechanism for customizing and extending the standard UML metamodel to address platform-specific requirements. This specialization is achieved through three key extensibility constructs: stereotypes, tagged values, and constraints. Stereotypes introduce new semantics by extending existing UML metaclasses, tagged values enrich model elements with additional metadata, and constraints define rules to ensure model consistency and correctness according to the target platform’s specifications. 1536 Edelweiss Applied Science and Technology ISSN: 2576-8484 Vol. 9, No. 6: 1530-1544, 2025 DOI: 10.55214/25768484.v9i6.8185 © 2025 by the authors; licensee Learning Gate In this context, the applied UML profile systematically annotates the conceptual models (PIMs) with Android-specific features, facilitating their transformation into detailed PSMs that guide the subsequent code generation process. Figure 4 illustrates the stereotypes defined within our UML profile, highlighting how they bridge the gap between the abstract PIM and the Android-specific implementation model. Figure 4. Stereotypes defined by our UML Profile. Table 1 presents the key components of the proposed UML profile, detailing the UML metaclasses they extend and the corresponding code artifacts generated from each element. Table 1. Mapping between UML profile clements, Extended UML Metaclasses, and the Generated code. Stereotype Extended UML element Generated code AndroidApp EPackage Generates the AndroidManifest.xml and core application setup. Activity EClass Produces an Android Activity class, including lifecycle methods (onCreate, onStart, etc.) and mapped business logic. UIControlButton EProperty Generates a button in the Android XML layout (