142 Judith Michael, Victoria Torres (eds.): ER Forum, Demo and Posters 2020 A Toolchain Transforming Descriptive Domain-Specific Models into Executable Browser-Based Applications Matthias Sedlmeier1 and Martin Gogolla2 1 matthias.sedlmeier@mailbox.org 2 Database Systems Group, University of Bremen, Germany gogolla@informatik.uni-bremen.de Abstract. While model-driven software development methodologies are still connected to non-agile approaches like the waterfall model, we aim to enable developers to use model-based evolutionary prototyping within agile software development techniques facilitating fast product incre- ments through constant refinement. To reach this goal, we take advantage of the yEd diagram editor for creating, storing and updating graphical domain-specific models. With a defined transformation process carried out by a specially developed pair of Ruby tools, we rapidly generate working implementations from these models based on Ruby on Rails, a widely adopted solution for web application design. Our toolchain at hand, we demonstrate all steps required to provide executable browser- based applications from our descriptive domain models managed in yEd and suggest an agile software development approach. Keywords: Domain-Specific Modeling · Graphical Modeling Language · Model Management · Model Transformation · Code Generation · Evo- lutionary Prototyping · Agile Software Development 1 Introduction Modeling in general and Domain-Specific Modeling (DSM) are typically carried out within an approach-specific model management environment, like Eclipse [1], Epsilon [5] or Gemoc [3]. In contrast, this contribution advocates to employ the diagram editor yEd (yworks.com) for managing DSM artifacts, in particu- lar for model storage and update. By allowing users to develop models with a well-known tool, we can realize a light-weight modeling approach for occasional modelers as well as domain experts and in contrast to heavy-weight modeling with, e.g., Eclipse. yEd models for browser-based information systems are trans- formed through a well-defined transformation chain into working Ruby on Rails (short Rails) implementations. Applications of yEd for modeling by computer and domain experts have been discussed already within software development [6] and ontologies [4], whereas [7], [2] and [10] deal with model-driven development of web based respectively mobile applications. Copyright © 2020 for this paper by its authors. Use permitted under Creative Commons License Attribution 4.0 International (CC BY 4.0). A Toolchain Transforming Descriptive Domain-Specific Models 143 Our transformation chain involves two specially developed Ruby tools called Tibet and Tor. Tibet parses the domain-specific yEd models and creates an in- memory representation used by Tor to render the required Rails code artifacts. This process includes several refinement steps programmatically defined in the Ruby language and finishes with an executable application. We thus use Ruby as our transformation language. We aim to support developers implementing evo- lutionary prototyping within agile software development approaches supported by fast, model-based product increments, which can be easily customized. This contribution builds upon preceding work covering conceptual data mod- els [8] and model-driven design with yEd [9]. It presents a work still in progress, yet deployable. In Sect. 2 we explain some selected aspects of our DSM language mainly based on ER and EER concepts complemented with UML class diagram features. In Sect. 3 we discuss the transformation into a working implementa- tion and suggest a possible agile software development approach based on our toolchain. Section 4 concludes the paper. 2 Utilizing a yEd Palette as a DSM Language Before introducing our graphical DSM language, we take a brief look at yEd, a customizable general-purpose diagram editor serving as a front end for our model management. yEd provides a comfortable user interface that developers can utilize to specify requirements in the form of graphical domain-specific mod- els stored as XML-based GraphML (Graph Markup Language) text files. Fig. 1 shows a yEd screenshot depicting six noteworthy parts. The window in part (1) provides an overview of the model loaded allowing developers to zoom and browse its contents. The window in part (2) holds automatically generated interactive context views of selected model elements focusing on the element Neighbourhood, Predecessors, Successors or Folder Contents in case of nested nodes. The Struc- ture View in part (3) provides a searchable tree view of the model including all nodes represented by their labels. The main edit window in part (4) enables users to freely draw models providing various auxiliary features like guided or automatic layout, graph transformations and element grouping. Additionally, yEd ships with diverse palettes as shown in part (5), amongst others palettes for BPMN, Entity Relationship schemas, Flowcharts and SBGN (Systems Biology Graphical Notation). Developers can mix elements from different palettes and define custom ones via the palette management feature. Detailed information about elements are obtainable via the Properties View as shown in part (6). Figure 2 shows an excerpt of our custom yEd palette for our DSM lan- guage, for which we give an exemplary explanation. The upper part (1) depicts various kinds of rectangular type nodes for modeling concepts on different ab- straction levels. Developers are able to represent more concrete issues using the EntityType, EnumerationType and RelationshipType. For describing more abstract concepts, our palette offers the ClassType as well as the ModuleType (both being different w.r.t. association and attribute inheritance). 144 Matthias Sedlmeier and Martin Gogolla Fig. 1. Screenshot of yEd with DSM Example Attributes are modeled utilizing oval nodes as displayed in the middle part (2) supporting different kinds of roles and data types. For example, final attributes labelled with f never change values after state initialization, while browse at- tribute values will be searched, if the application end user wants to link an A Toolchain Transforming Descriptive Domain-Specific Models 145 instance of the owning type via the user interface views. The definition of at- tribute validation rules can be accomplished using constraint nodes as shown in part (3). Nodes are connected via different edge types shown in the lower part (4). Amongst other concepts, our modeling language supports attribution, association, generalization and restriction edges. Fig. 2. Tibet Palette Excerpt We use our language to specify an example application, a basic content man- agement system. The following description provides a short summary of some selected aspects of the example model displayed in part (4) of Fig. 1, without claiming to be exhaustive. For the content management system to work, we model some basic concepts like Site (a), Page (b) and NavigationEntry (c) as entity types with corre- sponding attributes and associations. In our scenario, the entity type Site may aggregate multiple Page instances and vice versa. Amongst others, the Page type holds a title (d) and a content (e) attribute connected via attribution edges decorated with semantic annotations (to be utilized in the transformation). The content attribute is drawn with a dashed line making it optional, while the annotation r on the lower left side defines, that it will be represented via a rich text editor when rendered on the user interface views. The reflexive compos- 146 Matthias Sedlmeier and Martin Gogolla ite association as defined for the NavigationEntry (f) type allows to represent a potential hierarchy of navigation entries, which may be aligned on the user in- terface views by position information stored via the GridPositionElement (g) enumeration type. During transformation, additional attributes are augmented to store name constants and language specific translations. Our example also shows the inclusion of a module called UserMultipleOwned (h) by Page, Site and NavigationEntry inheriting required associations to the User entity type provided in another model file. Finally, (j) depicts a so-called supply relation between Page and Comment defining, that if a Page instance is shown on the user interface views, the end user is able to create a comment. 3 Transformation of the DSM language and Execution Utilizing Ruby on Rails The complete transformation chain consists of four main steps as depicted in Fig. 3. Firstly, we use yEd to create and manage a descriptive domain-specific model based on our custom palette (1). Secondly, we utilize one of our specially Fig. 3. Transformation Chain developed Ruby-based tools called Tibet to instantiate an in-memory represen- A Toolchain Transforming Descriptive Domain-Specific Models 147 tation of the model. Tibet reads the domain-specific model, possibly spanning several files, and parses the GraphML content. Through several refinement steps it constructs a complete semantic model by performing well-defined operations expressed in the Ruby language (2). Using the additional Tibet console module, this structured process enables developers to manage model information, in par- ticular to make meta queries for retrieving detailed information about the model down to its low-level GraphML representation. The Tibet API component provides an interface allowing developers to access model information as done in the third step. Here we use our second specially de- veloped Ruby tool called Tor implementing the necessary transformation logic to generate code modules by using specific templates. These modules are integrated unobtrusively into the derived Rails application instance and are complemented by additional static modules shipped with Tor (3). Tor also provides a console enabling developers to examine model details in the context of the generation process and thus helps in managing the transformation. In the fourth step, all necessary Rails modules are generated (4) and accessible via the Rails console. Tor outputs the application data model components consisting of roughly two parts. Firstly, so-called migration files are derived containing schema information in a domain-specific language in order to initialize the database back end, in our case a Postgres SQL database. Secondly, Tor renders corresponding model classes based on the Rails ORM (Object-Relational Mapping) library implementing the active record architectural pattern. Tor also generates model validation and model access control layers as well as modules for reflection capabilities. The application view components are also constructed from multiple gener- ated files. On the one hand, Tor renders default HTML files, on the other hand, it builds JavaScript based front end views utilizing the React framework (re- actjs.org) in conjunction with the jQuery (jquery.com) and Bootstrap (get- bootstrap.com) libraries providing extended DOM (Document Object Model) manipulation features, user interface controls and layout mechanisms. As Tor builds JavaScript modules using the modern ECMAScript 2015 language specifi- cation (ecma-international.org/ecma-262/6.0), we use another open-source tool called Webpack (webpack.js.org) in conjunction with Node.js (nodejs.org) to transcompile the code and make it fully compatible with all modern browsers. Additionally, Tor outputs application controller components connecting the model and view layers by rendering controller actions. These actions are mapped to corresponding HTTP request methods through extra generated routing defini- tion files forming the application service endpoints. The data exchange between the browser-based front end and the Rails application back end is mainly realized with the widely-adopted JSON (JavaScript Object Notation) format. Our toolchain at hand, we suggest a development process based on agile and rapid methods utilizing evolutionary and incremental prototyping. We are in the process of applying this approach to a larger case study covering the design and generation of a browser application for the individual creation of report templates and report instances for various documentation use cases. Dependent on the overall project size, we break our system into smaller parts individually 148 Matthias Sedlmeier and Martin Gogolla developed through multiple iterations. Each iteration starts with the creation of a data model in yEd and the generation of a first prototype derived by our toolchain. We then verify our requirements based on the prototype. We are able to adjust or extend the model, if required, and repeat the generation process until our expectations are met. Individual aspects, which cannot be expressed in our modeling language, are added unobtrusively with the help of various customization techniques. Our prototype evolves in each iteration until it is stable and ready for being part of our system. This structured process centers on the created model and is repeated until all increments of our system are captured. The presented toolchain enables developers to perform simple and direct transformations from domain-specific models to executable applications. yEd as a light-weight diagram editor is freely available running on all major platforms. The latter also applies to Ruby, a widely-adopted and actively maintained open source programming language offering an easy and intuitive access harnessed by Rails, an established web application framework used by major platforms like GitLab and Airbnb. The depicted development process liberates developers from repetitive routine coding work and enables them to perform application refinement through model refinement. The domain-specific models identify cen- tral application concepts and represent a stable documentation. Our generation process facilitates fast iterations, which can be immediately validated by all rel- evant stakeholders. Thus, developers can take advantage of running evolving prototypes, which users can immediately interact with leading to early accepted increments and reducing the risk of project failure. Finally, if modularized prop- erly, models and their increments are reusable in other projects. 4 Conclusion We have demonstrated how we use yEd to create, store and update domain- specific models and how a toolchain is capable of generating browser-based client-server applications based on Ruby on Rails by applying corresponding transformations on those models. Our underlying DSM language targets web in- formation systems and offers a rich collection of modeling features borrowed from (Extended) Entity-Relationship modeling and UML class diagram concepts. We have also suggested a feasible agile development approach we are using in our case studies. As of now, our approach is limited to structural design. While some language features induce special application behavior, currently behavior cannot be mod- eled explicitly, but is projected in future tool versions. As already mentioned, we are in the process of planning and performing a larger project covering the de- sign and generation of a browser application for the individual creation of report templates and report instances. The idea arose mainly from the need of flexible checklist based reporting for FSC (Forest Stewardship Council) audits and home inspection reports as recommended by InterNACHI (International Association of Certified Home Inspectors). Last but not least, applicability and practicabil- A Toolchain Transforming Descriptive Domain-Specific Models 149 ity of our approach will be further validated and improved through middle- and large-sized case studies. References 1. Allilaire, F., Bézivin, J., Bruneliere, H., Jouault, F.: Global Model Management in Eclipse GMT/AM3. In: Eclipse Technology eXchange Workshop (eTX) - a ECOOP 2006 Satellite Event. Nantes, France (Jul 2006), https://hal.inria.fr/hal-01272277 2. Challenger, M., Erata, F., Onat, M., Gezgen, H., Kardas, G.: A Model-Driven En- gineering Technique for Developing Composite Content Applications. In: Mernik, M., Leal, J.P., Oliveira, H.G. (eds.) 5th Symposium on Languages, Applica- tions and Technologies (SLATE’16). OpenAccess Series in Informatics (OA- SIcs), vol. 51, pp. 11:1–11:10. Schloss Dagstuhl–Leibniz-Zentrum fuer Informatik, Dagstuhl, Germany (2016). https://doi.org/10.4230/OASIcs.SLATE.2016.11, http://drops.dagstuhl.de/opus/volltexte/2016/6016 3. Combemale, B., Barais, O., Wortmann, A.: Language Engineering with the GEMOC Studio. In: 2017 IEEE Int. Conf. Software Architecture Workshops, ICSA Workshops. pp. 189–191. IEEE Computer Society (2017) 4. Falco, R., Gangemi, A., Peroni, S., Shotton, D.M., Vitali, F.: Modelling OWL Ontologies with Graffoo. In: Presutti, V., Blomqvist, E., Troncy, R., Sack, H., Papadakis, I., Tordai, A. (eds.) Semantic Web ESWC Satellite Events. LNCS, vol. 8798, pp. 320–325. Springer (2014) 5. Kolovos, D.S., Paige, R.F., Rose, L.M., Williams, J.R.: Integrated Model Man- agement with Epsilon. In: France, R.B., Küster, J.M., Bordbar, B., Paige, R.F. (eds.) Modelling Foundations and Applications, 7th Eur. Conf. ECMFA. LNCS, vol. 6698, pp. 391–392. Springer (2011) 6. López-Fernández, J.J., Garmendia, A., Guerra, E., de Lara, J.: An example is worth a thousand words: Creating graphical modelling environments by example. Software and Systems Modeling 18(2), 961–993 (2019) 7. Neubauer, J., Frohme, M., Steffen, B., Margaria, T.: Prototype-Driven Develop- ment of Web Applications with DyWA. In: Margaria, T., Steffen, B. (eds.) Lever- aging Applications of Formal Methods, Verification and Validation. Technologies for Mastering Change. pp. 56–72. Springer Berlin Heidelberg, Berlin, Heidelberg (2014) 8. Sedlmeier, M., Gogolla, M.: Design and Prototypical Implementation of an In- tegrated Graph-Based Conceptual Data Model. In: Thalheim, B., Jaakkola, H., Kiyoki, Y., Yoshida, N. (eds.) 24th Int. Conf. Information Modelling and Knowl- edge Bases (EJC). Frontiers in Artificial Intelligence and Applications, vol. 272, pp. 376–395. IOS Press (2014) 9. Sedlmeier, M., Gogolla, M.: Model Driven ActiveRecord with yEd. In: Welzer, T., Jaakkola, H., Thalheim, B., Kiyoki, Y., Yoshida, N. (eds.) 25th Int. Conf. Infor- mation Modelling and Knowledge Bases (EJC). Frontiers in Artificial Intelligence and Applications, vol. 280, pp. 65–76. IOS Press (2015) 10. Umuhoza, E.: Domain-Specific Modeling and Code Generation for Cross- Platform Multi-Device Mobile Apps. CoRR abs/1509.03109 (2015), http://arxiv.org/abs/1509.03109