A Model Management Framework for Next-Generation Web-based Modeling Tools

Abstraction

The move towards web technologies has arrived at modeling and especially modeling tools. Several frameworks and platforms have been proposed recently, aiming at the efficient realization of web-based modeling tools, i.e., tools developed with web technologies that natively allow for cloud-based deployment and use in web browsers. Most of these frameworks separate modeling tool functionality like editing, rendering, and management of the model into separate specialized components, often realized in different technologies. For the model management of Ecore-based modeling languages like the UML, the Eclipse Modeling Framework (EMF) is still prevalent. While this may maximize reuse, it comes at a cost: EMF is Java-based, entailing a polyglot technology stack, which complicates the development and hinders an entirely browser-based deployment without any backend. In this paper, we address this problem by introducing a Typescript-only approach for generating Langium-based modeling language grammars and model management servers. Using our approach, developers can build next-generation web-based modeling tools with a homogeneous technology stack, which can be executed as cloud applications or plain browser applications without any backend, if needed. We evaluate our approach by applying it to two distinct modeling tools: a Workflow and a UML modeling tool.

Introduction

一些Web端建模平台技术开始兴起如Sirius Web和EMF Cloud。他们有更好的图形编辑能力，由Stroppy和GLSP支持，这些框架依赖Java-based EMF，导致几个问题：异构开发者环境复杂；需要额外的runtime requirements；阻碍了浏览器部署（prevents a deployment as plain browser application, in which the modeling tool is hosted as a static website without the need for a backend. However, this form of deployment becomes increasingly important given the cost and IP considerations with a cloud infrastructure.）

Langium作为Xtext的下一代出现。（However, as Langium is a textual language framework strongly aligned with the Language Server Protocol, it only focuses on textual editing, i.e., changing text documents in a two-dimensional space defined by row and character position.）Therefore, the question arises whether the features of Langium can be made available for model-oriented use cases, enabling modeling tools to benefit from Langium’s rich capabilities in model serialization, managing cross-references, and validating models.

A gap remains in leveraging the model management functioniality of Langium for graphical modeling languages and editors.
差距仍在利用Langium的模型管理功能来用于图形建模语言和编辑器。因此，这项研究探讨了扩大Langium功能的可能性，以提供面向模型的客户对其AST模型的访问，并将其用作建模工具建模工具的拼写字体本地模型管理框架，取代至关重要的功能，否则需要基于Java的传统框架，例如EMF。This research consequently explores the possibilities of expanding the functionalities of Langium to provide model-oriented clients access to its AST model and use it as a Typescript-native model management framework for modeling tools, replacing crucial functionalities that would otherwise require traditional Java-based frameworks, such as EMF.

We enhance Langium with a dedicated model management service and a corresponding API to which model-oriented clients can connect and manipulate the model state. As Langium is written in Typescript and can be packaged for the browser without a dependency on NodeJS, complete model management can be handled inside the browser. Access to the local file system can be implemented to load model files by using the Browser File System API or other external services.

We further introduce a Typescript-native language to simplify the definition of the metamodel. This metamodel definition language is based on Typescript interfaces which are extended to capture necessary meta-information of metamodel elements by custom annotations (e.g., to signify cross-references). Taking such a Typescript-native metamodel definition language as input, we generate a generic JSON grammar from these type definitions, and, ultimately, a Langium-based model management server.

Background

Web-based Modelling

现有的一些Web前端建模技术：Sprotty, EMF.cloud, Sirius Web, ReactFlow, ReactDiagrams, JointJS（都是EMF生态的）。后端的有GLSP，限制在文本语言的Langium。其他的还有Gentleman和jjodel。

GLSP

The Graphical Language Server Platform (GLSP) is an extensible open-source framework for building custom diagram editors with web technologies. GLSP is based on an extensible client-server architecture and comes with four major components: GLSP Server, GLSP Client, Platform Integration, and Model Management. 之后介绍了GLSP的一些技术实现路线。

Langium

介绍Langium，大部分内容和官网与手册一致。

Synopsis

To the best of our knowledge, no adequate mature solution for efficiently realizing model management in the browser using exclusively web technologies exists yet.
Primarily, we aim for a solution that is extensible, interoperable, and built with community-driven frameworks like Langium and standardized programming languages like Typescript. The reason for this constraining is that other approaches often do not excel from academic proof-of-concept prototypes. Proper browser-based model management is desired, as it would enable the shift of the entire modeling tool into the browser, omitting any installation steps. The usage of Java is one of the main obstacles on the path toward browser-based modeling tools. To address these shortcomings, we propose a novel grammar specification (Section 2) and model management generation (Section 3) approach that is based on Typescript and Langium.

Typescript-based Grammar Specification

Requirements

介绍Typescript-based grammar language的元模型属性。

Language Concepts

具体介绍元模型和一个例子。相当于使用Typescript写了一个对应于Ecore的元模型。

Model Management Generation

Requirements_

  • 初试特征
  • 解析：解析解析需要能够读取基于打字稿的语法定义和其他配置文件。此外，为了简化从生态到我们的方法的过渡，.ecore解析器将是有益的。
  • 验证和转换：必须验证所有解析和生成的文件。这包括基于打字稿的语法定义，Langiumdeclaration和LangiumGrammar文件。经过验证后，转换器应能够生成不同类型的文件。
  • 文档创建：.langium和Langium services
  • 包的安装与构建（installation and build）

Generator Concepts

逐步介绍生成器是如何进行的，如图所示。

流程图

Model Management API

模型管理API允许图形编辑器访问Langium语言服务器的AST。该API提供了打开，关闭，加载，保存和更新文档的功能。模型管理服务器的一个核心组件是负责langiumDocument内部模型状态的负载，保存和操纵的模型服务。模型管理API的要求之一是它与Langium的简单集成。因此，它被实现为由模块文件组成的NPM软件包，该软件包定义了默认langium服务的扩展，包括特定于语言的扩展和扩展，以增强语言服务器通常的功能。我们实施的两个关键扩展程序是JSonSerializer，这对于在模型管理服务器中实现JSON补丁功能至关重要，以及负责将AST转换为其文本表示形式的Serialializer。

Evaluation

用Workflow和BIGUML两个例子对比进行评估。The two examples show breadth and depth of our solution as the Workflow editor comes with a Typescript-based GLSP client and server implementation already while BIGUML comes with a Typescript-based GLSP client, a Java-based GLSP server, and a Java-based model management. Thus, the BIGUML example is much richer in requirements and extends the workflow editor requirements from an architectural point of view (Java-based GLSP server and model management server) and in functionality (i.e., having a Property palette and an outline view).

Realization and Integration of the Model Management Server

Workflow Model Management Server和BIGUML Model Management Server的技术。

Conclusion

In order to bring modeling tools into the cloud, it is crucial to build these tools with a homogeneous technology stack consisting of web technologies that natively allow cloud-based deployment and use in web browsers. In this paper, we proposed a novel Typescript-only approach for generating Langium-based modeling language grammars and subsequently generating entire model management servers. Through two use cases, we evaluated our approach and showed, how developers can build next-generation web-based modeling tools. All software components described in this paper will be published open-source to enable wide industrial and academic adoption and use.

个人总结：这篇讨论了Langium工具在模型管理服务上的一些问题，本文提供了一个新的方法生成了模型管理Server层，支持更丰富的操作。技术细节看得不是很明白。