Model-driven software development: Visualize differences between model versions and variants in low-code platforms

Analyzing and clearly presenting differences between model versions and variants is critical for effective collaborative model-driven software development. In this article, we show how differences in models and data can be visualized using inline-diff editors on the mgm A12 Enterprise Low-Code Platform. Since the underlying concepts are universal, the approach can also be applied to other low-code platforms.

Imagine you’re working on a project with other team members, each of whom may have made changes to the models at different times. To ensure that everyone is on the same page and that changes are implemented correctly, it’s important to understand the differences between different versions and variants of the models. In model-driven software development, as in the software development industry as a whole, we use established version control systems and automated comparisons (known as “diffs”) to identify these differences, detect changes in the models, document them, and track them.

Challenges of Comparing Model Differences

Models play a critical role throughout the software lifecycle in model-driven software development and low-code platforms. They adhere to a clear metamodel and have a distinct semantic meaning. Unlike traditional software development, where comparing lines of code is often sufficient, comparing models is typically more complex. Line-based differentiation, common in text-based components, often falls short. It doesn’t take into account the syntactic structure and meaning of individual model elements, leading to potentially difficult-to-interpret results.

Research in model-driven software development has addressed this challenge extensively. Most approaches to model differentiation focus on the abstract syntax of models, but often overlook the representation of differences. This is a particular hurdle for individuals without deep programming knowledge, such as those found in the context of low-code platforms, known as citizen developers.

Solution: Specialized Diff Editors for Understandable Notation

A promising approach for model-driven software development is to use specialized diff editors that represent the differences between models in a notation that is understandable to users. These editors reduce complexity and allow their users to intuitively understand the differences between different model versions. They can also help distinguish the data corresponding to the models in applications.

Diff Editors Using the Example of Differences Between A12 Models

In this article, we introduce such an approach for calculating differences between models of the mgm A12 Enterprise Low Code Platform and demonstrate how these differences can be represented in an easily understandable notation. A12 is an enterprise low-code platform that enables the development, integration, maintenance, and operation of complex business applications.

Dr. Arvid Butting of the A12 team explains:

“We call it an enterprise low-code platform because it is specifically designed for the development of large, highly integrated and long-lived applications. The focus is on model-driven development of enterprise business applications. The complexity of the solution domains requires that there are a lot of opportunities to develop custom parts of the application, to do custom development, as well as to exchange entire components of the application, making it very flexible to integrate with different systems.”

A12 Enterprise Low-Code Platform: A Brief Overview

The platform consists of two main parts: the modeling platform and the runtime platform.

1. A12 Runtime Platform

The A12 runtime platform consists of various components such as engines, widgets and data services. These components enable client-side model interpretation, data delivery, and user interface rendering. In addition, the platform provides a variety of extension points for application customization and integration.

2. Model Types in A12

A12 uses a “data first” modeling paradigm that begins with the definition of data models. These models describe the entities and relationships in an enterprise environment. Specialized models are then used to define application logic, user interfaces, and workflows to define the structure and functionality of the applications.

The core elements of modeling an A12 application are data modeling and UI modeling.

2.1 Data Modeling in A12

Data modeling in A12 uses document models to model entities, similar to classes in a UML class diagram. In addition to document models, relationship models are used to describe the connections or associations between the entities. However, unlike traditional UML class diagrams, document models can include advanced elements such as validation rules or calculations for calculated fields.

2.2 UI Modeling in A12

UI modeling builds on data modeling and includes different model types for modeling different parts of the user interface. Form models are used to model form-like user interfaces, while overview models are used for tabular overviews. Tree models are used to represent hierarchical data, while print models describe print templates for generating PDF files.

In addition to data and UI modeling, process modeling also plays an important role. Application modeling includes the processes within the user interface of the application itself, while workflow modeling represents complex processes within the business logic of an application.

Simple Model Editor (SME): Primary Modeling Tool in A12

Built into A12, the Simple Model Editor (SME) serves as the central hub for modeling within the enterprise low-code platform. With a clean and intuitive user interface, the SME provides various functions for adding, editing, and deleting models of different types. This allows users without deep programming knowledge to shape the structure and logic of their applications.

The Simple Model Editor (SME) includes several components for efficient model editing. On the left side of the SME, the Workspace Explorer provides an overview of all models of different types within an application. Each model type is identified by an icon, and users can edit models, create new models, perform model validation, and deploy models to a preview application, among other functions.

When a specific model is selected, the corresponding model editor appears on the right side of the Workspace Explorer. Each model type has its own editor, which can contain different views. For example, the document model editor initially provides a tree-based overview of the model elements. When an element is selected in the overview, a form-based editor for editing the properties of the selected element appears on the right.

Models: Differences, Deltas, Versions, and Variants

There are two basic approaches to understanding the differences between different software models: semantic and syntactic model comparison.

• The semantic method focuses on identifying discrepancies between models that refute their semantic equivalence. For example, UML class diagrams may have instances that are valid for one diagram but not for another. However, this can lead to many examples and make the overall picture incomplete.
• The syntactic method explores the differences between models in a structured way. This is particularly relevant for areas such as version control and similarity analysis. The result of the syntactic model comparison is a sequence of change operations called “deltas” that describe additions, deletions, or modifications of model elements. When these deltas are applied to model A through a transformation, model B is created.

There are several algorithms for computing these deltas-a familiar topic in software development. However, low-code applications present unique challenges because the models are not only text-based but also graphical, and the users are often domain experts rather than software developers.

Dr. Arvid Butting describes the need as follows:

“Traditional text-based diff editors that display changes between models may not be suitable for this user group. Therefore, such tools need to be carefully integrated into low-code platforms to avoid unnecessary complexity and ensure a user-friendly presentation that matches familiar representations”.

Inline Diff Editors in A12

The concept of inline diff editors in A12 consists of four steps. First, users select two models or model versions to compare. Then, an algorithm calculates the difference between the selected model versions to generate and display an overview of all changes. To examine each change in detail, they can be displayed in inline diff editors.

Step 1: Selecting models for comparison

There are several ways to select models for comparison. In A12, the user can either select two different models from a workspace in the SME via a dialog, or select different versions of a model from the Git history to compare.

Step 2: Delta Calculation (Delta Calculator)

To calculate the difference between two models or versions of a model within the SME, a delta calculator is used. It is independent of the model type and can be used within the SME as well as in developed applications. The delta calculator analyzes the tree-like model structure and compares the corresponding data sets. For recurring elements, identical iterations are identified by matching. The functionality of the Delta Calculator is configurable. The result is a tree-like data structure representing the differences between the models, i.e. the deltas.

Step 3: Delta View – See all changes at a glance

The third step displays the Delta View. This provides a tree-like representation of the deltas, with each entry representing exactly one delta. The delta view gives the user an overview of all changes that have occurred between the compared models or model versions. This feature is important because the editors are made up of different views and parts that are not necessarily visible at a glance.

Click on individual deltas in the Delta View to examine them in detail in the Inline Diff editors. Different types of changes are represented by specific highlights. Deleted items are marked with strikethrough text and a red background. Modified items are shown with strikethrough text and a green background, and added items are shown with a green background.

Selecting a delta in the delta view opens an inline diff editor that displays the delta in detail within the original form. The original structure of the editor is maintained, but the changes are highlighted in color. Blue markers indicate that something has been changed.

A footnote below the editor describes what happened again for accessibility purposes. In case of a change, the old value is also displayed for comparison.

Step 4: Inline Diff Editor

To understand how the inline diff editor can be displayed, let’s take a look at the technical architecture of a typical A12 application that displays an editor form.

In an A12 application, the models of the editor and the application are processed by the runtime components of the low-code platform. UI models are interpreted by UI engines. These use UI components, also called widgets, to create the user interface, such as a form.

The application form communicates with a backend to process the input data. The Delta Applicator is a runtime component that applies the deltas to the original data, creating a modified dataset for display in the Inline Diff Editor.

This data is then displayed on the form. Next, highlighting is applied. This uses a modified model interpreter that uses modified widgets in addition to the new data set. The original widgets are partially decorated to apply the highlighting. The decision on which widgets to highlight is based on the deltas, among other factors, to provide the basis for live updates. With this architecture, it is generally possible to undo changes to the value and adjust the highlighting accordingly.

Maximize efficiency with inline diff editors

Inline diff editors bring many benefits to any project and can be used in other low-code platforms independent of A12. Clear visualization of model differences improves team collaboration, saves time, and reduces errors. Even non-technical users can track changes between model versions, collaborate more effectively, and make decisions more efficiently. Overall, inline diff editors enable faster and more accurate project development in model-driven software development.