Towards Web-Based Modeling

by Patrick Fleck, Laurens Lang and Philip Florian Polczer

Introduction

Currently, model-driven engineering is usually done with the help of traditional Integrated Development Environments (IDEs) like Eclipse. The setup of such IDEs may be cumbersome and time-consuming. We explored the possibility that web-based IDEs combined with a Language Server Protocol (LSP) offer for model engineering. We developed a small domain-specific-language based on Xtext, based on an existing modeling project. Using Theia and a language server to provide programming language-specific features we enabled the web-based modeling with our language via any common browser. To further explore the opportunities of this approach we used Sprotty to implement a graphical modeling tool in our IDE.

The Workflow Constraint Language

The starting point of our work was the existing Papyrus Workflow Modeling Tool created by EclipseSource. It allows the modeling of a workflow with actors. We built a domain specific language based on this project which allows to define constraints for a workflow.

We realized the "Workflow Constraint Language" (WCL) with Xtext and Xtend. The idea is to define assertions between Actions in the Workflow, as well as between Actions and Actors. Therefore, the two possible assertions may look like this:

assert_activity "Activity1" always_before "Activity2"
assert_actor "Actor" is_actor_of "Activity1"

Language Server Protocol

The Language Server Protocol (LSP) is a JSON-RPC-based protocol that standardizes the communication between an integrated development environment and the server that provides the domain specific language. The overall objective of this is to enable a programming language support to be implemented and distributed independently of any given editor or integrated development environment. The integrated development environment, with which the user interacts and consumes the language service, acts obviously as a client and the server, that provides the language service. The client informs the server about the local changes of the user events, while the server responds with appropriate suggestions, error messages etc.
 

Communication throug LSP [1]

For setting up our Language Server, we used the Libraries LSP4J and JSONRPC. The Language Server itself acts as a predefined program unit, which is extended by language modules. These language modules are injected into the Language Server. In our case, we injected the created Workflow Constraint Language module, which was created with the Eclipse Modeling Tools by designing the Xtext language.

Theia

Theia is an extensible platform to develop full edged multi-language cloud and desktop IDE-like products with state-of-the-art web technologies. Theia provides both, for native desktop and web-based application, on the one hand and on the other hand a remote server. There exist the frontend and the backend, which communicate through JSON-RPC messages over WebSockets or REST APIs over HTTP.

Architecture [2]

Theia comes, similar to the Language Server, as a predefined program unit and is available via Node.js. We created a module for Theia, which is injected into the existing Theia application. The module itself is resposible for the communication with our Language Server. Furthermore, the Syntax highlighting is defined through the framework "Monaco".

Theia Application with example WCL-file

Sprotty

Sprotty is an open-source, web-based diagramming framework, which supports SVG, CSS and animations.
At the server side, the model corresponding to the WCL-file is translated into the sprotty model. Afterwards, the server sends the JSON representation of Sprotty's graph model back to the client.

Sprotty Model [3]

At the client, a module which is responsible for the interpretation of the graph module was created and again injected into the existing Theia application. This module renders the graph model into SVG-views.

Conclusion and Future Work

By migrating the Workflow Constraint Language from a standalone Eclipse-Module to a Web Based IDE through putting up a Language Server, a Theia client and extending the tools with graphical modeling approaches with Sprotty, we presented one way how web based modeling tools can be realized.
In addition to our work conducted during the project, the following points may be followed in the future:

• Using Theia as an electron-based client IDE
• Extending the atomic tests (assertions) of the language
• Extending the graphical modeling capabilities by adding, removing and editing egdes and nodes

References

[1] What is the language server protocol? https://microsoft.github.io/language-server-protocol/overview. Accessed: 2018-06-10.
[2], [3] Business Informatics Group. https://www.youtube.com/watch?v= er9uxpb91y.
Accessed: 2018-06-21.