Vaadin, the company behind the open source framework Hilla, is putting a lot of time and energy into the further development of Hilla. But before we look at what else we can expect from Hilla in the rest of this year, it is worth taking a brief look at the latest release.
Looking back at Vaadin 24.4
The Vaadin release 24.4 is perhaps one of the biggest small releases that Vaadin has ever published. The following highlights, among others, were part of this release:
- Vaadin Copilot, an AI-based assistant that simplifies development: https://vaadin.com/blog/introducing-vaadin-copilot.
- File-baded routing for Hilla: https://vaadin.com/blog/file-based-routing-in-vaadin-24.4-simplify-hilla-app-creation.
- React components in Flow and Flow components in React: https://vaadin.com/blog/vaadin-24.4-opens-the-door-to-the-land-of-react.
Looking ahead
One of the things I appreciate about Vaadin is the transparency in development. Via the public GitHub repos you can see which features the team is currently working on. New ideas for further developments are regularly presented in the Vaadin Forum and Vaadin actively asks for feedback on new products there. So let’s take a look at what the Vaadin team is currently working on and what new features we can expect for Hilla in the coming months.
i18n support
This feature is already included in the current 24.4 release, but is yet hidden behind a feature flag. The i18n feature enables developers to provide React components in the UI of their Hilla application with different translations. The available translations are managed in separate files. The translations are then used in the UI code via a translate function.
The feature flag can be activated via the new Vaadin Copilot or with the help of the file src/main/resources/vaadin-featureflags.properties and the following value it contains:
com.vaadin.experimental.hillaI18n=true
The directory src/main/resources/vaadin-i18n must then be created with at least one translation file, such as translations_en.properties or translations_de.properties. The contents of these files are simple key-value pairs with the values in the respective language, e.g.
greeting-button=Say hello
for the English translation and
greeting-button=Sag hallo
for the German translation. The i18n feature must be configured once within the application. This is done by calling the configure function, e.g. within the file src/main/frontend/views/@layout.tsx:
// import statements
await i18n.configure();
// regular content of @layout.tsx
In this case, Hilla uses the language configured in the browser as the default language and attempts to load the associated translations using the translation files from the backend. Alternatively, the preferred language can also be specified in a standard format (IETF BCP 47) when calling the configure function, e.g. await i18n.configure({ language: 'en' }). All existing translations can now be used in the UI code using the key in the translation file and with the help of the translate function, for example:
<Button onClick={() => {}}>
{translate('greeting-button')}
</Button>
The translate function returns a Signal. This means that all React components that use this translation are automatically updated when the translation changes.
The management of translations is expected to be further simplified in the future. A new product called Control Center will probably provide its own functions for this purpose.
Full-Stack Signals
With the 24.4 release, Vaadin introduced the use of Signals in Hilla and has been using them since then, for example in the i18n feature and for local states instead of useState, but this was just the beginning. The team is currently working on a series of features that are summarized under the term “Full-Stack Signals” (source: https://github.com/vaadin/hilla/discussions/1902). The idea behind this is that a state in the form of a Signal can be shared between several users of an application. If a user changes this shared state, the change is also visible to all other users. This creates the basis for many great functions of collaborative applications. The state, which is managed via Signals, no longer only exists in the browser of a single user. The state exists in the browser of any number of users and in the backend of the application. In the next 24.5 release, you will probably be able to try out an initial preview of this new feature with the help of a feature flag (source: https://github.com/vaadin/hilla/issues/2430).
Signal-based view state management
Signals are a dominant theme in the further development of Hilla. However, their use for the i18n feature and as Full-Stack Signals is by no means everything. Leif Åstrand has presented another RFC in the Vaadin Forum in which Signals play an important role: https://vaadin.com/forum/t/rfc-signal-based-view-state-management/166848. This RFC is essentially about a series of simplifications that are intended to make developers’ work easier by reducing the amount of code that needs to be written for recurring tasks. For this purpose, code will be generated in certain cases which can then be used directly. For example, if you use Hilla’s file-based routing and have created a file such as views/employees/{employeeId}.tsx, Hilla can recognize that there will be a local state employeeId within this view, which can be used as a Signal via a generated hook useEmployeeViewState(). If the parameter in the URL changes, the local state within the view also changes automatically and vice versa. The RFC contains further simplifications, such as for the generation of URLs or for loading state information from the backend. A prototype that contains some of these simplifications can be viewed in a GitHub repo by Leif: https://github.com/Legioth/view-state.
Summary
Hilla is being continuously further developed. In the long term, Vaadin has committed itself to Hilla as the second framework alongside Flow and this can be seen in many places: In the last 24.4 release, Hilla was represented with many new features, Vaadin Copilot was first available for Hilla and there will also be many exciting new features for Hilla in the future that will further simplify the development of collaborative web applications based on React and Spring.
If you would like to get a detailed overview of the further development of Hilla and Flow and upcoming features, you can do so at the upcoming Vaadin Create conference from 29 October to 30 October 2024 in Frankfurt. The detailed agenda and tickets are available at https://vaadin.com/vaadin-create.