Architektur des UJL-Systems

Die Architektur von Unified JSON Layout (UJL) basiert auf einer klaren Trennung von Inhalt, Struktur und Design, um eine flexible und modular aufgebaute Webgestaltung zu ermöglichen. Inhalte werden in einer UJL-Datei definiert, in der bestimmte Komponenten referenziert sind. Diese Komponenten verkörpern die Struktur und bestimmen, welche Basiselemente unterstützt werden. Die Struktur der Komponenten unterteilt sich in LayoutComponents und AtomicComponents. Während AtomicComponents die kleinsten, grundlegenden Bausteine darstellen, bieten LayoutComponents eine flexible Struktur, in der diese AtomicComponents organisiert und kombiniert werden können.

Die gestalterische Ebene wird über eine Design-Konfigurationsdatei, die UJL-Theme-Datei, definiert, welche Designvorgaben für Farben, Schriftarten und Layout-Stile enthält. Zusammengenommen – UJL-Datei, Komponenten und UJL-Theme-Datei – werden diese Strukturen im Renderer verarbeitet, der das Ergebnis als ContentFrame ausgibt. Der ContentFrame stellt eine eigenständige Ansicht dar, in der alle Elemente konsistent und strukturiert dargestellt werden.

In diesem Kapitel erhältst du detaillierte Einblicke in die geplante Architektur und die zentralen Konzepte, die das UJL-System modular, skalierbar und erweiterbar machen sollen. Die Trennung der drei Kernbereiche und die flexible Struktur sind Schlüsselelemente dieses Konzepts, das darauf abzielt, Entwicklern eine saubere Grundlage für die Umsetzung eigener Ideen und Erweiterungen zu bieten.

2.1 Architektur-Konzept

Die Architektur von Unified JSON Layout (UJL) basiert auf der klaren Trennung von Inhalt, Struktur und Design und ist auf maximale Flexibilität und Modularität ausgelegt. Durch diese Struktur soll UJL an individuelle Anforderungen und unterschiedliche Anwendungsszenarien anpassbar sein und Entwicklern eine anpassungsfähige Grundlage für die Entwicklung und Integration von Weblayouts bieten.

2.1.1 Qualitätsanforderungen

Modularität: Jede Komponente des Systems ist als eigenständiges Modul konzipiert, das isoliert getestet und bei Bedarf erweitert oder ausgetauscht werden kann.
Erweiterbarkeit: UJL ist offen für Erweiterungen, sodass neue Funktionalitäten, Module und Designs nahtlos eingebunden werden können. Die Architektur umfasst eine Plugin-API, mit der Entwickler eigene Module erstellen und registrieren können.
Benutzerfreundlichkeit: Das System soll eine intuitive Benutzererfahrung sowohl für Content-Manager als auch für Entwickler bieten, sodass Anwender Inhalte sicher und einfach bearbeiten können, ohne technische Kenntnisse zu benötigen.
Auf- und Abwärtskompatibilität: UJL-Dateien sind so konzipiert, dass sie sich zwischen verschiedenen Versionen des Systems kompatibel verwenden lassen und auch zukünftige Anpassungen möglich sind.

2.1.2 Zielgruppen

Die Architektur von UJL ist so gestaltet, dass sie den unterschiedlichen Anforderungen der verschiedenen Zielgruppen gerecht wird:

Entwickler: Sie sollen die Möglichkeit haben, UJL in bestehende Webanwendungen zu integrieren, eigene Module und Plugins zu entwickeln und die Flexibilität der Architektur für spezifische Anforderungen zu nutzen.
Designer: Durch die UJL-Theme-Datei können Designer das Corporate Design eines Projekts zentral festlegen, ohne direkten Eingriff in die Struktur- oder Inhaltsdateien. Dies stellt sicher, dass alle Layouts konsistent das festgelegte Design umsetzen.
Content-Manager: Die intuitive Bedienoberfläche ermöglicht Content-Managern, Inhalte zu bearbeiten und neue Layouts modular zusammenzustellen, ohne technische Details oder Design-Aspekte anzupassen.
Konsumenten: Die finale, gerenderte Ansicht – der ContentFrame – gewährleistet eine einheitliche und responsive Darstellung auf allen Endgeräten, sodass das Ergebnis für den Konsumenten ansprechend und zuverlässig ist.

2.1.3 Lösungsstrategie

UJL verfolgt eine mehrschichtige Lösungsstrategie, die folgende zentrale Prinzipien integriert:

Trennung von Struktur, Design und Inhalt: Die klare Trennung dieser drei Bereiche ermöglicht eine effiziente Zusammenarbeit und Zuordnung von Verantwortlichkeiten:
- Struktur: Die Struktur definiert die grundlegenden Layouts und Komponenten, die das UJL-Format zur Verfügung stellt. Diese Bausteine, wie z.B. Slideshow-Module oder Spalten-Layouts, werden als festgelegte Komponenten in der UJL-Datei referenziert. Die Verantwortung für die Struktur liegt bei den Entwicklern und den ursprünglichen Contributorn des Systems, die diese Basis-Komponenten schaffen. Entwickler haben die Möglichkeit, zusätzliche LayoutComponents und AtomicComponents zu entwickeln und das System so zu erweitern.
- Design: Das Design wird zentral vom Designer in der UJL-Theme-Datei festgelegt, die Vorgaben für Farben, Schriften und Layout-Stile enthält. So wird das Corporate Design des Projekts konsequent umgesetzt. Designer greifen üblicherweise über den UJL-Crafter auf die Design-Konfiguration zu, das Laden über eine API wäre aber ebenfalls möglich. Eine entsprechende Umsetzung kann der Entwickler übernehmen.
- Inhalt: Die Inhalte werden vom Content-Manager im UJL-Crafter erstellt und gepflegt. Durch die Verwendung vordefinierter und automatisch responsiver Komponenten kann der Content-Manager Inhalte modular strukturieren, ohne sich um technische Details oder Design-Aspekte kümmern zu müssen.
Open-Source-Philosophie: UJL soll als Open-Source-Projekt frei zugänglich sein, um eine Entwickler-Community für die kontinuierliche Weiterentwicklung und den Austausch von Ideen aufzubauen.
Plattformunabhängigkeit: Durch das offene JSON-Format wird UJL so gestaltet, dass es in verschiedenen Systemen integriert und Inhalte plattformübergreifend genutzt und ausgetauscht werden können.

2.1.4 Bausteinsicht

Das Komponentendiagramm zeigt die Architektur des UJL Renderer- und UJL Crafter-Systems. Der UJL Renderer bildet die Grundlage für die Verarbeitung und Darstellung von Layouts und Inhalten, während der UJL Crafter als umfassendes Gestaltungstool auf den Renderer aufsetzt. Der Crafter kann jedoch auch alternative Renderer nutzen, sofern diese eine kompatible API bieten.

Komponentendiagramm UJL Renderer- und Crafter-System

Beschreibung des Komponentendiagramms

UJL Renderer:
- Der UJL Renderer ist die zentrale Komponente für das Rendering von UJL-Dateien und erzeugt die endgültige Darstellung eines Layouts.
- Er besteht aus folgenden Hauptkomponenten:
  - Validator: Verifiziert die Struktur und Kompatibilität von UJL-Dateien. Der Validator enthält zwei Subkomponenten:
    - Syntaxprüfung: Prüft die syntaktische Korrektheit der UJL-Dateien.
    - Kompatibilitätsprüfung: Überprüft, ob die Version der UJL-Datei mit der aktuellen Systemversion kompatibel ist.
  - Komponenten: Enthält die Bausteine, die zur Darstellung des Layouts verwendet werden. Die Bausteine gliedern sich in:
    - LayoutComponents: Diese Komponenten repräsentieren strukturelle Bausteine, wie z.B. Container oder Spalten-Layouts, die die Grundstruktur eines Layouts bestimmen.
    - AtomicComponents: Dies sind die kleinsten Bausteine, wie Textfelder, Bilder oder Buttons, die innerhalb der LayoutComponents organisiert werden.
- Der UJL Renderer erzeugt aus den UJL-Dateien den ContentFrame, der als das gerenderte Endprodukt aus HTML, CSS und JavaScript besteht und auf verschiedenen Plattformen und Endgeräten verwendet werden kann.
ContentFrame:
- Der ContentFrame ist das Ausgabeformat des UJL Renderers und enthält die vollständig gerenderte Ansicht, bestehend aus HTML, CSS und JavaScript.
- Sollte ein Entwickler eine alternative Rendering-Komponente verwenden, muss diese ebenfalls in der Lage sein, einen ContentFrame zu erzeugen, der die in den UJL-Dateien definierte Struktur und das Design widerspiegelt.
Speicher:
- Die Daten für die UJL-Layouts und die Design-Konfiguration werden in .ujl- und .ujlt-Dateien im Speicher verwaltet.
  - UJL-Datei (.ujl): Enthält die Struktur und die Inhalte eines Layouts.
  - Design-Konfigurationsdatei (.ujlt): Speichert Designvorgaben, wie z.B. Farben, Schriften und Abstände.
- Der UJL Crafter und der Renderer greifen auf diese Dateien zu, um Daten zu laden, zu speichern und zu validieren.
UJL Crafter:
- Der UJL Crafter dient als umfassendes Gestaltungstool für Content-Manager, Designer und Entwickler und bietet eine zentrale Schnittstelle zur Erstellung und Bearbeitung von Layouts und Inhalten.
- Der Editor im Crafter ist die Hauptschnittstelle für Anwender, die Layouts gestalten und Inhalte hinzufügen möchten.
- Der Crafter nutzt die API des UJL Renderers und kann diese bei Bedarf erweitern, um Entwicklern zusätzliche Funktionen bereitzustellen. Die API des Crafters fungiert als erweiterte Schnittstelle, die Entwicklern auch die Möglichkeit bietet, neue Komponenten und Funktionen zu integrieren.
Editor:
- Der Editor ist die interaktive Komponente des UJL Crafter, die Anwendern eine visuelle Schnittstelle bietet, um Layouts zu gestalten und Inhalte einzufügen.
- Durch die Verbindung zur API des Renderers kann der Editor Änderungen in Echtzeit anzeigen, sodass Content-Manager und Designer sofortiges Feedback zu ihren Anpassungen erhalten.

2.1.5 Laufzeitsicht

In der Laufzeitsicht betrachten wir die Abläufe innerhalb des UJL-Systems bei typischen Anwendungsfällen. Zwei zentrale Szenarien stehen dabei im Fokus: das Bearbeiten einer .ujl-Datei sowie das Rendern und Anzeigen der .ujl-Datei in einer Web-Ansicht. Diese Szenarien verdeutlichen, wie die verschiedenen Systemkomponenten miteinander interagieren, um die gewünschten Funktionen bereitzustellen.

Beispiel 1: Bearbeitung einer `.ujl`-Datei

Laufzeitsicht: Bearbeitung einer .ujl-Datei

In diesem Szenario fügt der Content-Manager eine Text-Komponente innerhalb eines Containers hinzu. Der Ablauf zeigt, wie der UJL Crafter (Editor), der Renderer und der Speicher zusammenarbeiten, um die Änderungen vorzunehmen und eine aktualisierte Ansicht anzuzeigen:

Der Content-Manager öffnet eine .ujl-Datei im UJL Crafter (Editor). Der Editor lädt die Datei aus dem Speicher.
Der Editor leitet die geladene Datei an den Renderer weiter, der sie validiert und eine initiale Ansicht erzeugt.
Der Content-Manager fügt eine neue Text-Komponente innerhalb eines Containers hinzu. Der Editor sorgt intern dafür, dass alle Änderungen valides UJL bleiben.
Der Editor übergibt die Änderungen an den Renderer, der die aktualisierte Ansicht generiert und an den Editor zur Anzeige zurückgibt.
Abschließend speichert der Editor die aktualisierte .ujl-Datei im Speicher.

Dieses Diagramm zeigt die Zusammenarbeit zwischen dem Content-Manager, dem Editor und dem Renderer zur Bearbeitung einer Datei und zum Speichern der Änderungen.

Beispiel 2: Rendern und Anzeigen einer `.ujl`-Datei in einer Web-Ansicht

Laufzeitsicht: Rendern einer .ujl-Datei

Das zweite Beispiel veranschaulicht den Ablauf, wenn eine .ujl-Datei für die Anzeige in einer Web-Ansicht gerendert wird. Dieser Ablauf zeigt, wie der Renderer die Datei verarbeitet und als ContentFrame (HTML/CSS/JS) bereitstellt:

Der UJL Renderer lädt die .ujl-Datei mit Layout- und Inhaltsdaten aus dem Speicher.
Zusätzlich lädt der Renderer die Design-Konfigurationsdatei (.ujlt), um die erforderlichen Styles anzuwenden.
Der Renderer verarbeitet die referenzierten LayoutComponents und AtomicComponents, kombiniert sie mit den Designeinstellungen und erzeugt den finalen ContentFrame.
Der ContentFrame wird dann an die Web-Ansicht weitergeleitet und dort zur Anzeige gebracht.

2.2 Beispielcodes

In diesem Abschnitt werden einige grundlegende Beispielcodes vorgestellt, um die Funktionalitäten des UJL-Systems zu veranschaulichen. Die Beispiele decken verschiedene Bereiche ab, wie das Definieren von Layouts und Inhalten, die Nutzung der Design-Konfigurationsdatei sowie die Integration des Editors und Renderers in eine Webanwendung. Auch die API für erweiterbare Module wird kurz dargestellt.

2.2.1 .ujl-Datei: Struktur und Inhalt

Die .ujl-Datei ist die zentrale Datei im UJL-System und beschreibt das Layout und den Inhalt der Seite in einem strukturierten JSON-Format. Die Datei referenziert die LayoutComponents und AtomicComponents und definiert die Inhalte innerhalb der vordefinierten Struktur.

{
  "layout": {
    "type": "container",
    "id": "main-container",
    "components": [
      {
        "type": "header",
        "content": {
          "text": "Willkommen zu unserem Produktkatalog"
        }
      },
      {
        "type": "grid",
        "id": "product-grid",
        "components": [
          {
            "type": "product-card",
            "content": {
              "image": "img/vacuum1.jpg",
              "title": "Staubsauger Model X200",
              "description": "Der leistungsstarke und effiziente Haushaltshelfer."
            }
          },
          {
            "type": "product-card",
            "content": {
              "image": "img/vacuum2.jpg",
              "title": "Staubsauger Model X300",
              "description": "Unser leises Topmodell mit innovativer Filtertechnologie."
            }
          }
        ]
      }
    ]
  }
}

In diesem Beispiel wird ein einfacher Produktkatalog definiert, der aus einem Haupt-Container (container) mit einer Header-Komponente und einem Grid mit zwei product-card-Komponenten besteht.

2.2.2 .ujlt: Design-Konfigurationsdatei

Die .ujlt-Datei enthält Designvorgaben, die das Corporate Design einheitlich und konsistent in allen Layouts umsetzen. Die Datei beschreibt Vorgaben für Farben, Schriftarten, Abstände und weitere visuelle Details, die die Designer festlegen.

{
  "design": {
    "colors": {
      "primary": "#0044cc",
      "secondary": "#00cc88",
      "background": "#ffffff",
      "text": "#333333"
    },
    "fonts": {
      "main": "Arial, sans-serif",
      "header": "Georgia, serif"
    },
    "spacing": {
      "padding": "10px",
      "margin": "15px"
    }
  }
}

In diesem Beispiel definiert die .ujlt Datei Primär- und Sekundärfarben, die Schriftarten für Haupt- und Headertexte sowie die Standardwerte für Padding und Margin, die in allen Komponenten verwendet werden.

2.2.3 Integration des Editors (UJL Crafter) in eine Web-Anwendung

Der UJL Crafter (Editor) kann über npm in eine Web-Anwendung integriert werden, sodass Content-Manager Inhalte direkt auf der Seite bearbeiten können. Hier ist ein Beispielcode zur Integration:

// Installation via npm:
// npm install ujlcrafter

import UJLCrafter from 'ujlcrafter';

// Initialisieren des Editors
const crafter = new UJLCrafter({
  target: document.getElementById('editor-container'),
  data: {
    layoutFile: 'path/to/layout.ujl',
    config: 'path/to/design.ujlt'
  }
});

// Funktion zur Speicherung
crafter.on('save', (updatedData) => {
  fetch('/api/save', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(updatedData)
  }).then(response => console.log('Änderungen gespeichert.'));
});

Dieser Code integriert den UJL Crafter in eine Web-Anwendung. Der Editor wird im editor-container-Element der HTML-Seite angezeigt und bietet eine Speichermethode, um die aktualisierten .ujl-Daten über eine API zu speichern.

2.2.4 Verwendung des Renderers zur Ausgabe als HTML/CSS/JS

Der Renderer wird benötigt, um die .ujl- und .ujlt-Dateien in HTML/CSS/JS zu konvertieren und die Webansicht anzuzeigen. Hier ist ein Beispiel für die Verwendung des Renderers:

// Installation via npm:
// npm install ujlcrafter-renderer

import UJLRenderer from 'ujlcrafter-renderer';

const renderer = new UJLRenderer({
  layoutFile: 'path/to/layout.ujl',
  config: 'path/to/design.ujlt',
  target: document.getElementById('view-container')
});

// Rendern der Ansicht
renderer.render().then(() => console.log('ContentFrame erfolgreich gerendert.'));

Dieser Code zeigt, wie der UJL Renderer in einer Web-Anwendung verwendet wird, um die Layout- und Design-Dateien in ein fertiges HTML/CSS/JS-Bundle zu konvertieren und in der view-container-Ansicht zu rendern.

2.2.5 Erweiterung über die API

Die API des UJL Crafter ermöglicht Entwicklern, eigene Komponenten hinzuzufügen und den Funktionsumfang von UJL zu erweitern. Hier ist ein Beispiel, wie eine neue carousel-Komponente registriert wird:

// Registrierung einer benutzerdefinierten Komponente über die API des Editors
crafter.registerComponent('carousel', {
  render: ({ images }) => {
    const container = document.createElement('div');
    container.classList.add('carousel');
    images.forEach(imgSrc => {
      const img = document.createElement('img');
      img.src = imgSrc;
      container.appendChild(img);
    });
    return container;
  },
  schema: {
    images: { type: 'array', items: { type: 'string' } }
  }
});

Mit diesem Code wird eine neue carousel-Komponente registriert, die Bilder in einem Karussell anzeigt. Entwickler können die Struktur und das Verhalten der Komponente selbst definieren und die Komponente in der .ujl-Datei referenzieren.

2.3 Zukunftsvisionen

Die Architektur des UJL-Systems ist für Erweiterungen konzipiert und bietet spannende Perspektiven für die Zukunft, insbesondere durch die LLM-Readiness und die Unterstützung von Mehrsprachigkeit.

2.3.1 LLM-Integration

UJL ist LLM-Ready – das JSON-basierte Format macht es optimal für den Einsatz von Large Language Models im Editor, um Inhalte direkt und kontextbezogen zu generieren. Die klare Struktur des JSON-Formats ermöglicht es den LLMs, gezielt Textvorschläge und Inhaltsideen für spezifische Bereiche des Layouts anzubieten, ohne sich mit den technischen Details der Darstellung (wie HTML oder CSS) beschäftigen zu müssen.

Mögliche Einsatzbereiche für LLMs im Editor sind:

Automatische Inhaltsgenerierung: LLMs könnten direkt im Editor eingebunden werden, um den Content-Manager bei der Erstellung von Texten, Beschreibungen und Überschriften zu unterstützen.
Modulvorschläge: Basierend auf den bestehenden Layouts und Inhalten könnte das System passende Layout-Module empfehlen, die für eine intuitive Seitenerweiterung hilfreich sind.

2.3.2 Mehrsprachigkeit und Internationalisierung

Eine mehrsprachige Unterstützung würde das System für globale Anwender öffnen:

Mehrsprachige Inhalte: Das UJL-Format könnte sprachspezifische Inhalte speichern, um nahtlose Übersetzungen zu ermöglichen.
Automatische Übersetzung: Über API-Anbindungen könnten Inhalte automatisch übersetzt werden, was besonders bei mehrsprachigen Projekten wertvoll ist.

Diese Erweiterungen bieten spannende Möglichkeiten, UJL zu einem global einsetzbaren, innovativen Webgestaltungs-Tool weiterzuentwickeln.