- Hyperclay unterstützt die Erstellung von Web-Apps, bei denen UI, Logik und Daten in einer einzigen HTML-Datei integriert sind
- Änderungen können direkt in der Datei vorgenommen werden, mit sofortiger Bearbeitung und Live-Freigabe; sogar Aussehen, Verhalten und Bearbeitungsweise der App lassen sich direkt steuern
- Bietet eine Struktur für sofortige Ausführung und Speicherung ohne separaten Build- oder Deployment-Prozess, Datenbank oder komplexes Backend
- Mit nur einer HTML-Datei lässt sich die App im Browser, auf dem Server oder offline – überall ausführen; alle Änderungen werden versioniert und können wiederhergestellt werden
- Entwickelt, um die Komplexität moderner Webentwicklung zu reduzieren und es jedem leicht zu machen, interaktive Apps zu erstellen, die in Echtzeit lebendig sind
Einführung: Lebendige Web-Apps aus nur einer HTML-Datei mit Hyperclay
- Hyperclay bietet Programmierern die Erfahrung, Web-Apps wie ein Produkt zu formen – ohne komplexes Infrastrukturmanagement und mit nur einer portablen HTML-Datei
- Ziel ist eine in sich abgeschlossene Struktur, die allein mit einer Datei auskommt und Konfigurationsdateien, Builds, Frameworks und Deployment-Pipelines überflüssig macht, die in klassischer Webentwicklung als unverzichtbar gelten
Zentrales Konzept und Vorteile
- Die App besteht aus einer einzigen HTML-Datei
- Über eine visuelle UI kann die Datei selbst in Echtzeit bearbeitet werden, und diese Änderungen werden sofort dauerhaft als Zustand der App gespeichert
- UI, Logik und Daten sind gemeinsam dynamisch in einer Datei enthalten
- Nutzer können die App wie ein Dokument sofort bearbeiten, Änderungen direkt teilen oder herunterladen und auch offline verwenden
- Ähnlich wie bei „Google Docs for interactive code“ sind Teilen, Bearbeiten und Kontrolle über Eigentümerschaft frei möglich
Zusammenfassung der Hauptfunktionen
- Direkte Manipulation: Die App kann während der Ausführung sofort bearbeitet werden. Änderungen werden ohne Kompilieren oder Neuladen direkt übernommen
- What you see is what you build: Wenn die UI angepasst oder der Quellcode direkt bearbeitet wird, ändert sich die App sofort – ohne Zwischenschicht
- Echte Portabilität: Die App kann als HTML-Datei exportiert und überall (Server oder offline) identisch ausgeführt werden. Jede Speicherung wird versioniert und kann wiederhergestellt werden
- All das funktioniert ohne spezielle Technik, ausschließlich mit einer einzigen Standard-HTML-Datei
Technische Struktur
- Hyperclay besteht aus einem NodeJS-Server und einer clientseitigen JS-Bibliothek
- Wenn die HTML-Seite ihren DOM selbst verändert, wird das geänderte
document.body.outerHTML an den Server gesendet, und genau diese HTML-Datei wird aktualisiert
- Änderungen innerhalb der App, etwa das
checked-Attribut einer Checkbox, werden dauerhaft im HTML-Code gespeichert, sodass beim nächsten Aufruf derselbe Zustand reproduziert werden kann
- Unterstützung für Versionsverwaltung sowie Lese-/Schreibrechteverwaltung
Konkrete Beispiele
- Von direkt bearbeitbaren Blogs bis zu Checklisten für Arbeitszeiten lassen sich alle Apps in einer einzigen HTML-Datei erstellen und speichern
- Mit dem Attribut
contenteditable oder in der Form <input type="checkbox" persist> wird der Zustand der App direkt im Dokument festgehalten
Hintergrund und Problemstellung
- Beim Erstellen dutzender Websites pro Jahr entstand der Wunsch, dass sich das Programmieren von Web-Apps so natürlich wie Schreiben anfühlen sollte
- Traditionelle statische Websites sind flüchtig: Änderungen durch Nutzer werden nicht gespeichert
- Um Datenpersistenz im Web umzusetzen, ist normalerweise übermäßiger Aufwand nötig – etwa für Datenbanken, APIs, Templates oder Account-Systeme
- Für Prototypen, einfache Tools, persönliche Entwicklungslogs oder Blogging ist das ineffizient, wenn man Dinge schnell erstellen, in Echtzeit bearbeiten und teilen möchte
Wie Hyperclay das löst
- UI, Zustand und Verhalten sind in einer einzigen HTML-Datei integriert
- Wie beim Öffnen einer Desktop-App lässt sich alles einfach öffnen und sofort bearbeiten, und das Ergebnis kann direkt online übernommen werden
- Es führt das Konzept persistenter digitaler Objekte ein: shared, cloneable, persistent
- Einsetzbar für Website-Builder, Dokument-, Diagramm- und Präsentationstools, Dashboards, Blogs, Umfragen, Quiz-Erstellung, Datenvisualisierung und viele weitere Werkzeuge
Gesamtüberblick des Konzepts
- Die meisten Web-Apps nutzen ohnehin bereits HTML
- Wenn Zwischenschritte entfallen, kann eine HTML-Datei die Rolle von gesamter Datenbank / API / UI übernehmen, wodurch sich der Stack auf nur wenige Zeilen vereinfacht
- Entwickler können Komplexität reduzieren und mit minimalem Code Apps erstellen, die sich gut nutzen und warten lassen
Anwendungsbeispiele mit Hyperclay
- Ob Blog, Checkliste oder andere App: Alles kann mit nur einer HTML-Datei erstellt, verteilt, geteilt und bearbeitet werden
- Direkt nutzbar in der Form
<div contenteditable>Mein Blog!</div>; mit <input type="checkbox" persist> wird jeder Zustand dauerhaft im Dokument gespeichert
Fazit
- Hyperclay zeigt einen neuen Weg auf, wie jeder ohne die Umständlichkeit klassischer Webentwicklung leichte, portable interaktive Web-Apps erstellen und in Echtzeit teilen, speichern und wiederherstellen kann
- Es ist eine Web-App-Plattform der nächsten Generation, die nicht nur für Entwickler und Designer, sondern für alle leicht nutzbar ist
Noch keine Kommentare.