Solid Forms: Deklarative datengetriebene User Interfaces

Kontrolle über die eigenen Daten ist ein wesentliches Ziel von Solid. Dazu werden Daten in User Pods gespeichert und sind unabhängig von bestimmten Apps. Ich kann mir eine passende Anwendung für meine Zwecke aussuchen und diese jederzeit leicht wechseln.

Wirkliche Kontrolle erhält man aber nur, wenn man selbst in der Lage ist Daten zu erzeugen und für sich zu nutzen, ohne abhängig davon zu sein, dass jemand anderes erst eine App entwickelt. Benutzer*innen sollen in der Lage sein, genau die Daten in ihren Pod zu schreiben die sie brauchen. Nicht jede*r kann oder will erst eine komplexe Programmiersprache lernen, um eine App für ein bestimmtes Problem zu entwickeln.

Ein Low Code System für Solid

Das Solid Forms System ermöglicht die deklarative Beschreibung von Eingabeformularen und somit die Erstellung einfacher Anwendungen. Die Formulare werden einfach mittels Linked Data beschrieben (zum Beispiel in Turtle Syntax) und irgendwo im Web hinterlegt (im Pod, auf Github, …). Man kann sie entweder von Hand schreiben, oder eine App nutzen. Solid Forms sind quasi die Low Code / No Code Variante von Solid Apps.

Ein einfaches Solid Form in Turtle Syntax kann wie folgt beschrieben werden:

ex:form a ui:Group
  ui:parts (ex:part1 ex:part2) .

ex:part1 a ui:SingleLineTextField ;
  ui:property vcard:fn;
  ui:label "name" .

ex:part2 a ui:EmailField ;
  ui:property vcard:hasEmail ;
  ui:label "email" .

Dieses Formular besteht aus zwei Eingabefeldern: Eines für den Namen und eines für die E-Mail-Adresse. Diese Form des High-Level-Designs erlaubt mehrere unterschiedliche Implementierungen, also Code der die Formulare dann tatsächlich als User Interface benutzbar macht. Eine solche Implementierung ist Teil von solid-ui, der UI-Bibiothek von SolidOS. Weitere Implementierungen, z. B. in ReactJS und MUI, als Web Components, oder für native Apps sind denkbar.

Rendering des oben beschriebenen Formulars mittels solid-ui

Zur Beschreibung der Eingabefelder benutzt Solid Forms die UI-Ontologie, welche zahlreiche nützliche Felder, von der einfachen Texteingabe bis zum Color-Picker bereits mitbringt. Komplexere Felder können davon abgeleitet werden. Kennt eine Implementierung ein bestimmtes Feld nicht, kann sie auf eine einfachere Eingabevariante zurückfallen, sodass Anwendungen stets benutzbar bleiben.

Solid Forms kennt viele verschiedene Arten von Eingabefeldern (klicken zum Vergrößern)

Wird ein Solid Form abgeschickt, speichert es die Daten im Solid Pod. Jemand der ein Formular erstellen möchte, muss sich also weder um die Programmierung des Frontends, noch des Backends kümmern, sondern kann sich voll und ganz auf die inhaltliche Beschreibung eines Formulars für die benötigten Daten kümmern. Programmierkenntnisse sind dazu nicht erforderlich.

Links die Beschreibung des Formularfeldes, rechts das Rendering durch die Forms-Implementierung (hier solid-ui) und in der Mitte das RDF-Tripel, das im Pod abgespeichert wird. (klicken zum Vergrößern)

Deklarative Micro-Frontends

Ein weiterer interessanter Aspekt ist die mögliche Verlinkung von Formularen. Da es sich um Linked Data handelt, können verschiedene Teile eines Formulars auf unterschiedlichen Servern liegen und von verschiedenen Verantwortlichen gepflegt werden. Man kann also ein ganzes „Web of Forms“ erstellen. Solid Forms ermöglicht damit sozusagen deklarative Micro-Frontends! Natürlich können die Forms auch mit dem Rest des Web of Data verknüpft werden. Autocomplete-Felder können Daten aus öffentlichen Quellen, wie zum Beispiel Wikidata laden, oder Vorschläge aus dem persönlichen Pod einblenden.

Ein durch solid-ui gerendertes Autocomplete mit Vorschlägen aus Wikidata.

Ein Formular für Formulare

Formulare in Turtle zu beschreiben ist zwar einfacher als Programmieren, aber sicher nicht für jede*n etwas. Da Formulare aber auch nur Daten (Linked Data) sind, können sie wie alles andere auch durch Apps erzeugt werden. Dies senkt die Einstiegshürden weiter ab.

Vorsicht, jetzt wird es meta: Eine App zur Erzeugung von Formularen kann auch als Solid Form beschrieben werden. Das „Form Form“ ermöglicht es andere Solid Forms zu erstellen und zu bearbeiten.

Going meta: Mit dem „Form Form“ können Solid Forms mittels UI bearbeitet werden. Dieses UI ist selbst ein Solid Form.

Tim Berners-Lee, der Erfinder des WWW und Begründer von Solid, hat das Forms Systems am Mittwoch persönlich vorgestellt und erklärt. Eine Aufzeichnung seiner Präsentation könnt ihr hier anschauen.

Das Form System ist sehr mächtig, aber noch spärlich dokumentiert. Zukünftig sollen Tutorials für Einsteiger*innen entstehen. Weitere Implementierungen mit einer guten User Experience und Form Registries zur Wiederverwendung von nützlichen Formularen (so etwas wie GitHub für Forms) sind zukünftig denkbar.

Weiterführende Links