Received December 24, 2021, accepted January 4, 2022, date of publication January 11, 2022, date of current version

January 14, 2022.

Digital Object Identifier 10.1109/ACCESS.2022.3141702

Transformation Architecture for Multi-Layered

WebApp Source Code Generation
RICARDO TESORIERO 1 , ALEJANDRO RUEDA1 , JOSE A. GALLUD 1, MARIA D. LOZANO 1,

AND ANIL FERNANDO2 , (Senior Member, IEEE)

1 Albacete Research Institute of Informatics, University of Castilla-La Mancha, 02071 Albacete, Spain
2 Department of Computer and Information Sciences, University of Strathclyde, Glasgow G1 1XQ, U.K.
Corresponding author: Ricardo Tesoriero ([email protected])
This work was supported in part by the Ministry of Science, Innovation and Universities, Spain, through the national project under
Reference RTI2018-099942-B-I00; in part by the Junta de Comunidades de Castilla-La Mancha (JCCM) Regional Government through the
Project TecnoCRA under Reference SBPLY/17/180501/000495; and in part by the European Regional Development Funds (FEDER).

ABSTRACT The evolution of Web technologies leads to software premature obsolescence requiring
technology-independent representations to increase the reuse rates during the development process. They
also require integration into service-oriented architectures to exchange information with different Web
systems supporting runtime interoperability. Web Applications (WebApps) run on devices with different
capabilities and limitations increasing the complexity of the development process. To address these chal-
lenges, different proposals have emerged to facilitate the development of WebApps, which is still an open
research field with many challenges to address. This paper presents a model transformation architecture
based on software standards to automatically generate full stack multi-layered WebApps covering Persis-
tence, Service, and Presentation layers. This transformation architecture also generates the set of test cases
to test WebApp business logic. The proposed transformation architecture only requires a UML platform-
independent class model as an input to generate fully functional Web applications in a three-tier architecture
including the three layers, while most proposals focus on the generation of the Presentation layer. In addition,
this architecture employs software industry standards to enable an easy integration into third-party tools and
development environments. The transformation Architecture proposed has been empirically validated on the
case study of a fully functional travel management WebApp that is generated using a UML class diagram
employing a third-party tool integrated into the same integrated development environment.

INDEX TERMS Software product lines, computer-aided software engineering, client-server systems.

I. INTRODUCTION can be implemented following a Representational State

The development of modern Web systems is becoming Transfer (ReST) API architecture [1] using JSON, or SOAP
increasingly complex. Some critical factors to consider are: specifications [2] using XML, and the WebApp User Inter-
(a) the support of runtime interoperability with third-party face (IU) should take advantage or mitigate the limitation of
systems as part of Service Oriented Architectures (SOA) device features such as device display resolution.
employing Web service APIs; (b) the premature WebApp To overcome these challenges, and contribute to the need
obsolescence leading to the re-writing of the same appli- of providing a framework to generate complete WebApps
cation functionality using different software technologies; covering the three development layers, this proposal presents
and (c) the heterogeneity of Web technologies to develop a transformation architecture based on the OMG [3] Model-
these applications. For instance, in the development of multi- driven Architecture (MDA) [4] standard to enable stake-
layered WebApps, the persistence layer can be implemented holders, analysts, designers, and developers to automatically
using a relational or a non-SQL database management sys- generate multi-layered WebApps source code using model
tem, the Web service API to access the system functionality transformations.
This approach deals with: (a) the runtime interoperability
The associate editor coordinating the review of this manuscript and deriving multi-layered WebApp source code defining the
approving it for publication was Porfirio Tramontana . Web service layer to access WebApp functionality; (b) the

This work is licensed under a Creative Commons Attribution 4.0 License. For more information, see https://creativecommons.org/licenses/by/4.0/
VOLUME 10, 2022 5223
 R. Tesoriero et al.: Transformation Architecture for Multi-Layered WebApp Source Code Generation

technology obsolescence decoupling the WebApp Platform the most relevant related works in the research area. Finally,
Independent Model (PIM) defined by a UML class model Section VII presents the conclusions and future works.
[5], [6] from the source code defining the Platform Spe-
cific Model (PSMs) generated by the model transformation II. RELATED WORKS
architecture; and (c) the heterogeneity of Web technologies This section presents existing approaches in this research
employing different model transformations according to the field, with the purpose of identifying the main shortcomings
layer target technology. As a consequence of adopting this and the research gap and provide a better understanding on
approach, from the WebApp technological perspective, the how the proposed solution addresses the shortcomings. Later,
same WebApp UML class diagram can be reused as an input in section VI we present a table with a comparison of the
of different transformation architectures to generate differ- main features of each proposal to highlight the main differ-
ent Persistence, Test, Web service and Presentation layers ences with respect to the approach presented in this paper.
deployment configurations. In WSGUI [21] and Dynvoker [22] employ Web service
For instance, the Persistence layer could employ a rela- annotations in WSDL [23] or WADL [24] to derive initial
tional database management system such as MySQL [7], versions of UIs that are manually refined to obtain fully
PostgreSQL [8], SqlServer [9], etc. using the SQL query lan- functional WebApps. The annotation concept was improved
guage to access database information; or could employ a non- in [25], where authors propose an integrated modelling
relational management systems such as the MongoDB [10] approach for the task-driven development of interactive
using the JSON format pattern to access database informa- service-oriented applications which introduces annotations
tion. The Test layer could be implemented using different Test as part of the Web service description covering the semi-
frameworks such as PHPUnit [11] or Mocha [12]. automatic generation of task models and UIs following the
The Web service layer providing access to the Persistence OMG MDA standard. However, this approach does not cover
layer from the Presentation layer and third-party applica- the generation of WebApp persistence or business logic lay-
tions in SOA environments could employ a ReST architec- ers, or any tool support.
ture [1] or a SOAP specification [2] implementation. And The importance of using models to improve WebApp
the Presentation layer representing the WebApp UI could development process in analyzed in [26] where authors
employ a server-side rendering approach using JavaServer present the preliminary study results of a prototype archi-
Pages (JSP) [13], PHP [14] or JavaServer Faces (JSF) [15]; tecture created with the purpose of using a domain-driven
or a client-side rendering approach using AngularJS [16] approach to shorten the development of software projects.
or Vue.js [17]. Even using the same rendering strategy, The modeling of conceptual, navigational, and user interface
different implementation alternatives could be used; for features of WebApps can be derived from UML profiles as
instance, to render client-side Web pages the Material [18] exposed in [27]. The use of UML Profiles to derive WebApps
or Polymer [19] UI frameworks can be used. following a model-driven development approach is employed
The consequence from the software development perspec- in [28], where authors propose a UML profile for modeling
tive is the easy integration with third party tools following WebApps at the Platform Specific Model (PSM) level to
the OMG MDA standards such as the Eclipse Integrated derive Servlets, JSP pages, and Java source code templates.
Development Environment (IDE) [20] which provides devel- The proposal presented in [29] defines a component-centric
opers with a set of software technologies supporting model UML profile for modeling WebApps that use ASP, JSP, PHP,
definition, and both, model-to-model (M2M) and model-to- Servlets, and JavaBeans technologies. Other proposals, such
text (M2T) transformation definition and execution. as [30], employ UML Profiles for Web 2.0 mashups using
To fulfil these requirements, this article presents a set of map and Web feed services; and [31] employ them for the
Eclipse IDE plugins enabling analysts, designers, and devel- generation of Google App Engine applications. However,
opers to generate multi-layered Web systems source code none of these proposals generate the persistence layer nor
(i.e. Presentation, Web service, Test, and Persistence layers) provide supporting tools following OMG MDA standards.
from UML class models employing a Model-driven Devel- The proposal presented in [32] presents a UML profile for
opment (MDD) approach using a transformation architecture AngularJS to build models of AngularJS WebApps, and a
following OMG MDA standards. set of transformations that transform the model into a code
The rest of the paper is structured in the following sec- template following OMG MDA standards. However, this
tions. Section II presents existing approaches in this research approach does not cover the generation of WebApp persis-
field and highlights the research gaps that our proposal aims tence layer; instead it generates mock-ups. The generation of
to address. Section III describes the process to generate WebAPIs to provide runtime interoperability is also another
WebApps using the proposed transformation architecture. missing feature of this approach.
The set of M2M and M2T transformation rules are explained Other approaches employ different types of models, such
in Section IV. The validation of the proposal as a result of as the authors of [33] that fuse Workflow, Web 2.0, SOA
applying these transformations in the case study of a Travel and WS-BPEL to create a distributed computing environment
Management WebApp is presented in Section V. Section VI (ACtive E-commerce Framework called ACEF) to create an
presents a discussion where this proposal is compared to inter-operable infrastructure that leverage the migration code

5224 VOLUME 10, 2022

R. Tesoriero et al.: Transformation Architecture for Multi-Layered WebApp Source Code Generation

to support multi-platform web service mobile applications. The lack of design-time interoperability is mainly due to
However, it lacks model interoperability, or tool support the failure to follow OMG standards to enable third-party tool
because it does not follow any standard to provide software integration and application communication. For example, the
development integration. proposal presented in this article uses Eclipse Papyrus IDE to
An interesting proposal where authors employ a cloud generate UML class models that are used by model transfor-
platform spreadsheet to create WebApps is [34]. However, mations to generate the application source code.
it generates monolithic applications limiting the WebApp On the other hand, the lack of interoperability at run-time
technology customization versatility (i.e. persistence, web is due to the absence of a Web service layer to access the
service, and presentation technologies). information stored in the application database through a stan-
The authors of [35] define an MDA to generate UIs for the dard external interface (e.g. ReST using JSON) limiting the
Android platform based on a UML class diagram. In [36], ability to interact with other applications in a service oriented
authors present a proposal for high-quality code generation architecture (SOA) scenario. A direct consequence of this
for low-cost mobile phones. A proposal that envisages the lack of interoperability is the inability to deploy ’responsive’
creation of Rich Internet Applications (RIAs) that are visually Web applications with rendering in the Web client.
appealing and ‘‘responsive’’ is presented in [37]. From the One of the advantages of the solution proposed in compari-
point of view of the MDD process, authors of [38] present a son with using DSLs or dedicated UML profiles is that we use
MDA-based development process to generate the source code the well-known OMG standard UML class diagrams as a DSL
of applications for the Android platform. for the proposed transformation architecture input parameter,
An interesting DSL proposal for the development of Web lowering the learning curve of developers preventing them
applications that defines a Computation Independent Model from learning a new DSL to model the system to be generated.
(CIM), a Platform Independent Model (PIM), and a Platform However, our approach lacks the semantic expressiveness that
Specific Model (PSM) is presented in the [39]. However, this might be provided by DSLs or dedicated UML profiles which
proposal is a work in progress and it currently presents no would provide a higher level of customisation of the gener-
evidence of generating the source code for multi-layer Web ated code (e.g. customized labels, input constraints, etc.).
applications. To sum up, the main limitations found in existing proposals
A proposal based on the definition of a set of transfor- are that some of them does not cover the three layers, others
mations and DSLs that generate the source code of Web does not comply with international standards, and others lack
applications for language learning using a MDA approach is of multi-layer integration. Other of the main limitations of
presented in [40] and [41]. existing proposals compared to the one presented in this
Some proposals employ automatic source code generation article is the lack of interoperability at both design-time and
to develop advanced UI configurations, such as distributable run-time. The proposal we present addresses these limitations
user interfaces [42], is presented in [43]. An example of in an integrated way, generating the three layers (presentation,
using MDD to generate this type of UIs in the education web service and persistence, and an additional test case layer)
domain is presented in [44]. However, these proposals are as we show in the next sections.
limited to the generation of the presentation layer source
code only. They do not generate any source code for the data III. OVERVIEW OF THE TRANSFORMATION
access or Web services layers. Unlike this proposal, the lack ARCHITECTURE
of a comprehensive solution does not enable the automatic The development process of the transformation architecture
generation of the association between layers. defines a set of M2M and M2T transformations to generate
A proposal that uses MDA to generate source code using the source code for each layer of the WebApp to be developed
a Model-View View-Model (MVVM) architecture for Win- (i.e. Presentation, Web services, and Persistence layers as
dows Phone application development is presented in [45]. well as a set of Test cases to check Persistence layer).
Another proposal that addresses a similar problem to the While the M2T transformations have been implemented
one proposed in this article is presented in [46]. This proposal in ACCELEO [49], the M2M transformations have been
presents a transformation model to generate a PSM from a developed in ATL [50], [51].
PIM based on a UML class diagram. It generates a single Figure 1 depicts a simplified overview of the model trans-
XML file containing the application specification for the PHP formation architecture proposed to develop multi-layered
CodeIgniter framework [47]. WebApps using a single UML class model as the transfor-
A proposal that combines class and sequence UML dia- mation input to generate Persistence, Web service, Presenta-
grams for an application to build MVC Web applications is tion, and Test case source code. This development process is
presented in [48]. based on five model transformations which are depicted in
While these proposals generate source code for the data the diagram using blue rectangles. Note that the generation
access and presentation layers, they do not generate Web of the WebApp source code requires the generation of an
service layer source code. The main disadvantage of existing intermediate model in TagML to generate the system UI.
proposals compared to the one presented in this article is the While four of these transformations are M2T transforma-
lack of interoperability at both design-time and run-time. tions that generate the WebApp source code for different

VOLUME 10, 2022 5225

 R. Tesoriero et al.: Transformation Architecture for Multi-Layered WebApp Source Code Generation

FIGURE 1. A simplified overview of the model transformation architecture to develop

multi-layered WebApps.

layers, the M2M transformation is defined to generate the persistence framework [57] to generate the MySQL database
presentation model in TagML [52]. Besides, three of the four schema and the PHP classes required to manipulate this
M2T transformations and the M2M transformation employ information in an XML file (i.e., schema.xml).
the UML class PIM of the WebApp to be developed as input The test cases code employs the PHPUnit framework [11],
parameter. This UML class model is generated using the which is responsible for testing the create, read, delete, and
Eclipse Papyrus [53] plugin for the Eclipse IDE which proves update (CRUD) records functions for the database, as well as
how this proposal can be easily integrated with third-party the management of the associations between objects imple-
tools. mented by the PHP classes generated by the first transfor-
Therefore, this model can also be created or manipu- mation that employs the Propel framework to manage table
lated using a third-party tool with the following OMG MDA relationships. All test cases are generated in a single PHP
standards: UML [54], XML Model Interchange (XMI) for- script file containing a test case generated for each PHP class.
mat [55], and Meta-Object Facility (MOF) [56]. Although
strictly speaking the remaining M2T transformation does B. WEB SERVICE LAYER
not use the UML class model as an input model directly, The remaining M2T transformation that directly takes the
it indirectly uses it because it is a model generated by the UML class model as an input parameter generates the Web
M2M transformation that takes UML class model as an input service layer code to access the system database through the
parameter. persistence layer. The generated Web services follow a Rep-
From a technological perspective, while the generated resentational State Transfer (ReST) [1] service architecture
WebApp employs MySQL as the relational database manager implemented in PHP that uses the CRUD functions of the
for the system and PHP [14] as scripting language on the persistence layer.
server side of the application, HTML and JavaScript are used The result of this transformation is a PHP file for each class
on the client side. In addition, the generated WebApps use that relates the HTTP [58] request types defined in the ReST
XML to render the configuration files. API to the set of operations for each class in the persistence
layer. The set of generated classes, in addition to implement
A. PERSISTENCE LAYER CRUD functions, implement the skeleton of the operations
The persistence layer code is generated by two M2T trans- defined in the UML class model, as well as all the functions
formations that take a UML class model as an input. While responsible for implementing associations between classes;
the first transformation generates the code responsible for for example, adding or removing an item from a multi-valued
manipulating the information contained in the database, the property, and assigning an instance of a class to a property and
second transformation generates the test cases code to check reflecting it in the database through the persistence layer.
the code generated by the first transformation. In order to relate class operations to the persistence layer
The generated code that manipulates the database infor- function, the script.php file defines a set of high-level
mation employs the Propel object to relational database functions called from the generated ReST API methods.
5226 VOLUME 10, 2022
R. Tesoriero et al.: Transformation Architecture for Multi-Layered WebApp Source Code Generation

FIGURE 2. Meta navigation of the Web system UI including the CRUD management of class instances, one-to-one,
one-to-many and many-to-many relationships.

Therefore, this file functions play the role of Mediator [59] list of available instances that can be associated, and the list
between HTTP requests and persistence layer functions. of those instances that are already associated. The implemen-
tation of this Web component relies on the functionality of
C. PRESENTATION LAYER the data-binding feature provided by the Polymer framework
The M2M transformation that generates the presentation to manage table relationships in relational databases.
layer code (i.e., WebApp UI) renders the data accessed form The last UI generated Web component displays a Web
the Web services layer generated by the M2T transforma- form to add new instances to the database. This component
tion mentioned in the previous section. The result of this is accessed when users click on ‘‘Add’’ button in the Web
transformation generates a TagML model that is passed as component that displays the list of instances.
input parameter to the M2T transformation generating the An overview of the navigation pattern through all Web
presentation layer source code that defines the Implementa- components of the system is depicted on the meta-navigation
tion Specific Model (ISM) of the system (i.e., a PSM that is diagram in Figure 2.
specific for a particular representation). Finally, the information required by Web components
The generated code uses the version 2.0 of the Polymer is accessed through Web service layers. The connection
framework [19] to render the application UI. This framework between the Web services and requests from the UI is carried
implements a Web component-oriented language in XML to out automatically, there is no need to modify the generated
render the client UI. source code (except for customization purposes).
The application UI defines a Web component as the
Web system main menu (or home page) where users access D. DEPLOYMENT
instances of any class in the UML model. In addition, for each Due to the complexity of the development process, transfor-
class in the UML model, a Web component is generated to mations automatically generate a set of scripts to relate and
display the list of instances stored in the database. Each item configure all layers of generated Web applications. These
in the list displays the primary key for each instance in order configuration scripts are generated for the Bower package
to provide a standard identification (i.e., the name property manager [60] which is used to deploy the generated Web
value of the class instance it represents). system.
Users access a Web component to view, or modify, class
instance attributes containing primitive type values stored IV. TRANSFORMATION DEFINITIONS
into the database. This section introduces the method based on the architecture
The UI to manipulate one-to-many associations presents presented in Section III to generate WebApp source code.
the list of class instances owned by association owner. Thus,
users access these instances by clicking on the item in the list A. PERSISTENCE LAYER TRANSFORMATION RULES
that represents it. The Persistence M2T transformation defines a set of trans-
The manipulation of many-to-many associations requires formation rules to transform UML class model elements
the generation of a different Web components where cross- (i.e., classes, properties, and associations) into relational
instance associations are set through two lists showing the database schema elements (i.e. tables, attributes, and

VOLUME 10, 2022 5227

 R. Tesoriero et al.: Transformation Architecture for Multi-Layered WebApp Source Code Generation

relationships). The following subsections describe how dif-

ferent types of elements are transformed.

1) UML CLASS TO DATABASE TABLES

The following code in ACCELEO M2T transformation
language shows a fragment of the transformation rule
that transforms UML classes into database tables in the
XML file used by Propel to generate the database schema
(i.e., schema.xml). LISTING 3. Transformation rule generating table foreign keys
(one-to-one).

relationships in UML class models into table foreign keys.

The approach to solve this pattern is analogous to the
one employed in one-to-one relationships where the table
LISTING 1. Transformation rule generating tables. attribute defining the relationship is derived from source and
target class names if no association name is defined.
This rule assigns the class name to the name and
phpName attributes to set the MySQL table name and the
PHP class name that cope with table operations. It also sets
the abstract attribute to true if the UML class is defined
as abstract.

2) CLASS PROPERTY TO TABLE ATTRIBUTE

The following code in ACCELEO shows a fragment of the
transformation rule that turns properties in UML classes
into table attributes in the XML script used by Propel to
generate the database schema file. It derives the column
tag size attribute from UML class property name. It also
derives the column type from class property type using
the e.generateTipo() rule which turns UML primi-
tive types into MySQL types (e.g., String to VARCHAR).
Finally, it also assigns the UML class property upper cardi-
nality value to the column tag size attribute.
LISTING 4. Transformation rule generating table foreign keys
(one-to-many).

5) MANY TO MANY ASSOCIATIONS

The following ACCELEO code shows a fragment of the
transformation rule that transforms many-to-many relation-
ships in UML class models into tables. In this case, the
LISTING 2. Transformation rule generating table columns. generated table links both tables; therefore, there is no need
to add extra information on the generated tables representing
3) ONE-TO-ONE ASSOCIATIONS classes.
The following ACCELEO code shows a fragment of the
transformation rule that transforms mandatory one-to-one B. TEST CASES LAYER RULES
associations in UML class models into table foreign keys. The test case layer rules generate the source code for case
Note that the table that represents the class owning the rela- tests that check the code generated by Persistence layer rules.
tionship defines a column which name is the name assigned The goal of test cases is the verification of the insert,
to the UML association in the UML class model. The name of read, update and delete database operations as well as
class not owning the association with the prefix ‘‘pk’’ is used the verification of association management among classes
as column name if no name is assigned to the association. (i.e. one-to-one, one-to-many, and many-to-many).
These transformation rules in ACCELEO generate a test
4) ONE-TO-MANY ASSOCIATIONS case file in PHP for each of class defined in the UML model.
The following ACCELEO code shows a fragment of Because the process of generating test cases for primitive
the transformation rule that transforms one-to-many attributes is trivial, as an illustrative example, the following

5228 VOLUME 10, 2022

R. Tesoriero et al.: Transformation Architecture for Multi-Layered WebApp Source Code Generation

C. WEB SERVICE LAYER RULES

This section focuses on the M2T transformation rules in
ACCELEO that generate the PHP Web service layer. This
layer automatically connects the persistence layer code to
the presentation layer code without the intervention of the
application developers unless customization is required.
The following sections describe how the PHP classes
implementing the system business logic are linked to the
persistence layer implemented via Propel framework as well
as how these classes are connected to the Web service layer
implementing ReST API.

1) BINDING BUSINESS LOGIC TO CRUD

The following code in ACCELEO shows a fragment of the
transformation rule code that generates PHP classes that
implement CRUD functions to access database information
through the Persistence layer.

LISTING 7. Business logic to CRUD Web service M2T transformation rule.

The code generation is quite directly due to ReST architec-

ture definition. This transformation rule generates a PHP file
for each PHP class in the UML class model where the name
of the generated PHP class corresponds to the class name in
the UML model.
LISTING 5. Transformation rule generating tables and foreign keys During the transformation process, each property defined
(many). in a class is transformed into a function parameter, including
those defined in class hierarchies and one-to-one relation-
code shows a fragment of the transformation rule that gen- ships. In one-to-one relationships, the name of each class
erates the unit test to verify the mappings of class properties property is prefixed with the name of the class it represents
resulting from UML class associations. (if no name was assigned to the association). The one-to-
many and many-to-many relationships are defined following
an analogous process.

2) BINDING BUSINESS LOGIC TO ReST API

The set of functions generated in the previous section are
exposed as part of a SOA through a ReST API that employs
LISTING 6. Test case M2T transformation rule code generating test cases. different HTTP request methods (i.e., GET, POST, DELETE,
and PUT) to read, insert, delete, and update database informa-
This transformation rule generates a function which name tion using the persistence layer.
results from adding a prefix (i.e. add, remove,etc.) with the The matching among the different types of HTTP requests
operation being tested, and postfix with the cardinality of and corresponding functions is not generated through model
the association to test. The way to generate these tests for transformations. Instead, we employ parsing techniques
the different types of relationships follows the same pattern. using both, request bodies and query strings from $_POST

VOLUME 10, 2022 5229

 R. Tesoriero et al.: Transformation Architecture for Multi-Layered WebApp Source Code Generation

and $_GET global variables. This mapping defined in the

script.php file is unique and invariant for all requests.

D. PRESENTATION LAYER RULES

The M2M transformation defined in ATL that generates the
Presentation layer takes as input parameter the UML class
model of the WebApp with the aim of generating a model
in TagML [52] containing the representation of the XML
documents that represent Polymer Web components.
The TagML DSL enables developers to capture the struc-
LISTING 8. Lazy rule generating TagML fields in TagML from UML
ture of tag-based documents in order to generate their code properties.
automatically, improving software generation re-usability
and maintainability. The abstract syntax of the TagML DSL instance associations, and insert or delete database records.
is summarized by the metamodel in Essential Model Object This functionality is achieved applying the navigation trans-
Facility (EMOF) [56] depicted in Figure 3. formation rule presented in the following excerpt of code
where the FormElementItemView rule is called for each
class to generate the set of buttons to navigate among class
associations.

FIGURE 3. The metamodel in essential model object facility (EMOF) of

the abstract syntax of the TagML domain specific language.

This metamodel captures tag names in the name attribute

of Tag metaclass instances. The list of attributes of document
tags are captured in the attributes Tag property, and
nested tags or plain text are captured in the contains Tag
tag property. Main advantage of employing this approach is
decoupling tag based document semantic from syntax which
enables developers to focus on the document structure instead
of how to generate source code obtaining safer code [52].

1) UML CLASSES TO WEB FORMS

LISTING 9. Lazy rules that generating UI main navigation menu.
This section focuses on how UML classes are transformed
into Web forms. The following code is a fragment of the trans-
formation rule that generates Web forms derived from a UML 3) MANAGEMENT OF UML CLASS ASSOCIATIONS
class model where the form tag is generated containing the The UML class association management is based on
result of applying the FormElementItem lazy rule that providing users with the ability to associate and dis-
generates the set of fields based on class properties. associate class instances. The following code excerpt
is part of the VistaElement transformation rule
2) UML CLASSES TO WEB NAVIGATION which shows how associations are detected and how the
For each class in the UML class model an option menu is BlockElementSelect transformation rule generates the
generated. This menu enables users to view the list of class panel within the UI responsible for associating and disasso-
instances stored into the database, navigate through the class ciating class instances.

5230 VOLUME 10, 2022

R. Tesoriero et al.: Transformation Architecture for Multi-Layered WebApp Source Code Generation

might be defined with any CASE tool following OMG MDA

standards. In our proposal we use Papyrus Eclipse IDE dis-
tribution for the creation of the UML Class model, depicted
in Figure 4, which is the input parameter of the model trans-
formation architecture.

FIGURE 4. The UML class diagram corresponding to the travel

management case study.

LISTING 10. Lazy rules generating UI association management UIs.

2) PERSISTENCE M2T TRANSFORMATION

V. CASE STUDY: APPLICATION OF THE The result of the Persistence M2T transformation execution
TRANSFORMATION ARCHITECTURE taking the UML class model as input parameter generates
This section presents The Travel Management WebApp case two files defining the database schema file and the object
study generated with the proposed model transformation to relational database mapping file which are employed by
architecture where users are capable of organizing/managing Propel framework scripts to define the database structure and
tour trips. The goal of the system is the management of groups the set of PHP class files that implement the application
of users who travel to a common destination using a travel business logic and data access. Consequently, this transfor-
agency. mation generates the Persistence layer source code which is
We firstly present the generation of the WebApp described distributed between the Database server (database schema
in Section III and IV employing the proposed transformation definition) and the Web Service Server (PHP classes to access
architecture in the first subsection and then the execution of database information).
a concrete task in the second subsection. The persistence layer employs the Propel framework to
The development process depicted in Figure 1 is defined manage relational database persistence in MySQL. Propel
in terms of the execution of five model transformations defines relational database schema in the schema.xml file
(i.e. Persistence M2T, Test Case M2T, Web Service M2T, which is generated by the Persistence M2T transformation.
Presentation M2M, and Presentation M2T) resulting in the The following excerpt of the schema.xml file code
generation of the source code of WebApps distributed in three shows the result of applying the transformation rule that
different server nodes (i.e. Presentation, Web Service, and derives database table schemes from UML classes (see
Database servers). Section IV-A1 for details). As result, this transformation rule
assigns User to the name and phpName attributes of the
A. THE DEVELOPMENT PROCESS table tag. In addition, as User class is not abstract, it does
The following paragraphs describe the development process not set the abstract attribute to true.
followed to generate The Travel Management WebApp using
the proposed model transformation architecture. As depicted
in Figure 1, the domain model definition is the starting point LISTING 11. Result UML class to table rule to the user class.
of the development process, and the order of the transfor-
mation execution is independent of the result, except for the The result of generating table attribute definitions in
Presentation M2M and M2T transformations that should be Propel schema.xml file applying the rule described in
performed sequentially. Section IV-A2 to the email attribute is presented in the
following XML excerpt of code where the name, type,
1) DOMAIN MODEL DEFINITION and size attributes of the column tag are set to email,
The development process starts with the definition of the VARCHAR, and 100 according to the email UML class
WebApp UML class diagram depicted in Figure 4, which property definition of the User class.

VOLUME 10, 2022 5231

 R. Tesoriero et al.: Transformation Architecture for Multi-Layered WebApp Source Code Generation

3) TEST CASES M2T TRANSFORMATION

LISTING 12. Result of class property rule to user email property.
The execution of the Test Case M2T transformation generates
the set of test cases that check the database access functional-
The next excerpt of the schema.xml file shows the result ity through the PHP classes generated during the Persistence
of the transformation rule described in Section IV-A3 to M2T transformation execution. As this code is intended to be
the association between User y Profile which generates used during the application development, it is not located at
fkProfile table foreign key in User table linking User to any production server node. However, it requires the classes
Profile using idProfile primary key. Note that the generated by the Persistence M2T transformation to access
table attribute is defined as mandatory because the association database information.
defines a cardinality greater than 1. As mentioned in Section IV-B, the result of generating
test cases for primitive type attributes is trivial; therefore,
we focus the explanation on the generation of test cases for
UML associations. The following fragment of PHP code for
the PHPUnit framework is the result of applying the Test
cases M2T transformation rule to the association between the
Trip and Agency classes.
LISTING 13. Result of one-to-one rule to user-profile association.

The following fragment of code shows the result of apply-

ing the one-to-many Persistence M2T transformation rule LISTING 16. Result of test cases rule trip-agency association.
described in Section IV-A4 to the UML association between
Trip and Message classes where the fkTrip foreign This transformation rule generates the addTripMany
key is generated in Message table to link Message class function to check the addTrip function of Agency.
instances to a Trip class instance using idTrip primary
key. The approach to solve this pattern is analogous to the 4) WEB SERVICE M2T TRANSFORMATION
pattern used in one-to-one relationships. The result of executing the Web Service M2T transformation
taking also the UML class model as input parameter generates
the script.php file which is in charge of processing ReST
API requests (e.g. POST/api/trip) using PHP classes
generated with the Persistence M2T transformation to imple-
ment WebApp business logic. This transformation generated
the source code for the Web Service Layer which is located
LISTING 14. Result of one-to-many rule to trip-message association. in the Web Service server node.
One of the goals of the Web Service layer of the WebApp
The result of applying the many-to-many associa- is the binding of the business logic to the CRUD operations
tion Persistence M2T transformation rule described in on the database as exposed in Section IV-C1.
Section IV-A5 to the association between Trip and Group The following excerpt of code shows a fragment of the
UML classes is presented in the following excerpt of XML User PHP class generated from the UML class model.
code where the Group_Trip table is created to relate Trip It shows how the name of the User UML class model
and Group tables using idTrip and idGroup attributes is mapped to the name of the PHP class which extends
to link idTrip and idGroup primary keys of Trip and the UserBase PHP class that defines the set of functions
Group tables respectively. related to the persistence layer. In addition, properties, such
as $idUser and those related to $one-to-one associa-
tions, are mapped to function parameters; for instance, the
Profile UML class defines $gustosProfile attribute.

LISTING 17. Result of web service rule one-to-one user-profile

association.

The other goal of the Web service layer is binding

WebApp business logic to the ReST API. As mentioned
in Section IV-C2 no transformation is required because the
LISTING 15. Result of many-to-many rule to trip-group. binding is defined via pattern matching.

5232 VOLUME 10, 2022

R. Tesoriero et al.: Transformation Architecture for Multi-Layered WebApp Source Code Generation

5) PRESENTATION M2M AND M2T TRANSFORMATIONS

Finally, the execution of the Presentation layer source code
requires the execution of the Presentation M2M and Presen-
tation M2T transformations. While the Presentation M2M
transformation execution generates the model of the XHTML
documents containing CSS and JavaScript references; the
Presentation M2T transformation execution generates the
source code of the Presentation layer which is located in FIGURE 7. The UI panel from the trip view.
the Presentation server node.
The application of the Presentation M2M and M2T trans-
formation rules to the class UML model generates the
WebApp presentation layer for the Polymer framework
exposed in Section IV-D.
The result of applying the class to Web form transformation
rules described in Section IV-D1 taking the User UML class
FIGURE 8. The UI panel from the agency view.
as input parameter is depicted in Figure 5.

capable of publishing a trip showing the relationship between

Presentation, Web Service, and Database servers.
Under this scenario, users access The Travel Management
WebApp home page in the Presentation Server. To perform
the ‘‘Add Trip’’ task, they access the list of trips by clicking
on the Trip menu option on the left. As result of this action,
FIGURE 5. The polymer web component generated using the users access the list of Trips which is retrieved from the Web
FormElement transformation rule applied to the User UML class. Service server performing a GET request on the Web Ser-
vice server which processes the request using the Persistence
The WebApp navigation is generated using the transfor- layer PHP code to access database information using SQL
mation rules defined in Section IV-D2. The result of apply- SELECT.
ing these rules to the User UML class model is shown in To add a new trip, users click on the NEW TRIP button to
Figure 6. access the Web form to introduce the trip information. Once
the Web form information is set, users click on the SEND
button to POST the Web form information in JSON format as
part of the request body to the Web Service server. The Web
Service server processes the request using PHP Persistence
layer PHP code to perform an SQL INSERT command on
the database. As a result of this action, users are redirected to
the list of trips page retrieving the list of trips including the
FIGURE 6. The polymer web component generated using the new trip.
VistaElement transformation rule applied to the User UML class.

C. QUALITATIVE EVALUATION
The transformation definition that generates the UI capable This section exposes a qualitative evaluation of the results of
of associating and disassociating class instances is explained applying the proposed transformation architecture develop-
in Section IV-D3. The result of applying these transformation ment process to the case study.
rules is depicted in Figure 7 and Figure 8, which show the UIs Table 1 presents the results of running the process proposed
generated for the many-to-many relationship between Trip in Section III applying the transformation rules to the case
and Agency UML classes. While Figure 7 depicts the panel study which UML class diagram is depicted in Figure 4.
to manage instance associations from the Trip UI, Figure 8 From the efficiency point of view, once the model trans-
depicts the panel to manage instance associations from the formations are implemented, the applications development
Agency UI. time is limited to UML class diagram design because it is
incomparable to the time required by the code generation
B. THE ‘‘ADD TRIP’’ TASK PERFORMANCE process.
This section explains how the ‘‘Add Trip’’ task is performed Assuming model transformations are fully implemented
through the multi-layer WebApp generated by the model and tested, the effectiveness of the generated Web applica-
transformation architecture. Figure 9 shows an overview of tion is higher compared to a traditional development process
the execution sequence for ‘‘Add trip’’ task where users are because it is less prone to errors. The main reason behind

VOLUME 10, 2022 5233

 R. Tesoriero et al.: Transformation Architecture for Multi-Layered WebApp Source Code Generation

WebApps source code at three different layers (persistence,

web service, and presentation) and additionally, test cases;
unlike most proposals which address one or two layers
(e.g. persistence, web service and presentation, only presen-
tation, etc.). In addition, our proposal provides a set of tools
(i.e. Eclipse plugins) capable of managing model transforma-
tions and multi-layer integration which is also inter-operable
with third party tools following OMG MDA standards.
The MDD has been extensively explored in the software
engineering research area. The authors of [61] present a sys-
tematic literature review (SLR) between 2009 and 2019 ana-
lyzing MDD proposals that generate source code.
As a result of this SLR, they state that UML is the most
commonly used modeling language to represent software
models. It validates the widely use of UML class models to
model the application to be developed unlike other proposals
that use other languages (e.g. WebML [62] is used in [63]
to create Web application models). The advantages of using
a popular and well-known modeling language are the ease of
learning this language and the reuse tools and design patterns,
which significantly reduce the applications design time [64].
The SLR also highlights that the most used abstraction layers
in MDA that generate source code are the PIM and PSM lay-
ers, which are the ones that are implemented in this proposal.
The analysis of existing proposals performed in section II
shows the main shortcomings identified. Table 2 shows a
comparison of the proposals analysed regarding the lan-
FIGURE 9. The overview of the ‘‘add trip’’ task performed on the guages used, whether they comply with international stan-
multi-layer web application generated with the proposed model
transformation architecture.
dards or not, and the layers they generate.
At the end of the table, we show the features corresponding
TABLE 1. The travel management WebApp case study software artifacts
to the proposed solution. As we can see, most proposals only
generation. generate one or two layers whereas our approach covers the
three layers. In addition, it is based on OMG MDA standard,
as many others, and uses UML as main language. Some of
the proposals are limited to the generation of the presentation
layer source code only. They do not generate any source
code for the data access or Web services layers. Unlike this
proposal, they lack of a comprehensive integrated solution
does not enable the automatic generation of the association
between layers.
In summary, the main shortcomings found in existing pro-
posals are that none of them addresses the generation of
this statement is the lack of developer interventions in the the three layers, others does not comply with international
process because applications developed using this proposal, standards, and others lack of multi-layer integration. Other of
are automatically generated. Moreover, transformation cor- the main limitations of existing proposals compared to the
rections are automatically propagated to both, past and future one presented in this article is the lack of interoperability
developments due to automatic application regeneration. at both, design-time and run-time. The proposal we present
Finally, this proposal improves the UI properties such as goes beyond the current state of the art by addressing these
consistency and homogeneity since automatic code genera- shortcomings in an integrated way, with the generation of the
tion enable UI generation in a systematic way, avoiding the three layers: presentation, web service and persistence, and
inconsistencies inherited from the traditional manual devel- an additional test case layer,following a well-defined model
opment process. transformation architecture.
Among the limitations of the proposal, we can high-
VI. DISCUSSION light the lack of a customization mechanism for the user
The novelty of our approach is the definition of a model interface labels generated, as it takes the labels from the
transformation architecture capable of generating full stack Class diagram.

5234 VOLUME 10, 2022

R. Tesoriero et al.: Transformation Architecture for Multi-Layered WebApp Source Code Generation

TABLE 2. Comparison of existing proposals.

Another limitation is that the generation of the Persistence ensuring a great interoperability at design-time as well as and
Layer currently only supports the Relational Database Man- optimal integration with third-party tools. As a demonstration
agement System (DBMS), concretely, MySQL. In addition, of the integration capability of the developed tools, they are
the generation of the Web service layer has been developed integrated into the Eclipse integrated development environ-
to support only ReST services using JSON. ment using the Eclipse Papyrus plugin to define the UML
The last limitation regards the generation of the Presenta- class model representing the application to be developed and
tion layer, which only supports Polymer and JavaScript. used as input parameter of model transformations.
Another issue that demonstrates the integration capability
VII. CONCLUSION of the proposal is the use of a M2M transformation that
This proposal defines a MDA based transformation archi- generates a TagML model, rather than a single M2T transfor-
tecture that supports the MDD framework for the automatic mation that generates text, simplifying the XML document
generation of three-layer WebApps (i.e., Persistence, Web generation process while ensuring its robustness.
services, and Presentation layers) following OMG standards. A case study presenting how the proposed model trans-
To meet this goal, a set of three M2T transformations is formation architecture is used to validate the proposal
presented in ACCELEO as well as a M2M transformation in and develop the multi-layer Travel Agency Management
ATL that guide the development process using a single UML WebApp. This case study shows how the transformation rules
class model as input parameter. generate the WebApp source code using a UML Class model
The generated applications employ a client-server architec- as a transformation input parameter. In addition, this case
ture where the server-side of the system is in PHP and client- study presents how the generated source code interact with
side in HTML and JavaScript. The resulting applications the Persistence, Web Service and Presentation layers of the
implement a persistence layer with the Propel framework as application to perform the ‘‘Add Trip’’ task.
an Object Relational Mapping (ORM) broker for the MySQL Finally, several research lines are open as future works. The
DBMS. In addition, these applications are equipped with a first of them is the development of model transformations to
Web service layer that defines an API following a ReST enable the use of different technologies associated to differ-
service architecture using JSON. This layer communicates ent application layers. For example, in the persistence layer,
with the Persistence layer so that the generated application we consider the definition of a transformation to generate the
has a high interoperability capability with third-party run- source code required to replace relational database manage-
time systems. In turn, the generated applications define a ment system by a non-relational database manager (NoSQL)
presentation layer implemented with the Polymer framework such as MongodDB.
that connects to the Web service layer to access the system We are also exploring the ability to generate a
database. SOAP-based Web services layer that employs XML, instead
From a development point of view, the set of tools pre- of JSON, to improve the system interoperability at run-time,
sented in this proposal follows the OMG MDA standards e.g. to communicate with legacy systems. Moreover, we are

VOLUME 10, 2022 5235

 R. Tesoriero et al.: Transformation Architecture for Multi-Layered WebApp Source Code Generation

considering the development of model transformations [27] S. A. Mubin and A. H. Jantan, ‘‘A UML 2.0 profile web design frame-
that use different technologies for the presentation layer work for modeling complex web application,’’ in Proc. 6th Int. Conf. Inf.
Technol. Multimedia, Nov. 2014, pp. 324–329.
(e.g. AngularJS). In addition, we are also exploring the [28] Y.-C. Huang, C.-P. Chu, Z.-A. Lin, and M. Matuschek, ‘‘Transformation
feasibility of generating source code for different mobile from web PSM to code,’’ in Proc. Int. Conf. Distrib. Multimedia Syst.
platforms, such as Android or iOS. (DMS), 2009, pp. 1–4.
[29] M. Kataria, R. Yadav, and A. Khunteta, ‘‘A component-centric UML based
approach for modeling the architecture of web applications,’’ Int. J. Recent
REFERENCES Res. Rev., vol. 5, pp. 22–27, Mar. 2013.
[1] R. T. Fielding, ‘‘ReST: Architectural styles and the design of network- [30] I.-C. Hsu, ‘‘Visual modeling for web 2.0 applications using model driven
based software architectures,’’ Ph.D. dissertation, Dept. Inf. Comput. Sci., architecture approach,’’ Simul. Model. Pract. Theory, vol. 31, pp. 63–76,
Univ. California, Irvine, CA, USA, 2000. Feb. 2013.
[2] D. Box, D. Ehnebuske, G. Kakivaya, A. Layman, N. Mendelsohn, [31] S. Kaewkao and T. Senivongse, ‘‘A model-driven development of web-
H. Nielsen, S. Thatte, and D. Winer. (2000). Simple Object Access based applications on Google app engine platform,’’ in Proc. 10th Nat.
Protocol (SOAP) 1.1. Accessed: Dec. 01, 2021. [Online]. Available: Conf. Comput. Inf. Technol. (NCCIT), 2014, pp. 140–145.
http://www.w3.org/TR/soap [32] W. Chansuwath and T. Senivongse, ‘‘A model-driven development of web
[3] Object Management Group (OMG). Accessed: Dec. 01, 2021. [Online]. applications using AngularJS framework,’’ in Proc. IEEE/ACIS 15th Int.
Available: http://www.omg.org Conf. Comput. Inf. Sci. (ICIS), Jun. 2016, pp. 1–6.
[4] S. J. Mellor, S. Kendall, A. Uhl, and D. Weise, MDA Distilled. Reading, [33] V. D. Pillai, ‘‘Development of a novel software architecture for active
MA, USA: Addison-Wesley, 2004. internet applications based on fusion of mobile agent, web services and
[5] J. Rumbaugh, I. Jacobson, and G. Booch, The Unified Modeling Language BPEL technologies,’’ in Proc. IEEE Int. Conf. Web Services, Jul. 2010,
Reference Manual, 2nd ed. London, U.K.: Pearson, 2004. pp. 652–653.
[6] M. Fowler, UML Distilled: A Brief Guide to the Standard Object Modeling [34] K. Shiohara and X. Chen, ‘‘A concept of extending spreadsheet cell
Language, 3rd ed. Reading, MA, USA: Addison-Wesley, 2003. functions for web application development based on a cloud platform,’’ in
[7] Oracle. MySQL. Accessed: Dec. 01, 2021. [Online]. Available: https:// Proc. IEEE Workshop Adv. Res. Technol. Ind. Appl. (WARTIA), Sep. 2014,
www.mysql.com/ pp. 1362–1365.
[8] PostgreSQL. Accessed: Dec. 01, 2021. [Online]. Available: https:// [35] A. Sabraoui, M. E. Koutbi, and I. Khriss, ‘‘GUI code generation for
www.postgresql.org/ Android applications using a MDA approach,’’ in Proc. IEEE Int. Conf.
[9] Microsoft. SQLServer. Accessed: Dec. 01, 2021. [Online]. Available: Complex Syst. (ICCS), Nov. 2012, pp. 1–6.
https://www.microsoft.com/es-es/sql-server [36] M. Lettner and M. Tschernuth, ‘‘Applied MDA for embedded devices:
[10] MongoDB. Accessed: Dec. 01, 2021. [Online]. Available: https://www. Software design and code generation for a low-cost mobile phone,’’ in
mongodb.com Proc. IEEE 34th Annu. Comput. Softw. Appl. Conf. Workshops, Jul. 2010,
[11] S. Bergmann. PHPUnit. Accessed: Dec. 01, 2021. [Online]. Available: pp. 63–68.
https://phpunit.de/ [37] S. Roubi, M. Erramdani, and S. Mbarki, ‘‘Modeling and generating
[12] OpenJS. Mocha. Accessed: Dec. 01, 2021. [Online]. Available: https:// graphical user interface for MVC rich internet application using a model
mochajs.org/ driven approach,’’ in Proc. Int. Conf. Inf. Technol. Organizations Develop.
[13] K.-M. Chung, JavaServer Pages 2.3 Specification. Santa Clara, CA, USA: (IT4OD), Mar. 2016, pp. 1–6.
Oracle. 2013. [38] J. D. Monte-Mor, E. O. Ferreira, H. F. Campos, A. M. da Cunha, and
[14] PHP. Accessed: Dec. 01, 2021. [Online]. Available: https://www.php.net/ L. A. V. Dias, ‘‘Applying MDA approach to create graphical user inter-
[15] E. Burns and M. Riem, JavaServer Faces Specification. Santa Clara, CA, faces,’’ in Proc. 8th Int. Conf. Inf. Technol., New Gener., Apr. 2011,
USA: Oracle, 2017. pp. 766–771.
[16] Google. Angular JS. Accessed Dec. 01, 2021. [Online]. Available: [39] Z. Morales, C. Magańa, J. A. Aguilar, A. Zaldívar-Colado, C. Tripp-Barba,
https://angular.io/ S. Misra, O. Garcia, and E. Zurita, ‘‘A baseline domain specific lan-
[17] E. You. Vue.js The Progressive Javascript Framework. Accessed: guage proposal for model-driven web engineering code generation,’’ in
Dec. 01, 2021. [Online]. Available: https://vuejs.org/ Proc. Comput. Sci. Appl. (ICCSA), O. Gervasi, B. Murgante, S. Misra,
[18] Google. Material. Accessed: Dec. 01, 2021. [Online]. Available: https:// A. M. A. Rocha, C. M. Torre, D. Taniar, B. O. Apduhan, E. Stankova,
material.io/ S. Wang, Eds. New York, NY, USA: Springer, 2016, pp. 50–59.
[19] TP Group. Polymer. Accessed: Dec. 01, 2021. [Online]. Available: https:// [40] G. Sebastian, R. Tesoriero, and J. A. Gallud, ‘‘Modeling language-learning
www.polymer-project.org/ applications,’’ IEEE Latin Amer. Trans., vol. 15, no. 9, pp. 1771–1776,
[20] Eclipse. Eclipse IDE. Accessed: Dec. 01, 2021. [Online]. Available: Aug. 2017.
http://www.eclipse.org [41] G. Sebastian, R. Tesoriero, and J. A. Gallud, ‘‘Automatic code generation
[21] M. Kassoff, D. Kato, and W. Mohsin, ‘‘Creating GUIs for web services,’’ for language-learning applications,’’ IEEE Latin Amer. Trans., vol. 18,
IEEE Internet Comput., vol. 7, no. 5, pp. 66–73, Sep. 2003. no. 8, pp. 1433–1440, Aug. 2020.
[22] J. Spillner, M. Feldmann, I. Braun, T. Springer, and A. Schill, ‘‘Ad-hoc [42] R. Tesoriero, ‘‘Distributing user interfaces,’’ in Proc. Workshop Dis-
usage of web services with Dynvoker,’’ in ServiceWave: Towards a trib. User Interfaces Multimodal Interact. Toulouse, France: ACM, 2014,
Service-Based Internet (Lecture Notes in Computer Science), vol. 5377, pp. 1–10.
P. Mähönen, K. Pohl, and T. Priol, Eds. Berlin, Germany: Springer, 2008, [43] R. Tesoriero and A. H. Altalhi, ‘‘Model-based development of distributable
pp. 208–219. user interfaces,’’ Universal Access Inf. Soc., vol. 18, no. 4, pp. 719–746,
[23] E. Christensen, F. Curbera, G. Meredith, and S. Weerawarana. (2001). Nov. 2019.
Web Services Description language (WSDL) 1.1, W3C, Accessed: [44] G. Sebastián Rivera, R. Tesoriero, and J. A. Gallud, ‘‘Model-based
Dec. 01, 2021. [Online]. Available: http://www.w3.org/TR/wsdl approach to develop learning exercises in language-learning applications,’’
[24] M. Hadley, ‘‘Web application description language (WADL),’’ Sun IET Softw., vol. 12, no. 3, pp. 206–214, Jun. 2018.
Microsystems, Santa Clara, CA, USA, Tech. Rep. TR-2006-153, [45] H. Benouda, M. Azizi, M. Moussaoui, and R. Esbai, ‘‘Automatic code
Apr. 2006. generation within MDA approach for cross-platform mobiles apps,’’ in
[25] M. Feldmann, G. Hubsch, T. Springer, and A. Schill, ‘‘Improving task- Proc. 1st Int. Conf. Embedded Distrib. Syst. (EDiS), Dec. 2017, pp. 1–5.
driven software development approaches for creating service-based inter- [46] O. Betari, M. Erramdani, S. Roubi, K. Arrhioui, and S. Mbarki, ‘‘Model
active applications by using annotated web services,’’ in Proc. 5th Int. Conf. transformations in the MOF meta-modeling architecture: From UML to
Next Gener. Web Services Practices, Sep. 2009, pp. 94–97. CodeIgniter PHP framework,’’ in Proc. Eur. MENA Cooperation Adv. Inf.
[26] F. P. Marzullo, J. M. D. Souza, and J. R. Blaschek, ‘‘A domain-driven devel- Commun. Technol., Á. Rocha, M. Serrhini, and C. Felgueiras, Eds. New
opment approach for enterprise applications, using MDA, SOA and web York, NY, USA: Springer, 2017, pp. 227–234.
services,’’ in Proc. 10th IEEE Conf. E-Commerce Technol., 5th IEEE Conf. [47] CodeIgniter. Accessed: Dec. 01, 2021. [Online]. Available:
Enterprise Comput., E-Commerce E-Services, Jul. 2008, pp. 432–437. https://codeigniter.com/

5236 VOLUME 10, 2022

R. Tesoriero et al.: Transformation Architecture for Multi-Layered WebApp Source Code Generation

[48] M. Rahmouni and S. Mbarki, ‘‘Model-driven generation: From models to ALEJANDRO RUEDA received the degree in com-
MVC2 web applications,’’ Int. J. Softw. Eng. Appl., vol. 8, no. 7, pp. 73–94, puter science and engineering from the University
Jul. 2014. of Castilla-La Mancha, Albacete, Spain, in 2017.
[49] Eclipse. ACCELEO Transformation Language. Accessed: Dec. 01, 2021. Currently, he is an Application Security Analyst at
[Online]. Available: https://www.eclipse.org/acceleo/ Deloitte, Madrid, Spain. His main research inter-
[50] F. Jouault, F. Allilaire, J. Bézivin, and I. Kurtev, ‘‘ATL: A model transfor- ests include the development of web applications,
mation tool,’’ Sci. Comput. Program., vol. 72, nos. 1–2, pp. 31–39, 2008. including both front-end and back-end as well
[51] Eclipse. ATLAS Transformation Language. Accessed: Dec. 01, 2021.
as the use of model-driven development of web
[Online]. Available: https://www.eclipse.org/atl/
applications.
[52] R. Tesoriero, G. Sebastian, and J. A. Gallud, ‘‘TagML—An implementa-
tion specific model to generate tag-based documents,’’ Electronics, vol. 9,
no. 7, p. 1097, Jul. 2020, doi: 10.3390/electronics9071097.
[53] Eclipse. Papyrus. Accessed: Dec. 01, 2021. [Online]. Available: https:// JOSE A. GALLUD received the M.Sc. degree in
eclipse.org/papyrus/ computer science from the University of Mur-
[54] OMG Unified Modeling Language (OMG UML), Superstructure, cia and the Ph.D. degree in computer science
Ver. 2.4.1, Object Management Group, Needham, MA, USA, Aug. 2011.
from the Polytechnic University of Valencia.
[55] XML Metadata Interchange (XMI) Specification Ver. 2.5.1, Object Man-
He is an Associate Professor at the University
agement Group, Needham, MA, USA, Jun. 2015.
[56] Meta Object Facility (MOF) Core Specification. Ver. 2.5.1, Object Man- of Castilla-La Mancha. He co-leads the Interac-
agement Group, Needham, MA, USA, Oct. 2019. tive Systems Engineering (ISE) Research Group,
[57] F. Zaninotto, W. Durand, H. Hamon, M. J. Schmidt, J. Augustin, Albacete Research Institute of Informatics. His
T. Uebernickel, C. Cinotti, R. Dupret, M. Staab, and M. Scholten. Propel. main research interests include human–computer
Accessed: Dec. 01, 2021. [Online]. Available: http://propelorm.org/ interaction, software engineering, development of
[58] R. T. Fielding, J. Gettys, J. Mogul, H. Frystyk, L. Masinter, P. Leach, interactive systems, and distributed user interfaces. He has published more
and T. Berners-Lee, ‘‘RFC2616: Hypertext transfer protocol–HTTP/1.1,’’ than 100 scientific papers in these areas, disseminated in journals, and
Tech. Rep. 2616, 1999. international conferences books and chapters. He has participated in the orga-
[59] E. Gamma, R. Helm, R. Johnson, and J. M. Vlissides. Design Patterns: nization of numerous national and international conferences in these research
Elements of Reusable Object-Oriented Software, 1st ed. Reading, MA, areas as the technical program chair, the Technical Program Member, and an
USA: Addison-Wesley, 1994. Organizing Committee Member.
[60] Bower. Accessed: Dec. 01, 2021. [Online]. Available: https://bower.io/
[61] G. Sebastián, J. A. Gallud, and R. Tesoriero, ‘‘Code generation using
model driven architecture: A systematic mapping study,’’ J. Comput. Lang., MARIA D. LOZANO received the M.Sc. and
vol. 56, Feb. 2020, Art. no. 100935. Ph.D. degrees in computer science from the Poly-
[62] S. Ceri, P. Fraternali, and A. Bongio, ‘‘Web modeling language (WebML): technic University of Valencia, Spain. She has
A modeling language for designing web sites,’’ Comput. Netw., vol. 33, been an Associate Professor at the University of
nos. 1–6, pp. 137–157, Jun. 2000. Castilla-La Mancha, since 2003. She co-leads the
[63] G. Zhuang and J. Du, ‘‘MDA-based modeling and implementation of Interactive System Engineering (ISE) Research
E-commerce web applications in WebML,’’ in Proc. 2nd Int. Workshop Group, Albacete Research Institute of Informat-
Comput. Sci. Eng., vol. 2, 2009, pp. 507–510. ics. She is an author of more than 100 papers in
[64] H. M. Fardoun, R. Tesoriero, G. Sebastian, and N. Safa, ‘‘A simplified
indexed journals and international conference. Her
MbUID process to generate web form-based UIs,’’ in Proc. 13th Int. Conf.
teaching and research interests include software
Softw. Technol. Setúbal, Portugal: SciTePress, 2018, pp. 801–808.
engineering and human–computer interaction. Her research interests include
natural user interfaces, tangible user interfaces, affective computing, and user
experience. She has served as the chair and a member for different program
committees of national and international conferences.

ANIL FERNANDO (Senior Member, IEEE)

received the B.Sc. degree (Hons.) in electron-
ics and telecommunications engineering from the
University of Moratuwa, Sri Lanka, in 1995, the
M.Sc. degree (Hons.) in telecommunications from
the Asian Institute of Technology (AIT), Thailand,
in 1997, and the Ph.D. degree in video coding
RICARDO TESORIERO received the Ph.D. from the Department of Electrical and Electronic
degree from the University of Castilla-La Man- Engineering, University of Bristol, U.K., in 2001.
cha (UCLM), Spain. He performed a postdoc- He was a Reader with the University of Surrey,
toral stay at the Universitè Catholique de Louvain U.K.; a Senior Lecturer with Brunel University London, U.K., and an Assis-
(UCL), Louvain-La-Neuve, Belgium, where he tant Professor with the AIT. He is currently a Professor of video coding
conducted research activities within the model- and communications at the University of Strathclyde, Glasgow, U.K., and a
driven development of user interfaces research Visiting Professor at the University of Surrey. He has authored over 350 inter-
field. He has published more than 70 research national publications in video coding, machine learning, communications,
articles in international conferences and journals. and signal processing. His research interests include video coding and com-
He has participated in several scientific commit- munications, machine learning and AI solutions for industrial applications,
tees of international conferences and workshops, including Distributed User quality of experience modeling, autonomous systems, and 5G/6G application
Interfaces (DUI), Interaction, ISEC, and IADIS/WWW (La Web). His main developments. He is a fellow of the Higher Education Academy, U.K., and
research interests include the model-driven development of user interfaces a member of EPSRC College, U.K.
and context-aware applications in ubiquitous computing environments.

VOLUME 10, 2022 5237