Hybrid Structured Editing: Structures for Tools, Text for Users

Der Artikel stellt „Hybrid Structured Editing" vor, einen Ansatz, der Tool-Entwicklern strukturelle Garantien für die Code-Analyse bietet, während Benutzern gleichzeitig eine vertraute und konsistente Textbearbeitungsschnittstelle erhalten bleibt.

Das Wesentliche

Das Problem: Der Konflikt zwischen Text und Werkzeugen

Stell dir vor, du bist ein Architekt, der an einem riesigen, komplexen Haus (dem Computerprogramm) arbeitet.

• Der Text-Editor ist wie ein Notizblock, auf dem du die Baupläne in reiner Schrift notierst. Das ist vertraut und einfach.
• Die Programmierwerkzeuge sind wie spezialisierte Helfer, die dir sagen: „Achtung, hier ist eine statische Decke!" oder „Hier fließt gerade Wasser durch dieses Rohr!"

Das Problem bisher war: Die Helfer konnten nicht direkt am Notizblock arbeiten. Sie mussten das Haus erst aus dem Text „herauslesen", was oft schiefging, wenn du einen Buchstaben ändertest. Wenn du einen Strich im Text löschtest, verlor der Helfer den Überblick, wo genau die statische Decke war. Entweder man nutzte reine Textbearbeitung (die Helfer waren blind) oder reine Struktur-Bearbeitung (die Helfer sahen alles, aber der Text war so fremd, dass man ihn kaum noch lesen konnte).

Die Lösung: „Hybrid Structured Editing" (Hybrides Strukturiertes Bearbeiten)

Die Autoren (Tom Beckmann und sein Team) haben eine geniale Lösung erfunden, die sie Hybrid Structured Editing (HybridSE) nennen.

Stell dir das wie einen magischen Notizblock vor, der zwei Gesichter hat:

1. Für dich (den Nutzer): Es sieht und fühlt sich genau wie ein ganz normaler Texteditor an. Du kannst Buchstaben tippen, löschen und verschieben. Du musst nichts Neues lernen.
2. Für die Werkzeuge (die Helfer): Im Hintergrund weiß das System genau, was ein „Rohr", eine „Decke" oder ein „Fenster" ist. Es kennt die Struktur des Hauses, auch wenn du nur Buchstaben schreibst.

Wie funktioniert das Magische?

Das System nutzt drei Haupttricks, die wir uns wie folgt vorstellen können:

1. Der unsichtbare Kleber (Struktur-Tracking)
Wenn du einen Buchstaben änderst, versuchen normale Werkzeuge oft zu raten, wo ihr Platz ist. HybridSE hingegen hat einen unsichtbaren Kleber.

• Analogie: Stell dir vor, du klebst ein kleines Etikett („Ich bin der Wasserhahn") auf ein Rohr. Wenn du das Rohr verschiebst oder die Farbe änderst, bleibt das Etikett fest am Rohr kleben.
• In der Praxis: Das System verfolgt die Bauteile (die Struktur) über jede Änderung hinweg. Wenn du Text änderst, weiß das Werkzeug immer noch genau: „Ah, das ist immer noch mein Wasserhahn, auch wenn du jetzt ein Komma davor gesetzt hast."

2. Die magischen Fenster (Verschachtelte Editoren)
Manchmal willst du einen kleinen Teil des Plans separat bearbeiten, ohne den ganzen Rest zu sehen.

• Analogie: Stell dir vor, du hast ein riesiges Bauplan-Poster. HybridSE erlaubt es dir, ein kleines, vergrößerndes Fenster über einen bestimmten Bereich zu legen. In diesem Fenster kannst du den Text bearbeiten, aber das Fenster weiß genau, wie viel Einrückung (Abstand) nötig ist, damit es nicht schief aussieht, wenn du es aus dem Kontext reißt.
• In der Praxis: Du kannst einen kleinen Code-Abschnitt in einem eigenen kleinen Editor-Fenster bearbeiten, das sich nahtlos in den großen Text einfügt.

3. Der Sicherheitsgurt (Constraints & Transaktionen)
Was passiert, wenn du etwas tust, das das Werkzeug zerstören würde?

• Analogie: Stell dir vor, du versuchst, eine tragende Wand wegzustreichen. Dein Sicherheitsgurt (das System) sagt: „Stopp! Wenn du das tust, fällt das Haus zusammen."
• In der Praxis: Wenn du eine Änderung machst, die die Regeln eines Werkzeugs verletzt (z. B. du löschst den Code, den ein Werkzeug überwacht), hält das System die Änderung kurz an. Es zeigt dir eine Warnung und fragt: „Willst du das wirklich? Dann verschwindet das Werkzeug." Oder es wartet, bis du die Änderung korrigierst, damit das Werkzeug sicher bleibt.

Was bringt das konkret?

Das Papier zeigt Beispiele, wie dieses System neue, coole Werkzeuge ermöglicht:

• Live-Überwachung: Du kannst einen kleinen „Watch"-Knopf direkt neben eine Zahl in deinem Code setzen. Wenn das Programm läuft, siehst du dort live, was die Zahl tut, ohne dass du das Fenster wechseln musst.
• Sprachen mischen: Du kannst SQL (Datenbank-Sprache) direkt in JavaScript schreiben. Das System erkennt: „Aha, hier ist SQL!" und bietet dir einen speziellen Editor für SQL an, der die Anführungszeichen automatisch richtig setzt.
• Visuelle Browser: Anstatt eine lange Liste von Code zu scrollen, kannst du das Programm wie ein Menübaum durchklicken, wobei jeder Teil trotzdem als normaler Text bearbeitbar bleibt.

Fazit

Die Idee ist einfach: Wir wollen das Beste aus beiden Welten.
Wir wollen die Vertrautheit und Einfachheit des Schreibens (Text), aber die Intelligenz und Stabilität von Bauplänen (Struktur).

Hybrid Structured Editing ist wie ein Übersetzer, der zwischen dem, was du schreibst (Text), und dem, was das Computer-Programm eigentlich ist (Struktur), vermittelt. So können Werkzeuge smart sein, ohne dass du als Nutzer komplizierte neue Regeln lernen musst. Es macht das Programmieren sicherer, übersichtlicher und macht die Werkzeuge zu echten Partnern am Schreibtisch, statt zu störenden Zusatzgeräten.

Technische Zusammenfassung

Hier ist eine detaillierte technische Zusammenfassung des Papers „Hybrid Structured Editing: Structures for Tools, Text for Users" von Tom Beckmann et al. auf Deutsch.

1. Problemstellung

Moderne Entwicklungsumgebungen (IDEs) bieten zahlreiche Werkzeuge (z. B. Tooltips, Debugger, visuelle Designer), die den Programmierern helfen, Code zu verstehen. Ein zentrales Problem besteht jedoch darin, dass diese Werkzeuge oft nur lose mit dem textuellen Quellcode verbunden sind. Um Werkzeuge nahtlos in den Code zu integrieren („code-centric tools"), müssen drei Haupt-Herausforderungen bewältigt werden:

1. Struktur-Tracking (Strukturerkennung): Werkzeuge müssen die Struktur des Programm-Abstraktionsbaums (AST) über Textänderungen hinweg verfolgen können. Bei rein textbasierten Editoren ist dies schwierig, da Änderungen (Einfügen, Löschen, Umbenennung) die Textbereiche von AST-Knoten verschieben oder ungültig machen können, insbesondere bei Syntaxfehlern.
2. Verschachtelte Editoren (Nested Editors): Werkzeuge müssen in der Lage sein, eigene Editoren für Code-Fragmente zu hosten (z. B. ein SQL-Editor innerhalb eines JavaScript-Strings). Dies erfordert eine konsistente Navigation und Bearbeitung, selbst wenn Fragmente tief verschachtelt sind oder nur einen Teil einer Zeile abdecken.
3. Strukturierter Zugriff (Structured Access): Werkzeuge müssen statische und dynamische Informationen (z. B. Laufzeitwerte) auf AST-Knoten abbilden und diese Strukturen bearbeiten können, ohne die syntaktische Korrektheit des Codes zu verletzen (z. B. korrekte Klammern, Escape-Zeichen).

Herkömmliche strukturierte Editoren lösen das Tracking-Problem, sind aber für Nutzer oft ungewohnt und schwer zu bedienen. Reine Texteditoren bieten keine strukturellen Garantien.

2. Methodik: Hybrid Structured Editing (HybridSE)

Die Autoren schlagen Hybrid Structured Editing (HybridSE) vor, einen Ansatz, der die Vorteile beider Welten kombiniert:

• Für den Nutzer: Ein vertrauter, konsistenter Texteditor.
• Für den Werkzeugentwickler: Garantierte strukturelle Zugriffe und Manipulationsmöglichkeiten auf dem AST.

Kernkonzepte:

• Selektive Strukturelle Garantien: HybridSE garantiert die Integrität von AST-Knoten nur dort, wo ein Werkzeug eine explizite Einschränkung (Constraint) definiert hat. Ansonsten wird der Editor weiterhin als Texteditor behandelt.
• Strukturelles Differenzieren (Diffing): Anstatt den AST bei jeder Eingabe neu zu parsen, nutzt HybridSE einen strukturellen Diffing-Algorithmus (basierend auf truediff). Dieser berechnet ein „Edit-Skript" (Operationen wie Load, Attach, Detach, Update), das die Änderungen vom alten zum neuen AST beschreibt. Dies erhält die Identität von Knoten über Textänderungen hinweg.
• Transaktionsmechanismus: Wenn eine Textänderung eine Constraint eines Werkzeugs verletzen würde (z. B. ein Werkzeug verschwindet durch eine Syntaxänderung), wird die Änderung nicht sofort auf den AST angewendet. Stattdessen wird ein „frozen" (eingefrorener) Zustand beibehalten, die Textänderung im Editor visuell angezeigt, aber als „ausstehend" (pending) markiert. Der Nutzer kann dann fortfahren (bis die Constraint wieder erfüllt ist), die Änderung erzwingen (Werkzeug wird entfernt) oder rückgängig machen.
• Fragments (Fragmente): Um verschachtelte Editoren zu ermöglichen, definiert HybridSE „Fragments". Diese zeigen den Textbereich eines oder mehrerer AST-Knoten in einem vollwertigen Editor-Widget an. Fragmente normalisieren Einrückungen und behandeln Whitespace intelligent, um die visuelle Darstellung unabhängig vom Kontext im Hauptcode zu halten.
• Struktur-basierte Schnittstelle für Editoren: Werkzeuge interagieren nicht direkt mit Text-Strings, sondern über eine API, die strukturelle Operationen anbietet (insert, delete, replaceWith, wrapWith). Diese API kümmert sich automatisch um sprachspezifische Details wie Trennzeichen, Escape-Sequenzen und Klammern.

3. Schlüsselbeiträge

1. Konzeptuelles Framework: Ein Modell zur Definition von Werkzeugen in fünf Schritten:
   • Match: Abfrage von AST-Strukturen.
   • Extract: Gewinnung von Daten (statisch/dynamisch).
   • Constraints: Definition von Regeln, die der AST einhalten muss.
   • View: Darstellung der Benutzeroberfläche (kann Fragmente enthalten).
   • Interactions: Definition von Callbacks für Benutzeraktionen.
2. Implementierung: Eine Referenzimplementierung für CodeMirror v6, Lively 4 und Squeak/Smalltalk. Die Implementierung nutzt Tree-sitter für das Parsen und Differenzieren.
3. Fallstudien (Case Studies):
   • Platzhalter-Texte: Ein Werkzeug, das Eingabefelder für fehlenden Code anzeigt, die beim Tippen automatisch in den AST integriert werden.
   • Sprachkomposition: Ein SQL-Editor, der nahtlos in einen JavaScript-String eingebettet ist. HybridSE übernimmt das Escaping von Anführungszeichen automatisch.
   • Strukturierter Code-Browser: Eine browserartige Ansicht von JavaScript-Dateien, die Deklarationen isoliert anzeigt und bearbeitbar macht, ohne dass benachbarte Deklarationen durch Eingaben „mitgezogen" werden.
   • Livelits-UI: Reimplementierung von UI-Komponenten (Slider, Farbwähler), die Laufzeitwerte direkt im Code anzeigen und persistent speichern.

4. Ergebnisse

• Effektivität: Die Fallstudien zeigen, dass HybridSE komplexe Werkzeuge ermöglicht, die bisher nur in rein strukturierten Editoren oder mit enormem Aufwand in Texteditoren realisierbar waren.
• Benutzerfreundlichkeit: Nutzer können weiterhin einen Texteditor verwenden, profitieren aber von strukturellen Garantien. Die Interaktionen bleiben vertraut.
• Technische Machbarkeit: Die Integration in bestehende Editoren (wie CodeMirror) ist möglich, erfordert jedoch Anpassungen an der Editor-API, um visuelle Widgets in Textzeilen einbetten zu können.
• Performance: Es wurde festgestellt, dass das Matching von Abfragen über große Dateien die Performance beeinträchtigen kann, insbesondere wenn sich Zeilenhöhen ändern (was Scroll-Optimierungen erschwert).

5. Bedeutung und Ausblick

HybridSE stellt einen Paradigmenwechsel dar, der die Lücke zwischen textbasierten Editoren und strukturierten Editoren schließt.

• Für Werkzeugentwickler: Es reduziert die Komplexität erheblich, da sie sich nicht um das Tracking von Textbereichen oder das manuelle Parsen kümmern müssen. Sie arbeiten auf einer höheren Abstraktionsebene (AST).
• Für die Ökosysteme: Es ermöglicht die Erweiterung bestehender Text-Ökosysteme um leistungsfähige, kontextsensitive Werkzeuge, ohne dass Programmierer auf rein strukturierte Editoren (wie MPS) umsteigen müssen, die oft eine eigene Sprach-Infrastruktur erfordern.
• Zukunft: Die Autoren sehen Potenzial in der Integration mit Language Server Protocols (LSP) für semantische Informationen und in der Verbesserung der Usability (z. B. subtilere Benachrichtigungen bei Constraint-Verletzungen).

Zusammenfassend bietet HybridSE einen robusten Mechanismus, um Werkzeuge sicher und konsistent in textbasierte Entwicklungsumgebungen zu integrieren, indem es die Struktur des Codes für Maschinen (Werkzeuge) und die Textdarstellung für Menschen (Nutzer) gleichzeitig optimiert.