Automated Migration of EuGENia Graphical Editors to the Web Fatima Rani Pablo Diez Enrique Chavarriaga UGROUND GLOBAL, S.L UGROUND GLOBAL, S.L UGROUND GLOBAL, S.L Madrid, Spain Madrid, Spain Madrid, Spain [email protected] [email protected] [email protected] Esther Guerra Juan de Lara Universidad Autónoma de Madrid Universidad Autónoma de Madrid Madrid, Spain Madrid, Spain [email protected] [email protected] ABSTRACT 1 INTRODUCTION Domain-specific languages (DSLs) are languages tailored for partic- Model-Driven Engineering (MDE) [29] is a software paradigm that ular domains. Many frameworks and tools have been proposed to prescribes an active use of models during the construction process. develop editors for DSLs, especially for desktop IDEs, like Eclipse. Thus, models are used to describe, validate, simulate, generate code We are witnessing the advent of low-code development plat- and maintain the software, among many other activities. These forms, which are cloud-based environments supporting rapid appli- models can be built using general-purpose modelling languages, cation development by using graphical languages and forms. While such as the Unified Modelling Language (UML), but the useof this approach is very promising, the creation of new low-code plat- Domain-Specific Languages (DSLs) is also common [16]. forms may require the migration of existing desktop-based editors DSLs are languages tailored to a specific problem, containing to the web. However, this is a technically challenging task. customized concepts representing the abstractions within the do- To fill this gap, we present ROCCO, a tool that migrates Eclipse- main [10, 21, 22]. This way, the definition of (graphical) DSLs, and based graphical modelling editors to the web, to facilitate their their modelling environments is recurrent when building MDE integration with low-code platforms. The tool reads a meta-model solutions [15]. The benefit of using a DSL is that it can lead tomore annotated with EuGENia annotations, and generates a web editor effective solutions within a domain, while allowing end-users with using the DPG web framework used by the UGROUND company. In little technical background to perform programming tasks [17]. In this paper, we present the approach, including tool support and an the last years, many tools have been developed to automate the evaluation based on migrating nine editors created by third parties, construction of DSL editors [5, 8, 11–14, 19, 25, 30, 34], especially which shows the usefulness of the tool. since the popularization of extensible IDEs like Eclipse. Still, the development of DSL editors, in particular for graphical DSLs is a CCS CONCEPTS challenging task. We have recently witnessed the advent of low-code development Software and its engineering ! Domain specific languages • . platforms, which are cloud-based environments supporting the rapid development of applications by using graphical languages KEYWORDS and forms. While this approach is very promising, the creation Model-Driven Engineering, Graphical DSLs, Low-code platforms of new low-code platforms may profit from the reuse of existing MDE solutions in a cloud environment. This implies the migration ACM Reference Format: of existing desktop-based editors to the web. However, without Fatima Rani, Pablo Diez, Enrique Chavarriaga, Esther Guerra, and Juan automation, this is a technically challenging task. de Lara. 2020. Automated Migration of EuGENia Graphical Editors to the In order to fill this gap, we propose a tool to automate the migra- Web. In ACM/IEEE 23rd International Conference on Model Driven Engi- tion of Eclipse-based graphical DSL editors to the web. In particular, neering Languages and Systems (MODELS ’20 Companion), October 18–23, the tool supports editors built using EuGENia [8] and creates an 2020, Virtual Event, Canada. ACM, New York, NY, USA, 7 pages. https: editor for DPG-PsiEngine [2, 3]. This is a web-based framework //doi.org/10.1145/3417990.3420205 used within UGROUND as a basis for its ROSE low-code develop- ment platform [7]. This way, our solution enables the automated reuse of DSL editors within low-code environments, eliminating MODELS ’20 Companion, October 18–23, 2020, Virtual Event, Canada the need for re-developing such editors. We have evaluated our © 2020 Association for Computing Machinery. tool by migrating nine editors built by third parties, obtaining good ACM ISBN 978-1-4503-8135-2/20/10. $15.00 results, and demonstrating the applicability of this tool in practice. This is the author’s version of the work. It is posted here for your personal use. Not for redistribution. The definitive Version of Record was published in ACM/IEEE 23rd The rest of this paper is organized as follows. Section 2 provides International Conference on Model Driven Engineering Languages and Systems background on technologies used in our work, and introduces a run- (MODELS’20 Companion), October 18–23, 2020, Virtual Event, Canada, https:// ning example. Section 3 describes our approach to migration, and doi.org/10.1145/3417990.3420205 Section 4 tool support. Section 5 presents an evaluation. Section 6 MODELS ’20 Companion, October 18–23, 2020, Virtual Event, Canada Fatima Rani et al. compares with related work and Section 7 presents conclusions and future work. 2 BACKGROUND AND MOTIVATION In this section we introduce the different technologies involved in our approach, on the basis of a running example. 2.1 Eclipse Modeling Framework and EuGENia The Eclipse Modeling Framework (EMF) [9, 31] is a widely used (partial) implementation of the meta-object facility (MOF) standard of the OMG [23]. EMF is a meta-modelling framework integrated within Eclipse. It supports a notation (Ecore) for creating meta- models, and a code generation facility that produces Java code Figure 2: EuGENia graphical editor for Petri nets (enabling the construction of models and model transformations programmatically) and tree editors to create models interactively. EMF supports model serialization using the XML Metadata Inter- [8] (which we analyse in Section 6). We decided to support the change (XMI), an OMG standard for meta-data exchange [35]. latter technology due to its popularity, since it is extensively used by both researchers and practitioners. EuGENia [18] simplifies the development of GMF-based graphical PetriNet model editors by automatically generating the required models places 0...* @gmf.diagram arcsn2t 0...* needed by the GMF editor construction framework from a single Place ArcP2T annotated Ecore meta-model. + name : EString + name : EString tokens 0...* As an example, Figure 2 shows some annotations indicating that + idNode : EIntegerObject + tokenNo : EIntegerObject + startFlag : EBooleanObject Token Places, Transitions and Tokens are to be displayed as nodes (annota- hasTokens @gmf.link + tokenNo : EIntegerObject + name : EString 0...* + idToken : EIntegerObjec tion gmf.node), while arcs are to be represented as links (annotation @gmf.node gmf.link), and all elements are to be placed in the diagram repre- 1...1 1...1 @gmf.node target source sented by the PetriNet (annotation gmf.diagram). Figure 5 shows the target 1...1 resulting editor. It contains a canvas to graphically edit the model, 0...* ArcT2P Transition and a palette to create the objects. The object attributes can be arcst2n + name : EString 1...1 + name : EString + tokenNo : EIntegerObject + idTransition : EIntegerObject source 0...* changed from an Eclipse properties view (not shown in the Figure). @gmf.link + evaluatorTrue : EBooleanObject transitions + min_time : EIntegerObject + max_time : EIntegerObject 2.2 DPG (Diagram Programming Generator) @gmf.node The web technology that we target in this work is based on the Programmable Solutions Interpreter Engine, (PsiEngine)[2, 3]. Figure 1: Ecore meta-model for Petri nets with EuGENia an- PsiEngine implements, evaluates, interprets and executes DSLs notations described in XML within the web client. It uses HTML5, CSS3, JavaScript and DOM together with technologies, services and tools As a running example, assume we would like to create a mod- from Web 2.0 and the specification of XML-DSL grammars in order elling editor for Petri nets [24] using EMF. Petri nets are a popular to build web components, widgets, and dynamic web sites to give formalism to model concurrent system, made of places, which may the solution to specific web application problems or parts of them. hold zero or more tokens, and that can be connected to transitions PsiEngine is a generic lightweight JavaScript framework (it a via input and output arcs. Figure 1 shows the ecore meta-model cross browser platform) that processes and evaluates programs of Petri nets with EuGENia annotations. The meta-model supports written in Psi Language [2]. On top of PsiEngine, a set of Psi Petri nets with weighted arcs (attribute tokenNo in ArcPT and ArcTP) languages (Graph Library Psi GLPsi, Diagram Psi DPsi, Visual Tool and time in transitions to model delays. By convention, most Ecore Psi TPsi and Data Form Psi DFPsi) were created to develop the meta-models have a root class, which contains directly or indirectly functionality of a programmable diagram. all other classes via composition relations. This way, each class – Formally, a programmable diagram is a set of graphical elements except the root class – is contained into another one. This is espe- that define an SVG-based diagram, and each graphical element can cially useful to edit models using the generated tree editors, since