Accessibility Now
Join our upcoming webinar about building accessible web applications! June 7, 2022.
Blog

Vaadin 23 is finally here!

By  
Mikael Sukoinen
Mikael Sukoinen
·
On Mar 3, 2022 4:13:47 PM
·
In Product

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. 

vaadin-release-v23Eager 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:

  1. Label column width: --vaadin-form-item-label-width
  2. Gap between label and field: --vaadin-form-item-label-spacing
  3. Gap between rows: --vaadin-form-item-row-spacing

Read documentation

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.

Read documentation

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.

Read documentation

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.

Read documentation

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.

Read documentation

Lumo and Material styling for Charts

Have your charts automatically match the UI theme with Lumo and Material theme colors and fonts.

Read documentation

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.

View product page

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.

Read documentation

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!

Mikael Sukoinen
Mikael Sukoinen
Mikael has a passion for writing text, code and music. He’s currently utilising his skills to explain difficult concepts in plain language at Vaadin Ltd.
Other posts by Mikael Sukoinen