Vaadin 24.4 integrates with React, unifies Flow and Hilla development, and more!

Vaadin Flow 24.3: Enhancing DX, theming upgrades, and Multi-Select Combo Box improvements

Tarek Oraby
Tarek Oraby
On Dec 13, 2023 2:02:54 PM
In Product

We are excited to announce the release of Vaadin Flow 24.3, a significant update that brings a range of improvements and new features to the Vaadin platform. This release focuses on enhancing the developer experience, improving application performance, and expanding the capabilities of Vaadin Flow and Vaadin components. 

Quality-of-Life improvements

This release includes a range of improvements prioritized based on community feedback. These improvements include a more fine-grained control of query and route parameters, enabling rerouting to a custom page upon access denial, and a new default I18NProvider.

Furthermore, this release introduces two noteworthy enhancements. First, this release extends the support of the pre-compiled bundle feature. This feature, initially introduced in version 24.0 to speed up development startup times and expanded in version 24.1 to cover production builds, is now more robust and supports more use cases.

Second, version 24.3 introduces a new feature for navigation access control that allows for more granular control over user access within applications, ensuring that sensitive pages and resources are only accessible to authorized users.

Enhanced theming capabilities

Version 24.3 simplifies the styling of Vaadin components in several ways. First and foremost, it introduces a set of feature-specific style properties that provide a simpler way to customize the appearance of one or more components without writing complex CSS selectors.

In addition to this, new APIs have been added for applying CSS class names to Grid header and footer cells, menu items, Message List items, Avatar Group items, and items in the Select dropdown,  enabling developers to apply custom styling to these elements.

Multi-Select Combo Box improvements

The Multi-Select Combo Box component in Vaadin 24.3 has undergone significant improvements to enhance its user experience and functionality. One of the notable enhancements is the ability to wrap chips to multiple lines, making it possible to see all selected items up-front.

Additionally, selected items are now automatically displayed at the top of the dropdown list. Furthermore, to improve visibility and accessibility, we have ensured that at least one item is always displayed as an uncollapsed chip, even when not using the new wrapping feature.

Read the documentation ->

Hilla-React hybrid apps (preview feature)

Vaadin 24.3 offers a preview feature (behind a feature flag) that allows the creation of apps combining Flow views with Hilla+React views. By combining server-driven Flow views with client-centric Hilla/React views, developers can now leverage the strengths of both frameworks in a single application.

We plan to finalize the support for hybrid apps in our next release, including the ability to embed React-based components directly within Flow views. 

Read the documentation ->

Wrapping up

Vaadin Flow 24.3 brings practical improvements and new features to the platform, focusing on enhancing performance and user experience. We invite you to explore these updates and see how they can benefit your web development projects.

For a complete list of improvements, see the release notes.

Tarek Oraby
Tarek Oraby
Tarek is a Product Manager at Vaadin. His daily work is a blend of talking to users, planning, and overseeing the evolution of Vaadin Flow and Hilla, ensuring they consistently delight our developer community.
Other posts by Tarek Oraby