Frontend-only browser-based modeling tools

Abstract

In recent years, a shift from feature-rich Integrated Development Environments (IDE) to lightweight web clients could be observed. In order to be able to make that shift, for textual editors, the Language Server Protocol (LSP) has been created, while for graphical editors, an enhancement of the LSP has been introduced in the Graphical Language Server Platform (GLSP). However, the model management for graphical editors has still been handled by heavy-weight Java model servers. This includes both the creation of metamodels and the runtime handling of models.This thesis aims to make the next step toward web-based graphical model editors and shift the model management to a TypeScript-only technology stack. For this, the functionalities of the next-generation language framework Langium are explored and extended by a model server API. This enables model-oriented clients to access the Abstract Syntax Tree (AST), which is created by Langium and holds the current state of a model. Furthermore, a new TypeScript native grammar language is conceptualized to provide a TypeScript native solution to define metamodels.To combine the model server API with the TypeScript-based grammar language, a generator is created that sets up the entire model management component. Typically, in Java-based environments, the metamodel for the model management component is created using the EMF Ecore metamodel. Therefore, to ease the transition from Ecore to the TypeScript-based grammar language, a mechanism to create the TypeScript-based grammar definition from the Ecore metamodel is added to the implementation of the generator.The work in this thesis is evaluated in two parts: First, the TypeScript-based grammar language is evaluated by comparing it with the widely used Ecore metamodel. Second, two state-of-the-art modeling tools, which utilize GLSP, are rebuilt to evaluate the generator by creating the metamodel and model management using the generator’s capabilities.