Modellbasierte Softwareentwicklung: Visualisierung von Unterschieden zwischen Modellversionen und -varianten in Low-Code-Plattformen

Gender-Hinweis: Aus Gründen der besseren Lesbarkeit wird in diesem Beitrag das generische Maskulinum verwendet. Die in diesem Artikel verwendeten Personenbezeichnungen beziehen sich – sofern nicht anders angegeben – auf alle Geschlechter.

Unterschiede zwischen Modellversionen und -varianten zu analysieren und verständlich darzustellen, ist für eine effektive kollaborative modellbasierte Softwareentwicklung entscheidend. In diesem Artikel zeigen wir anhand der mgm A12 Enterprise Low-Code Plattform, wie sich Unterschiede von Modellen und Daten mit Inline-Diff-Editoren visualisieren lassen. Da die zugrundeliegenden Konzepte allgemeingültig sind, kann der Ansatz auch auf andere Low-Code-Plattformen übertragen werden.

Stellen Sie sich vor, Sie arbeiten mit anderen Teammitgliedern an einem Projekt und jeder hat möglicherweise zu unterschiedlichen Zeitpunkten Änderungen an den Modellen vorgenommen. Um sicherzustellen, dass alle auf dem gleichen Stand sind und Änderungen korrekt umgesetzt werden, ist es wichtig, die Unterschiede zwischen den verschiedenen Modellversionen und -varianten zu verstehen. In der modellgetriebenen Softwareentwicklung, wie auch in der gesamten Softwareentwicklungsbranche üblich, verwenden wir dazu etablierte Versionskontrollsysteme und automatisierte Vergleiche (sogenannte „Diffs“), um diese Unterschiede zu identifizieren, Änderungen in den Modellen zu erkennen, zu dokumentieren und nachzuvollziehen.

Herausforderung beim Vergleich der Unterschiede von Modellen

Modelle spielen in der modellbasierten Softwareentwicklung und bei Low-Code-Plattformen eine wichtige Rolle im gesamten Softwarelebenszyklus. Sie folgen einem klaren Metamodell und haben eine eindeutige semantische Bedeutung. Im Gegensatz zur herkömmlichen Softwareentwicklung, bei der es zumeist genügt, Codezeilen zu vergleichen, gestaltet sich der Vergleich von Modellen typischerweise komplexer. Eine zeilenbasierte Differenzierung, wie sie bei textbasierten Komponenten üblich ist, reicht hier oft nicht aus. Sie berücksichtigt nicht die syntaktische Struktur und Bedeutung einzelner Modellelemente und kann somit zu schwer interpretierbaren Ergebnissen führen.

Die Forschung im Bereich der modellbasierten Softwareentwicklung hat sich intensiv mit dieser Herausforderung auseinandergesetzt. Die meisten Ansätze zur Modellunterscheidung konzentrieren sich auf die abstrakte Syntax der Modelle, vernachlässigen jedoch oft die Darstellung der Unterschiede. Das stellt insbesondere für Personen ohne tiefgreifende Programmierkenntnisse eine Hürde dar, wie sie beispielsweise bei sogenannten Citizen Developer im Kontext von Low-Code-Plattformen anzutreffen sind.

Lösung: Spezielle Diff-Editoren für verständliche Notation

Ein vielversprechender Ansatz für die modellbasierte Softwareentwicklung besteht darin, spezielle Diff-Editoren zu verwenden, die die Unterschiede zwischen Modellen in einer für die Anwender verständlichen Notation darstellen. Diese Editoren reduzieren die Komplexität und ermöglichen es ihren Nutzern, die Unterschiede zwischen verschiedenen Modellversionen intuitiv nachzuvollziehen. Sie können auch bei der Unterscheidung von Daten, die den Modellen in Anwendungen entsprechen, unterstützen.

Diff-Editoren am Beispiel von Unterschieden zwischen A12-Modellen

In diesem Artikel stellen wir einen solchen Ansatz zur Berechnung von Unterschieden zwischen Modellen der mgm A12 Enterprise Low Code-Plattform vor und zeigen, wie sich diese Unterschiede in einer leicht verständlichen Notation darstellen lassen. A12 ist eine Low-Code-Plattform für Unternehmen, die es ermöglicht, komplexe Geschäftsanwendungen zu entwickeln, zu integrieren, zu warten und zu betreiben.

Dr. Arvid Butting aus dem A12-Team erklärt:

„Wir nennen sie eine Enterprise-Low-Code-Plattform, weil sie speziell für die Entwicklung großer, hoch integrierter und langlebiger Anwendungen entwickelt wurde. Der Fokus liegt dabei auf der modellgetriebenen Entwicklung von Enterprise Business Anwendungen. Die Komplexität der Lösungsdomänen bedingt, dass besonders viele Möglichkeiten für die Entwicklung eigener Teile der Anwendung bestehen, um sogenanntes Custom Development durchzuführen, sowie eben auch ganze Komponenten der Anwendung auszutauschen und damit sehr flexibel in verschiedenste Systeme integrierbar zu sein.“

A12 Enterprise-Low-Code-Plattform: kurzer Überblick

Die Plattform besteht aus zwei Hauptteilen: der Modellierungsplattform und der Laufzeitplattform.

1. A12-Laufzeitplattform

Die Laufzeitplattform von A12 umfasst verschiedene Komponenten wie Engines, Widgets und Datendienste. Diese Komponenten ermöglichen die Interpretation von Modellen auf Clientseite sowie die Bereitstellung von Daten und die Anzeige von Benutzeroberflächen. Die Plattform bietet außerdem eine Vielzahl an Erweiterungspunkten, um Anwendungen individuell anzupassen und zu integrieren.

2. Modelltypen in A12

A12 verwendet ein „Data First“-Modellierungsparadigma, das mit der Definition von Datenmodellen beginnt. Diese Modelle beschreiben die Entitäten und Beziehungen in einer Unternehmensumgebung. Anschließend werden spezielle Modelle verwendet, um Anwendungslogik, Benutzeroberflächen und Workflows zu definieren und somit die Struktur und Funktionalität der Anwendungen festzulegen.

Die Kernelemente der Modellierung einer A12-Anwendung sind die Datenmodellierung und die UI-Modellierung.

2.1 Datenmodellierung in A12

In der Datenmodellierung in A12 werden Dokumentenmodelle verwendet, um Entitäten zu modellieren, ähnlich wie Klassen in einem UML-Klassendiagramm. Zusätzlich zu den Dokumentenmodellen werden Relationship-Modelle verwendet, um die Verbindungen oder Assoziationen zwischen den Entitäten zu beschreiben. Im Gegensatz zu herkömmlichen UML-Klassendiagrammen können Dokumentenmodelle jedoch auch weitergehende Elemente wie Validierungsregeln oder Berechnungen für berechnete Felder enthalten.

2.2 UI-Modellierung in A12

Die UI-Modellierung baut auf der Datenmodellierung auf und umfasst verschiedene Modelltypen zur Modellierung unterschiedlicher Teile der Benutzerschnittstelle. Form-Modelle werden verwendet, um formularartige Benutzerschnittstellen zu modellieren, während Overview-Modelle für tabellenartige Übersichten verwendet werden. Tree-Modelle werden für die Darstellung von hierarchischen Daten verwendet, während Print-Modelle  Druckvorlagen beschreiben, mit denen PDF-Dateien generiert werden können.

Neben der Daten- und UI-Modellierung spielt auch die Prozessmodellierung eine wichtige Rolle. Die Anwendungsmodellierung (App Modeling) umfasst die Prozesse innerhalb der Benutzerschnittstelle der Anwendung selbst, während die Workflow-Modellierung komplexe Prozesse innerhalb der Fachlichkeit einer Anwendung darstellt.

Simple Model Editor (SME): Hauptwerkzeug zur Modellierung in A12

Der in A12 integrierte Modelleditor heißt Simple Model Editor (SME) und dient als zentrale Anlaufstelle für die Modellierung in der Enterprise-Low-Code-Plattform. In einer übersichtlichen und intuitiven Benutzeroberfläche bietet der SME verschiedene Funktionen zum Hinzufügen, Bearbeiten und Löschen von Modellen verschiedener Modelltypen. Dies ermöglicht auch Nutzern ohne tiefe Programmierkenntnisse, die Struktur und Logik ihrer Anwendungen zu gestalten.

Der Simple Model Editor (SME) beinhaltet verschiedene Komponenten zur effizienten Bearbeitung von Modellen. Auf der linken Seite des SME befindet sich der Workspace Explorer, der eine Übersicht über alle Modelle der verschiedenen Modelltypen einer Anwendung bietet. Die einzelnen Modelltypen sind durch Icons gekennzeichnet und es besteht unter anderem die Möglichkeit, Modelle zu bearbeiten, neue Modelle anzulegen, Modellvalidierungen durchzuführen sowie Modelle auf eine Preview-Applikation auszuliefern.

Wird ein bestimmtes Modell ausgewählt, öffnet sich rechtsseitig des Workspace Explorers der entsprechende Modelleditor. Hier stehen für jeden Modelltyp individuelle Editoren zur Verfügung, die wiederum unterschiedliche Ansichten enthalten können. Beispielsweise bietet der Editor für Dokumentenmodelle zunächst eine baumbasierte Übersicht der Modellelemente. Wird ein Element in der Übersicht ausgewählt, erscheint auf der rechten Seite ein formularbasierter Editor für die Bearbeitung der Eigenschaften des selektierten Elementes.

Modelle: Unterschiede, Deltas, Versionen und Varianten

Um die Unterschiede zwischen verschiedenen Software-Modellen zu verstehen, gibt es zwei grundlegende Ansätze: Den semantischen und den syntaktischen Modellvergleich.

• Die semantische Methode konzentriert sich darauf, Abweichungen zwischen den Modellen zu finden, die ihre Bedeutungsäquivalenz widerlegen. Zum Beispiel könnten UML-Klassendiagramme Instanzen haben, die für ein Diagramm gültig sind, aber nicht für das andere. Dies kann jedoch zu vielen Beispielen führen und das Gesamtbild unvollständig machen.
• Die syntaktische Methode betrachtet die Unterschiede zwischen den Modellen strukturierter. Das besonders relevant für Bereiche wie Versionskontrolle und Ähnlichkeitsanalyse. Das Ergebnis des syntaktischen Modellvergleichs ist eine Sequenz von Änderungsoperationen, die als „Deltas“ bezeichnet werden und Hinzufügungen, Entfernungen oder Änderungen von Modellelementen beschreiben. Wenn diese Deltas in einer Transformation auf Modell A angewendet werden, entsteht Modell B.

Es gibt verschiedene Algorithmen, um diese Deltas zu berechnen – ein bekanntes Thema in der Softwareentwicklung. Allerdings gibt es spezielle Herausforderungen in Low-Code-Anwendungen, da die Modelle hier nicht nur textbasiert, sondern auch grafisch sind und die Nutzer oft keine Softwareentwickler, sondern Domänenexperten sind.

Dr. Arvid Butting beschreibt die Anforderung folgendermaßen:

„Herkömmliche textbasierte Diff-Editoren, die Änderungen zwischen Modellen anzeigen, sind möglicherweise nicht geeignet für diese Nutzergruppe. Daher müssen derartige Werkzeuge sorgfältig in Low-Code-Plattformen integriert werden, um unnötige Komplexität zu vermeiden und eine benutzerfreundliche Darstellung zu gewährleisten, die den gewohnten Darstellungen entspricht.“

Inline-Diff-Editoren in A12

Das Konzept der Inline-Diff-Editoren in A12 besteht aus vier Schritten. Zuerst wählen Nutzer zwei Modelle oder Modellversionen aus, um sie miteinander zu vergleichen. Dann berechnet ein Algorithmus die Differenz zwischen den ausgewählten Modellversionen, um einen Überblick über alle Änderungen zu erzeugen und anzuzeigen. Um die einzelnen Änderungen im Detail zu betrachten, können sie in Inline-Diff-Editoren angezeigt werden.

1. Schritt: Auswahl der Vergleichsmodelle

Es gibt verschiedene Möglichkeiten, Modelle für den Vergleich auszuwählen. In A12 kann der Benutzer entweder über einen Dialog zwei verschiedene Modelle aus einem Workspace im SME auswählen oder verschiedene Versionen eines Modells aus der Git-Historie auswählen, um sie miteinander zu vergleichen.

2. Schritt: Der Delta-Berechnung (Delta-Calculator)

Um den Unterschied zwischen zwei Modellen oder Versionen eines Modells im Kontext des SME zu berechnen, wird ein Delta-Calculator verwendet. Dieser ist unabhängig vom Modelltyp und kann sowohl innerhalb des SME als auch in entwickelten Anwendungen eingesetzt werden. Der Delta-Calculator analysiert die baumartige Modellstruktur und vergleicht die entsprechenden Datensätze. Bei wiederkehrenden Elementen werden identische Iterationen durch ein Matching erkannt. Die Funktionalität des Delta-Calculators kann konfiguriert werden. Das Ergebnis ist eine baumartige Datenstruktur, die die Unterschiede zwischen den Modellen, also die Deltas, darstellt.

3. Schritt: die Delta-View – alle Änderungen auf einen Blick

Im dritten Schritt wird die Delta-View angezeigt. Diese bietet eine baumartige Darstellung der Deltas, wobei jeder Eintrag genau ein Delta darstellt. Die Delta-Ansicht gibt dem Benutzer einen Überblick über alle Änderungen, die zwischen den verglichenen Modellen oder Modellversionen stattgefunden haben. Diese Funktion ist wichtig, da die Editoren aus verschiedenen Ansichten und Teilen bestehen, die nicht notwendigerweise auf einen Blick erfasst werden können.

Durch Anklicken einzelner Deltas in der Delta-View können diese in den Inline-Diff-Editoren im Detail betrachtet werden. Unterschiedliche Arten von Änderungen werden durch spezifische Hervorhebungen dargestellt. Gelöschte Elemente werden durch durchgestrichenen Text und roten Hintergrund gekennzeichnet. Geänderte Elemente werden durch durchgestrichenen Text und einen grünen Hintergrund dargestellt, während hinzugefügte Elemente einen grünen Hintergrund haben.

Wenn in der Delta-Ansicht ein Delta ausgewählt wird, öffnet sich ein Inline-Diff-Editor, der das Delta im Originalformular im Detail anzeigt. Dabei bleibt die ursprüngliche Struktur des Editors erhalten, die Änderungen werden jedoch farblich hervorgehoben. Blaue Markierungen zeigen an, dass etwas geändert wurde.

Eine Fußnote unterhalb des Editors beschreibt aus Gründen der Zugänglichkeit noch einmal, was passiert ist. Bei einer Änderung wird zusätzlich der alte Wert angezeigt, um einen Vergleich zu ermöglichen.

4. Schritt: Inline-Diff-Editor

Um zu verstehen, wie der Inline-Diff-Editor angezeigt werden kann, werfen wir einen Blick auf die technische Architektur einer typischen A12-Applikation, die ein Editor-Formular anzeigt.

In einer A12-Applikation werden die Modelle des Editors und der Anwendung von den Laufzeitkomponenten der Low-Code-Plattform verarbeitet. UI-Modelle werden dabei von sogenannten UI-Engines interpretiert. Diese verwenden UI-Komponenten, auch Widgets genannt, um das User Interface, also z.B. ein Formular, zu erstellen.

Das Formular der Applikation kommuniziert mit einem Backend, um die eingegebenen Daten zu verarbeiten. Der „Delta-Applicator“ ist eine Laufzeitkomponente, die die Deltas auf die ursprünglichen Daten anwendet und daraus einen veränderten Datensatz für die Anzeige im Inline-Diff-Editor erstellt.

Diese Daten werden dann im Formular angezeigt. Anschließend wird das „Highlighting“ angewendet. Hierbei wird ein modifizierter Modellinterpreter genutzt, der neben dem neuen Datensatz auch veränderte Widgets verwendet. Die ursprünglichen Widgets werden teilweise dekoriert, um das Highlighting anzuwenden. Die Entscheidung, welche Widgets hervorgehoben werden, basiert auf den Deltas, unter anderem um die Grundlage für Live-Updates zu schaffen. Durch diese Architektur ist es generell möglich, Änderungen am Wert rückgängig zu machen und das Highlighting entsprechend anzupassen.

Maximierung der Effizienz durch Inline-Diff-Editoren

Der Einsatz von Inline-Diff-Editoren bietet viele Vorteile für jedes Projekt und kann unabhängig von A12 auch in anderen Low-Code-Plattformen eingesetzt werden. Die klare Visualisierung von Modellunterschieden verbessert die Zusammenarbeit im Team, spart Zeit und vermeidet Fehler. Auch weniger technisch versierte Nutzer können die Änderungen zwischen verschiedenen Modellversionen nachvollziehen, effektiver zusammenarbeiten und Entscheidungen effizienter treffen. Insgesamt ermöglichen Inline-Diff-Editoren eine schnellere und präzisere Entwicklung von Projekten in der modellbasierten Softwareentwicklung.