Kryzo
Modulare Engine zur Erstellung und Erweiterung von Webanwendungen. Unterstützt flexible Architekturen und ermöglicht UI-Layouts ohne Framework-Abhängigkeiten.
Leistungsstarke und erweiterbare Engine für das moderne Web. Erstelle performante Anwendungen, lade nur die tatsächlich
benötigten Funktionen und kombiniere modulare Bausteine zu individuellen Benutzeroberflächen und Architekturen.
CC BY-SA Lizenz:
Der Urheber muss genannt werden. Modifizierte Versionen müssen unter derselben Lizenz stehen.
Die kommerzielle Nutzung ist erlaubt.
Currently v2.0.2 · Download full package ( ~100 kByte)
Self-Hosting & Deployment
Die Engine ist vollständig für Self-Hosting ausgelegt und kann ohne externe Abhängigkeiten in jede Webanwendung integriert werden. Alle benötigten Dateien werden statisch ausgeliefert und können über ein eigenes Hosting-Setup, CDN oder Build-System bereitgestellt werden. Die Architektur ist bewusst entkoppelt gehalten, sodass keine Laufzeitbindung an Drittanbieter oder externe Services besteht. Dadurch bleibt die volle Kontrolle über Versionierung, Deployment und Performance beim Entwickler.
Engine Setup & Bootstrap
Die Engine wird direkt in die Webanwendung eingebunden und benötigt lediglich eine minimale Bootstrapping-Schicht am Anfang der Anwendung im Head Tag. Die Initialisierung erfolgt über ein kleines Setup-Script, das sowohl die Import-Map für modulare Pfade als auch den Einstiegspunkt der Anwendung registriert. Content Security Policy (CSP) Falls eine Content Security Policy aktiv ist, müssen alle dynamisch injizierten Script-Elemente mit einem gültigen nonce-Attribut versehen werden.
CSP Konformität
Kryzo wurde von Grund auf CSP-konform entwickelt. Die Engine verzichtet vollständig auf `unsafe-inline` und `unsafe-eval`, sodass du eine strikte Content Security Policy ohne Kompromisse einsetzen kannst. Sämtliche Module werden über die Import Map als ES-Module geladen, Styles über Constructable Stylesheets – beide Mechanismen sind von Natur aus CSP-konform und erfordern keinerlei Ausnahmen in deiner Sicherheitskonfiguration.
HTTP Observatory: diese Webseite prüfen
Produktionsreife Beispielkonfiguration in PHP
$nonce = base64_encode(random_bytes(16));
$csp = implode("; ", [
"default-src 'self' data: blob:",
"script-src 'self'",
"style-src 'self'",
"img-src 'self' data: blob:",
"connect-src 'self' https: wss: blob: data:",
"object-src 'none'",
"base-uri 'self'",
"media-src 'self' blob:",
"frame-ancestors 'self'",
"form-action 'self'"
]);
header("Content-Security-Policy: $csp");
header("X-Content-Type-Options: nosniff");
header("X-Frame-Options: DENY");
header("Strict-Transport-Security: max-age=31536000; includeSubDomains; preload");
header("Cross-Origin-Resource-Policy: same-origin");
header("Referrer-Policy: strict-origin-when-cross-origin");
Event Interceptor
Die Verwendung ist ausschließlich erforderlich, wenn Drittanbieter-Bibliotheken oder bestehende Anwendungsteile
eigene JavaScript-Events registrieren und diese nicht über die Kryzo-Engine verwaltet werden. Dies betrifft
insbesondere direkt gebundene DOM-Events ( `addEventListener` ) oder Skripte, die auf bestimmte Initialisierungs-
und Lebenszyklen angewiesen sind.
<script src="./assets/build/event-interceptor.js"></script>
Kryzo integrieren
Die Import Map wird für die Auflösung der Kryzo-Module benötigt und kann darüber hinaus um eigene Module oder Bibliotheken erweitert werden.
In produktiven Anwendungen empfiehlt es sich, die Import Map serverseitig und dynamisch zu erzeugen, um Pfade und Versionen zentral verwalten zu können.
Die Kryzo-Engine wird zur Laufzeit als ES-Modul dynamisch in den <head> der Anwendung eingebunden.
Bei Verwendung einer Content Security Policy (CSP) muss dem erzeugten <script>-Element ein gültiges nonce-Attribut zugewiesen
werden, damit die dynamische Einbindung von der Sicherheitsrichtlinie zugelassen wird.
/*
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
WICHTIG: Die ImportMap geht immer vom Webroot aus!
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
Beispiel:
Projekt: "domain.de/projekte/projekt01",
Kryzo global: "domain.de/projekte/assets",
dann ist der Pfad nicht "../assets/build/modules/"
sondern "./projekte/assets/build/modules/"
*/
Object.assign(document.head.appendChild(document.createElement('script')), {
type: 'importmap',
innerHTML: JSON.stringify({
imports: {
'kryzo/': './assets/build/modules/',
'webroot/': './',
}
})
});
/*
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
KRYZO ENGINE EINBINDEN
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
*/
Object.assign(document.head.appendChild(document.createElement('script')), {
type: 'module',
src: 'assets/build/kryzo.js' // Pfad an Speicherort anpassen
});
Einbindung via do26.de CDN Server
Dies sollte nur für Development verwendet werden, im Produktiveinsatz mit Self Hosting. Andernfalls sollten zwingend die aktuellen DSGVO- und Telemedienbestimmungen beachtet werden, wenn der Einsatz im europäischem Raum, speziell in Deutschland erfolgt.
<link rel="stylesheet" type="text/css" href="//kryzo-cdn.do26.de/min.css">
<script src="//kryzo-cdn.do26.de/min.js"></script>
LayoutShift "Flickering" verhindern
Nicht alle Browser rendern Kryzo mit der erforderlichen Geschwindigkeit für eine saubere Initialisierung. In solchen Fällen kann es zu sichtbaren
Layout- oder Rendering-Effekten während des Ladeprozesses kommen. Um dies zu vermeiden, kann das HTML initial über CSS mit visibility: hidden
ausgeblendet werden, bis die Engine vollständig initialisiert ist. Dadurch wird sichergestellt, dass die Anwendung erst sichtbar wird, wenn alle
relevanten Prozesse abgeschlossen sind und der finale UI-Zustand stabil gerendert wurde.
html{ visibility: hidden; }
Vor dem Schließen des <body>-Tags wird diese zuvor gesetzte Einschränkung wieder entfernt. Dadurch wird sichergestellt, dass alles dann
sichtbar gemacht wird, wenn alle Initialisierungs- und Rendering-Prozesse abgeschlossen sind und sich der DOM in einem stabilen Zustand befindet.
/*
Zwei Frames abwarten, um sicherzustellen, das alles
geladen und gerendert wurde
*/
requestAnimationFrame(() =>{
requestAnimationFrame(() =>{
document.documentElement.style.visibility = 'visible';
});
});
Initialisierung & Lifecycle (kryzo:ready)
Die Kryzo Engine verzichtet bewusst auf klassische „Document Ready“-Mechanismen wie DOMContentLoaded oder Framework-spezifische Boot-Sequenzen. Stattdessen stellt sie ein eigenes Lifecycle-Event bereit, das den Zeitpunkt markiert, an dem die Engine vollständig initialisiert und einsatzbereit ist. Sobald alle Kernmodule geladen und registriert sind, wird das Event kryzo:ready ausgelöst. Ab diesem Zeitpunkt können sämtliche Engine-Funktionen sicher verwendet werden. Dadurch bleibt die Engine modular, performant und lädt ausschließlich die tatsächlich benötigten Funktionalitäten.
document.addEventListener('kryzo:ready', ({ detail: { ... } }) => {
/*
Die Kryzo Funktionen können nun genutzt werden
In "detail" müssen die zu verwendeten Module angegeben werden
Mögliche Angaben ( vollständiger Core ) - mehrere Angaben trennen mit Komma:
dynamicLoading, CSS, COOKIE, DATA, CUSTOM, STORE, STORE_DB, DEVICE, EVENT, CONSENT,
MEDIA, FETCH, VISUAL, UTILS, NOTIFY, ANIM, ROUTER, DEBUG
*/
});
kryzo:ready sollte im idealen Anwendungsfall nur einmal pro Anwendung verwendet werden. Es dient als
zentraler Einstiegspunkt der Kryzo Engine und signalisiert, dass alle Kernmodule vollständig initialisiert und
einsatzbereit sind. Statt mehrere getrennte Listener im Projekt zu verteilen, empfiehlt sich die Verwendung eines
zentralen Controllers (oder Application Controllers), in dem die gesamte Initialisierungslogik gebündelt wird.