Vaadin 23 is finally here! It paves the road for our new, simplified release model where we recommend the latest Vaadin version to every user. The release already ships with new features and improvements, yet thanks to the upcoming minor releases (Vaadin 23.1, 23.2 and so forth) there are many more on the roadmap ahead.
Eager to get started? Download and configure a new Vaadin 23 app or read the upgrade guide to update your project!
Important changes
New release model
We’re now recommending the latest version for all users instead of providing a separate Long Term Supported (or LTS) version parallel to feature releases. This change makes it easier for you to stay on the latest version while enabling us to focus more of our work towards a single version.
You can read more about the release model from the pen of Leif Åstrand.
Java 11 requirement
Vaadin 23 requires Java 11. The previous release, Vaadin 22, is the last version to support Java 8.
We extended the support for Vaadin 22 beyond the scope of a feature release to provide users with more time to adjust to this requirement.
Vaadin Fusion is now Hilla
We renamed Vaadin Fusion to Hilla and moved all of its resources, such as documentation and tutorials, to its own website: https://hilla.dev
The split between Vaadin Flow and Hilla materializes in Vaadin 23 with the first Hilla release.
Does the world really need another framework? Watch this video to find out!
New in Vaadin 23
Find all the included products, add-ons supported technologies on GitHub. You can also read the Vaadin 23 technical documentation for comprehensive details, code examples and updated in-depth tutorials.
Design System
Form Layout configuration improvements
Developers can now configure spacing between labels and fields for the entire form instead of separately for each item. You can adjust whitespace for the whole layout with three CSS properties:
- Label column width:
--vaadin-form-item-label-width - Gap between label and field:
--vaadin-form-item-label-spacing - Gap between rows:
--vaadin-form-item-row-spacing
Pattern support for Text Area
Text Area now has pattern (regex)-based input validation so that users are notified if their input doesn’t match the expected format.
Upload API for clearing file list
A Java API for clearing the file list of the Upload component. Use the predefined API to clear and reset the file list programmatically.
ItemLabelGenerator to RadioButtonGroup and MultiselectListBox
ItemLabelGenerator provides an easy API for generating label strings for radio buttons and is consistent with other components. Use it to generate custom label strings for your radio buttons and list box items without using a renderer.
Accessibility improvements
All Vaadin components (except Charts) have now been tested with screen readers NVDA, JAWS and VoiceOver. This thorough testing identified a number of accessibility issues that are now being improved and fixed.
This is the second batch of fixes to ensure WCAG 2.0 compliance and real usability with assistive technologies, such as screen readers, to help developers build accessible UIs with the Vaadin Design System.
Please note that there are some breaking changes in custom colors and styling. Find the details in GitHub.
More fixes coming in V23.1!
Pro components
New Map component
A new "slippy-map" component for displaying interactive maps that is based on OpenLayers. Use it to embed an interactive map in your app!
Map is for Flow only.
Distinguishing styling for editable versus non-editable cells in Grid Pro
New styles in Grid Pro make it easy for users to distinguish between editable and read-only cells without having to click around to find out.
Lumo and Material styling for Charts
Have your charts automatically match the UI theme with Lumo and Material theme colors and fonts.
Classic Components
With Vaadin 8 at end of life, we’re making it easier for Prime and Enterprise customers to upgrade into Vaadin 23 with a set of web components that are similar to their previous iterations in terms of implementation. It includes components such as VerticalLayout and HorizontalLayout that closely mimic the behavior of their V7 and V8 counterparts.
The components help the modernization effort by requiring less re-learning and providing a more seamless transition
Classic Components are for Flow only.
Flow framework
Get started with our quickstart tutorial.
Modernized stack
The framework and all add-ons are built with Java 11. Vaadin 23 requires Java 11 as a result.
npm as the default frontend package manager
We’re defaulting back to npm which is the de facto standard package manager. It provides a more robust version locking mechanism with overrides. It’s also more secure since postinstall scripts are not run by default.
npm performance is on par with pnpm.
pnpm is still available as opt-in.
Server-side modality
A security feature that disables the components on the server-side. Components behind a client-side modality curtain are blocked from RPC calls on the server-side.
Vite devmode
We introduced Vite support as an experimental feature in Vaadin 22. The support is now improved and developers can use Vite instead of webpack to improve their frontend build times in Vaadin 23. We encourage developers to try Vite and report their experience or any issues they may encounter.
Hilla Framework
You can find all Hilla documentation and tutorials on: https://hilla.dev/docs/
Offline logout
Offline logout works in stateless authentication mode, which means users can log out from the application while offline.
npm instead of pnpm
npm is also the default frontend package manager for Hilla.
Form validation message interpolation API
You can now configure the form validation message for more control over what to display when form validation fails. Use the API to localize the error messages of your multi-language apps, for example.
Collaboration Engine
New operations for Collaboration List
When using the low-level CollaborationList API, developers can not only add items to the topic but also get specific items identified with a key object, replace existing values with new values or remove them completely.
Configurable integrations
The path used by the browser Beacon API is now configurable, making it easier to integrate with security frameworks.
What’s next?
Use our upgrade guide to get onto Vaadin 23. We have scheduled new features, such as Clustering Support for Collaboration Engine and the Spreadsheet component for the first minor release, V23.1, so stay tuned!
Any questions? Ask away by commenting below!