ThirdParty Kombination

Kryzo wurde entwickelt, um sich flexibel in bestehende und neue Webanwendungen integrieren zu lassen. Durch den modularen Aufbau und die dynamische Verarbeitung von Inhalten ergeben sich jedoch einige technische Besonderheiten, die bei der Implementierung berücksichtigt werden sollten. Die nachfolgenden Hinweise beschreiben empfohlene Vorgehensweisen, typische Integrationsszenarien sowie potenzielle Stolperfallen bei der Verwendung der Engine. Sie richten sich insbesondere an Entwickler, die Kryzo in bestehende Projekte integrieren oder die Engine mit eigenen Modulen, Third-Party-Bibliotheken und individuellen Initialisierungsabläufen kombinieren möchten.

Verwendung von Custom Elementen

Kryzo vereinfacht die Entwicklung nativer Custom Elements und übernimmt dabei wesentliche Aufgaben wie Registrierung, Rendering, Event-Verwaltung und Attributverarbeitung. Die über den Custom Elements Handler registrierten Komponenten werden vollständig durch die Engine verwaltet und sollten daher ausschließlich über die bereitgestellte API erstellt werden.

Wichtig: Besteht für ein Custom Element bereits eine eigene Klasse auf Basis von HTMLElement oder wurde das Element bereits über customElements.define() registriert, darf dieses Element nicht zusätzlich über den Kryzo Custom Elements Handler verarbeitet oder registriert werden.

Eine Kombination beider Ansätze kann zu unerwartetem Verhalten führen, beispielsweise:

doppelte Registrierungsversuche innerhalb der CustomElementRegistry
konkurrierende Lifecycle-Methoden
Konflikte bei Attributänderungen
doppelte Event-Verarbeitung
inkonsistente Zustände innerhalb der Komponente

Grundsätzlich sollte pro Custom Element immer nur ein Registrierungs- und Verwaltungssystem verwendet werden. Entweder wird die Komponente vollständig als native Klasse implementiert oder vollständig über den Kryzo Custom Elements Handler verwaltet.

Verwendung des CustomElement Helpers

Der CustomElement Helper ist darauf ausgelegt, die Verarbeitung und Erweiterung von DOM-Strukturen innerhalb der Anwendung zu übernehmen. Für eine möglichst stabile und vorhersehbare Initialisierung sollte er grundsätzlich als letzter Verarbeitungsschritt ausgeführt werden, nachdem alle relevanten Inhalte, Module und Abhängigkeiten geladen wurden. In neu entwickelten Anwendungen stellt dies in der Regel kein Problem dar. Bei der Integration in bestehende Projekte oder Legacy-Anwendungen ist jedoch besondere Vorsicht geboten, insbesondere wenn bereits eigene JavaScript-Logik direkt im HTML-Dokument vorhanden ist.

Wird der CustomElement Helper zu früh ausgeführt, können unerwünschte Nebeneffekte auftreten:

Kollisionen mit bereits vorhandenen Skriptlogiken
Verlorene oder überschriebene Event-Listener
Unterbrochene Initialisierungsabläufe bestehender Komponenten
Fehlerhafte Zustände durch konkurrierende DOM-Manipulationen
Unvorhersehbares Verhalten bei Third-Party-Bibliotheken

Insbesondere ältere Anwendungen enthalten häufig Inline-Skripte oder Initialisierungsroutinen, die davon ausgehen, dass bestimmte DOM-Strukturen unverändert vorhanden bleiben. Werden diese Elemente bereits durch den CustomElement Helper verarbeitet oder ersetzt, bevor die bestehende Logik abgeschlossen ist, kann dies zu Fehlern oder Funktionsverlust führen.

Empfehlung für bestehende Anwendungen

Wenn Kryzo in ein bereits vorhandenes Projekt integriert wird und nicht sichergestellt werden kann, dass sämtliche Skripte vor der Verarbeitung abgeschlossen sind, sollte der CustomElement Helper als eigenständiges Script unmittelbar vor dem schließenden </body>-Tag eingebunden werden.

Dadurch wird gewährleistet, dass:

sämtliche Inline-Skripte bereits ausgeführt wurden,
vorhandene Event-Registrierungen abgeschlossen sind,
Third-Party-Bibliotheken vollständig initialisiert wurden,
die DOM-Struktur ihren finalen Zustand erreicht hat,
die Verarbeitung durch den CustomElement Helper keine bestehenden Abläufe beeinträchtigt.

Dieser Ansatz bietet die höchste Kompatibilität bei der nachträglichen Integration von Kryzo in bestehende Anwendungen und minimiert das Risiko von Konflikten mit bereits vorhandenem JavaScript-Code.