Wir haben eine Bewertungsplattform für die W3C Web Sustainability Guidelines entwickelt. Dabei handelt es sich um einen umfangreichen Fragebogen, der nach Best Practices für nachhaltige Webanwendungen fragt. Wir haben ein Bewertungssystem hinzugefügt, das für jedes Kapitel der Richtlinien Noten vergibt. Jede Frage ist Punkte wert. Je mehr Gewicht eine Frage hat, desto mehr Punkte werden vergeben. Basierend auf dem erreichten Prozentsatz der maximal erreichbaren Punkte benoten wir die Nachhaltigkeit des Projekts von A (beste) bis G (schlechteste).

Wir experimentieren derzeit intern mit der W3C-Nachhaltigkeitsbewertung und werden mehr zu diesem Thema schreiben, sobald wir bereit sind, Sie bei der Evaluierung Ihrer Projekte zu unterstützen. Dieser Beitrag konzentriert sich auf die Technologie, die wir zur Erstellung der Bewertungsanwendung verwendet haben. Die Anwendung ist nicht auf die W3C-Richtlinien beschränkt, sondern kann auch für andere Bewertungsfragebögen verwendet werden.

Wir haben das Hotwire-Toolset verwendet, um eine hoch interaktive Webanwendung zu erstellen, ohne dass eine umfangreiche Javascript-Anwendung im Browser ausgeführt werden muss. Stattdessen läuft die gesamte Geschäftslogik serverseitig. Um den Benutzenden dennoch ein schnelles Erlebnis ohne vollständige Seitenaktualisierungen zu bieten, werden Änderungen als Fragmente an den Browser gesendet. Wir haben das Symfony-Framework verwendet, um das Backend zu erstellen, da Symfony gut mit Hotwire integriert ist.

Beispiele

Schauen wir uns an, wie das in der Praxis aussieht. Jedes Bewertungs-Kapitel enthält Statistiken, die zeigen, wie viel bereits beantwortet wurde. Am Anfang ist nichts beantwortet, also beantworten wir die ersten paar Fragen:

Beim Beantworten einer Frage werden die Punkte für die Frage und das Thema sowie die Note für das Kapitel und die Statistiken zu erfüllten Themen und beantworteten Fragen aktualisiert.

Beachten Sie, wie die Note, die Punkte, das Thema und die Frageanzahl aktualisiert werden, wenn wir Fragen beantworten. Wir haben den Javascript-Code geschrieben, um die Antwort sofort automatisch zu speichern. Die aktualisierte Note und die Statistiken werden dann vom Backend übertragen, ohne dass wir dazu code in Javascript implementieren mussten.

Dank der automatischen Speicherung und der Hotwire-Pushes wird der Wert sofort aktualisiert, wenn eine neue Note erreicht wird. Dieses unmittelbare Feedback motiviert die Benutzer, weiter an dem Fragebogen zu arbeiten:

Wenn sich die Note ändert, weil eine Antwort genügend Punkte vergeben hat, um einen Schwellenwert zu überschreiten, wird die Note sofort auf der Webseite aktualisiert.

Mit dem Push-System war es einfach, die gleichzeitige Bearbeitung in der Anwendung hinzuzufügen. Zusätzlich zur Übertragung der Note und Statistiken senden wir auch die Antworten an alle anderen Clients, die dasselbe Kapitel geöffnet haben. Mehrere Personen können nun gleichzeitig an derselben Bewertung arbeiten und sehen sofort die Updates von allen anderen:

Wir simulieren 3 gleichzeitige Benutzende, die am Fragebogen arbeiten. Im Fenster oben rechts wird auf die Antwort-Schaltfläche geklickt, und sofort werden die Antwort, Note und Statistiken in allen anderen Browsern aktualisiert. Zwei der Fenster sind Firefox, eines ist Chrome – Hotwire funktioniert in allen Browsern.

Wir haben die Bewertungsplattform nicht für die Nutzung auf Mobiltelefonen entworfen. Hotwire würde aber auch die Browser von Mobiltelefonen unterstützen.

Fazit

Die von Hotwire vorgeschlagene Architektur besteht darin, die Geschäftslogik und das Rendering im Backend zu belassen und Änderungen an das Frontend zu streamen, um das flüssige Gefühl von Single-Page-Apps beizubehalten. Neben Hotwire gibt es auch die HTMX-Bibliothek für diesen Zweck. Diese Architektur hat mehrere Vorteile gegenüber dem klassischen Ansatz mit einer umfangreichen Frontend-Anwendung:

  • Konsistente Logik: Die gesamte Geschäftslogik ist im Backend konzentriert und hat einfachen Zugriff auf alle benötigten Daten.
  • Sicherheit: Im Backend darf dem, was im Browser geschieht, nicht vertraut werden, da ein böswilliger Akteur die Anfragen manipulieren könnte. Mit Hotwire gibt es keine Geschäftslogik im Frontend, wodurch weder Mehraufwand noch Risiken durch fehlende Validierungen entstehen.
  • Weniger Entwicklungsaufwand: Frontend-Anwendungen führen zur Duplizierung der Geschäftslogik zwischen Backend und Frontend. Mit Hotwire vermeiden wir dieses Problem, indem wir die Geschäftslogik aus dem Frontend heraushalten.
  • Weniger Technologien: Für ein umfangreiches Frontend benötigt das Team Experten für das gewählte Framework (React, Vue usw.). Mit Hotwire benötigt das Team keine Javascript-Frontend-Experten.

Wir planen, weiter an der Bewertungsanwendung zu arbeiten, und werden ein Update zu ihrer Funktionalität veröffentlichen. Zudem hoffen wir, weitere Anwendungen mit dem Hotwire-Toolstack zu implementieren. Es ist eine leistungsstarke Technologie, die die Implementierung interaktiver Webanwendungen erheblich vereinfachen kann.