Code Generator Development to Transform IFML (Interaction Flow Modelling Language) into a React-based User Interface

Saved in:
Bibliographic Details
Title: Code Generator Development to Transform IFML (Interaction Flow Modelling Language) into a React-based User Interface
Authors: Ilma Ainur Rohma, null Ade Azurat
Source: Jurnal Ilmu Komputer dan Informasi. 17:109-120
Publisher Information: Faculty of Computer Science, Universitas Indonesia, 2024.
Publication Year: 2024
Description: Model-Driven Software Engineering (MDSE) is a software development approach that uses the Model to be the main actor of the development. MDSE can be applied to User Interface (UI) Development so that a model for the UI can be built, and then a transformation can be made to turn it into a running application. In this research, we develop UI Generator to support UI Development with the MDSE approach. This UI Generator can also support UI Development in Software Product Line Engineering (SPLE) paradigm. The UI is modeled with Interaction Flow Modeling Language (IFML) diagram. Then The IFML diagram is transformed into React-Based UI by the UI Generator. The UI Generator is developed with Acceleo on Eclipse IDE to transform IFML into React Code with the transformation rules defined in this research. The UI generator is also enriched with display settings and static page management to address user customization needs. The experimental results show that the UI Generator can generate a functional website. Besides evaluating the working product, UI Generator is evaluated qualitatively well based on six quality criteria as an SPLE supporting tool.
Document Type: Article
ISSN: 2502-9274
2088-7051
DOI: 10.21609/jiki.v17i2.1178
Accession Number: edsair.doi...........cc3d63b003f8c72e98e481e6876a2f9e
Database: OpenAIRE
Description
Abstract:Model-Driven Software Engineering (MDSE) is a software development approach that uses the Model to be the main actor of the development. MDSE can be applied to User Interface (UI) Development so that a model for the UI can be built, and then a transformation can be made to turn it into a running application. In this research, we develop UI Generator to support UI Development with the MDSE approach. This UI Generator can also support UI Development in Software Product Line Engineering (SPLE) paradigm. The UI is modeled with Interaction Flow Modeling Language (IFML) diagram. Then The IFML diagram is transformed into React-Based UI by the UI Generator. The UI Generator is developed with Acceleo on Eclipse IDE to transform IFML into React Code with the transformation rules defined in this research. The UI generator is also enriched with display settings and static page management to address user customization needs. The experimental results show that the UI Generator can generate a functional website. Besides evaluating the working product, UI Generator is evaluated qualitatively well based on six quality criteria as an SPLE supporting tool.
ISSN:25029274
20887051
DOI:10.21609/jiki.v17i2.1178