Vaadin, die Firma hinter dem Open Source Framework Hilla, steckt viel Zeit und Energie in die Weiterentwicklung von Hilla. Doch bevor wir uns anschauen, was wir von Hilla im weiteren Verlauf dieses Jahres noch erwarten können, lohnt es sich einen kurzen Blick auf das letzte Release zu werfen.
Ein Blick zurück auf Vaadin 24.4
Das Vaadin-Release 24.4 ist vielleicht eines der größten kleinen Releases, die Vaadin je veröffentlicht hat. Folgende Highlights waren unter anderem Bestandteil dieses Releases:
- Vaadin Copilot, ein KI-basierter Assistent, der die Entwicklung vereinfacht: https://vaadin.com/blog/introducing-vaadin-copilot.
- Datei-basiertes Routing für Hilla: https://vaadin.com/blog/file-based-routing-in-vaadin-24.4-simplify-hilla-app-creation.
- React-Komponenten in Flow und Flow-Komponenten in React: https://vaadin.com/blog/vaadin-24.4-opens-the-door-to-the-land-of-react.
Ein Blick nach vorne
Eines der Dinge, die ich an Vaadin schätze, ist die Transparenz in der Entwicklung. Über die öffentlichen GitHub-Repos kann man nachvollziehen, an welchen Features das Team gerade arbeitet. Im Vaadin Forum werden regelmäßig neue Ideen für Weiterentwicklungen vorgestellt und Vaadin fragt dort aktiv nach Feedback zu neuen Produkten. Schauen wir also einmal, woran das Team von Vaadin gerade arbeitet und was wir in den nächsten Monaten an neuen Features für Hilla erwarten können.
i18n Unterstützung
Dieses Feature ist bereits im aktuelle 24.4 Release enthalten, verbirgt sich dort jedoch noch hinter einem Feature Flag. Das i18n-Feature ermöglicht es Entwicklerinnen und Entwicklern React-Komponenten in der UI ihrer Hilla-Anwendung mit verschiedenen Übersetzungen zu versehen. Die verfügbaren Übersetzungen werden in separaten Dateien verwaltet. Im UI-Code werden die Übersetzungen dann über eine translate-Funktion verwendet.
Das Feature-Flag kann über den neuen Vaadin Copilot oder mit Hilfe der Datei src/main/resources/vaadin-featureflags.properties und dem darin enthaltenen Wert
com.vaadin.experimental.hillaI18n=true
aktiviert werden. Anschließend muss das Verzeichnis src/main/resources/vaadin-i18n mit mindestens einer Übersetzungsdatei, wie bspw. translations_en.properties oder translations_de.properties erstellt werden. Der Inhalt dieser Dateien sind einfache Schlüssel-Werte-Paare mit den Werten in der jeweiligen Sprache, bspw.
greeting-button=Say hello
für die englische Übersetzung und
greeting-button=Sag hallo
für die deutsche Übersetzung. Innerhalb der Anwendung muss das i18n-Feature einmalig konfiguriert werden. Dies erfolgt durch den Aufruf der configure-Funktion, bspw. innerhalb der Datei src/main/frontend/views/@layout.tsx:
// import statements
await i18n.configure();
// regular content of @layout.tsx
In diesem Fall verwendet Hilla die im Browser konfigurierte Sprache als Standardsprache und versucht die zugehörigen Übersetzungen anhand der Übersetzungsdateien aus dem Backend zu laden. Alternativ, kann die bevorzugte Sprache beim Aufruf der configure-Funktion auch im gängigen Format (IETF BCP 47) mitgegeben werden, bspw. await i18n.configure({ language: 'en' }). Alle vorhandenen Übersetzungen können nun anhand des Schlüssels in der Übersetzungsdatei und mit Hilfe der translate-Funktion im UI-Code verwendet werden, wie bspw.:
<Button onClick={() => {}}>
{translate('greeting-button')}
</Button>
Die translate-Funktion liefert ein Signal zurück. Dies bedeutet, dass sich alle React-Komponenten, die diese Übersetzung verwenden, automatisch aktualisieren, wenn sich die Übersetzung ändert.
Die Verwaltung der Übersetzungen wird sich in Zukunft voraussichtlich weiter vereinfachen. Ein neues Produkt namens Control Center wird dafür vermutlich eigene Funktionen bereitstellen.
Full-Stack Signals
Mit dem 24.4 Release hat Vaadin die Nutzung von Signals in Hilla eingeführt und verwendet sie seit dem bspw. im i18n-Feature und für lokale Zuständen anstelle von useState, aber dies war erst der Anfang. Derzeit arbeitet das Team an einer Reihe von Features, die unter dem Begriff “Full-Stack Signals” zusammengefasst werden (Quelle: https://github.com/vaadin/hilla/discussions/1902). Die Idee dahinter ist, dass ein Zustand in Form eines Signals zwischen mehreren Anwenderinnen und Anwendern einer Anwendung geteilt werden kann. Ändert eine Anwenderin oder ein Anwender diesen geteilten Zustand, ist die Änderung auch für alle anderen Anwenderinnen und Anwender sichtbar. Dies schafft die Grundlage für viele tolle Funktionen kollaborativer Anwendungen. Der Zustand, der dabei über Signals verwaltet wird, existiert damit nicht mehr nur im Browser einer einzelnen Anwenderin bzw. eines einzelnen Anwenders. Der Zustand existiert im Browser beliebig vieler Anwenderinnen und Anwender und im Backend der Anwendung. Im nächsten 24.5 Release wird man eine erste Vorschau dieses neuen Features voraussichtlich mit Hilfe eine Feature-Flags ausprobieren können (Quelle: https://github.com/vaadin/hilla/issues/2430).
Signal-based view state management
Signals sind ein dominantes Thema in der Weiterentwicklung von Hilla. Ihre Verwendung für das i18n-Feature und als Full-Stack Signals sind aber noch längst nicht alles. Leif Åstrand hat im Vaadin Forum einen weiteren RFC vorgestellt, bei dem Signals eine wichtige Rolle spielen: https://vaadin.com/forum/t/rfc-signal-based-view-state-management/166848. Im Kern geht es bei diesem RFC um eine Reihe von Vereinfachungen, die Entwicklerinnen und Entwicklern die Arbeit erleichtern sollen, in dem weniger Code für wiederkehrende Aufgaben geschrieben werden muss. Dazu soll in bestimmten Fällen Code generiert werden, der dann direkt verwendet werden kann. Verwendet man bspw. das Datei-basierte Routing von Hilla und hat eine Datei wie bspw. views/employees/{employeeId}.tsx erstellt, so kann Hilla erkennen, dass es innerhalb dieser View einen lokalen Zustand employeeId geben wird, der als Signal über den generierten Hook useEmployeeViewState() verwendet werden kann. Ändert sich der Parameter in der URL, so ändert sich auch der lokale Zustand innerhalb der View automatisch und umgekehrt. Der RFC enthält weitere Vereinfachungen, wie bspw. für die Generierung von URLs oder für das Laden von Zustandsinformationen aus dem Backend. Ein Prototyp, der einen Teil dieser Vereinfachungen enthält, kann man sich in einem GitHub-Repo von Leif anschauen: https://github.com/Legioth/view-state.
Fazit
Hilla wird kontinuierlich weiterentwickelt. Vaadin hat sich langfristig zu Hilla als zweitem Framework neben Flow committed und das merkt man an vielen Stellen: Im letzten 24.4 Release war Hilla mit vielen neuen Features vertreten, Vaadin Copilot war zuerst für Hilla verfügbar und auch in Zukunft wird es viele spannende neue Features für Hilla geben, die die Entwicklung kollaborativer Web-Anwendungen auf Basis von React und Spring weiter vereinfachen werden.
Wer sich einen detaillierten Überblick über die Weiterentwicklung von Hilla und Flow und über kommende Features verschaffen möchte, kann dies auf der anstehenden Vaadin Create Konferenz vom 29.10. bis 30.10.2024 in Frankfurt tun. Die detaillierte Agenda und Tickets gibt es unter https://vaadin.com/vaadin-create.