Vaadin 24 delivers a significant step forward for users of Vaadin Flow with a new technology baseline that includes Java 17, Spring Boot 3, and Jakarta EE 10. This ensures you can continue building Vaadin Flow apps with the latest Java technologies.
Vaadin 24 also provides several exciting improvements that help you build Java applications even faster, including a pre-compiled front-end bundle, simplified theming, and a new component locator in DevTools that lets you click on any UI component in your application and instantly jump to the relevant code within your IDE. Still need to move from Polymer to Lit templates? We’ve provided some new tools to speed up the migration.
Go to start.vaadin.com if you are eager to start a new project!
For Pro (and higher tier subscriptions) customers, the Spreadsheet component now enables you to embed charts and other UI components. Prime and Ultimate customers can also access ongoing support for Polymer. If you need to integrate your Vaadin Flow applications with monitoring solutions, the Observability Kit now supports Vaadin 14 applications as well as Vaadin 23 and Vaadin 24. Sign up for a free trial.
New and noteworthy in Vaadin 24
A new technology baseline
To keep in line with the new releases and requirements of technologies in the Java ecosystem, Vaadin 24 is released with a new technology baseline that includes support for Java 17, Spring Boot 3, and Jakarta EE 10. See the full list of supported technologies in Vaadin 24.
Faster build times
Moreover, with Vaadin 24, you can now experience significantly improved build and start-up times during development. This is possible using the new pre-compiled front-end bundle, which doesn't require front-end installation or compilation. This means that there's no longer a requirement to install tools like Node.js, npm/pnpm, or download npm packages, or even run the Vite development server. How fast is it? Check out this tweet from Marcus, VP of Developer Relations at Vaadin, to see how quickly Vaadin 24 starts.
Component styling
Vaadin 24 includes several new features that make it much easier to get your UI to look perfect. We’ve added full support for ::part() selector for a simpler and more flexible approach to styling UI components.
The linked article by Rolf Smeds is a must-read, but the TL;DR of the improvements includes:
- All of your CSS can be regular, non-Shadow-DOM CSS.
- Styling is now fully based on regular, native CSS – no Vaadin-specific things to learn.
- You have the freedom to structure your stylesheets how you like – no need to split them per component.
- It’s easier to style components based on their parent elements.
- It’s easier to apply the same styling to multiple component types.
- No more error-prone
:host(),::slotted()or[part=””]selectors – just plain CSS, including the new, simpler::part()selector. - No more class vs. theme. Just use class names for everything.
- Component-specific CSS selector reference lists and all-new theming documentation for Vaadin applications based on the new approach.
Component locator
Are you tired of searching your code for the right place to tweak a particular component on a particular view? The handy new component locator in DevTools lets you click on any UI component directly in your application and instantly jump to the relevant code within your IDE.
- Try the new component locator by opening the DevTools behind the Vaadin logo at the bottom right-hand corner of your running app:
You can download a Vaadin 24 app from start.vaadin.com if you don’t have one yet.
- Select the “Code” tab from the menu and click on “Find component in code.”
- Hover over a component in the view to identify it.
- Finally, click on the component to open the corresponding code in your IDE:
Spreadsheet component (Pro and higher)
The Spreadsheet component now supports embedding Charts and other UI components within a spreadsheet. As a result, the Spreadsheet component in Vaadin 24 is now at feature parity with Vaadin 8.
Polymer templates
Polymer support has been deprecated since Vaadin 18 (released in November 2020) in favor of faster and simpler Lit templates. In Vaadin 24, the built-in support for Polymer templates has been removed and is only available via an addon for Prime and Ultimate customers. However, a free conversion tool is also available to assist you in converting your Polymer templates to Lit.
Read more about setting up the commercial Polymer templates addon and using the free Polymer-to-Lit conversion tool in the upgrade guide.
Acceleration Kits
In 2022, we introduced Acceleration Kits, making it fast and easy to build key features and integrations into your Vaadin Flow-based business applications. The Observability Kit, which integrates with popular observability tools such as Datadog, Grafana, Jaeger, Prometheus, and New Relic, gives you insights into Vaadin Flow applications by monitoring the health of the application in real-time, detecting any errors, performance issues, and following user behavior. Observability Kit 1.1 now supports Vaadin 14. This and the rest of the Acceleration Kits are also supported in Vaadin 23 and 24.
A commercial Vaadin subscription is required to use Observability Kit in your project. Request a free trial!
Should you upgrade to Vaadin 24 (from a previous Vaadin version)?
In our upgrade guide, you can find instructions on how to upgrade from Vaadin 23.
However, some reasons why you might not want to upgrade yet include;
- If you have a technology baseline that isn’t yet in line with the list of requirements, such as Java 17 or Spring Boot 3
- You have a server that isn’t compatible with Jakarta EE 10, like Weblogic + TomEE
- You’re deploying your Vaadin application(s) with OSGi or Portlets
- You’re using 3rd-party components that aren’t yet compatible with V24
Need help upgrading? Join our Vaadin Office Hours online on Thursday, March 16th, at 2 pm UTC. Our DevRel team will be on-hand to answer your technical questions. Join live here!