Try Vaadin's Visual View Builder for seamless collaboration, prototype sharing, and code generation.
Blog

Vaadin Flow 24.1: Builds, grids, theming, and prototypes all get faster

By  
Jonathan Langford
Jonathan Langford
·
On Jun 14, 2023 1:00:00 PM
·
In Product

Introducing V24.1

Today we are releasing Vaadin Flow 24.1, packed with new features designed to make web application development even faster and easier.

In this release, we are excited to introduce two new low-code to pro-code tools, Visual View Builder and Visual Theme Editor. These tools enable developers and non-developers to collaborate on an application’s design, while generating well-structured code that maintains complete flexibility for further development.

Vaadin Flow 24.1 also makes it easier for developers to build and monitor production applications and continues our ongoing work to streamline the upgrade process from V8 to the latest versions of Vaadin Flow. Users of Vaadin applications will also see benefits with UI performance improvements and enhanced accessibility features for Vaadin UI components. 

Low-code to pro-code tools

This release includes two user-friendly low-code to pro-code tools that will simplify UI development; Visual Theme Editor and Visual View Builder. 

Visual View Builder (Free Preview)

Built into start.vaadin.com, Visual View Builder helps bridge the gap between design and development, enabling seamless collaboration between developers and non-developers. Create application prototypes using Vaadin UI components, share your prototypes to gather feedback, and generate well-structured code for Vaadin Flow with the push of a button. 

Try it out ->

Visual Theme Editor (Free Preview)

The Visual Theme Editor allows you to visually fine-tune the appearance of your UI components in-app while in Development mode. Easily modify colors, fonts, spacing, and more through an intuitive interface without the need for tedious and time-consuming CSS editing. Any styling changes made in the Theme editor are reflected in real-time, both in the live preview and in the code. 

Try it out ->

DX improvements

We understand the importance of a seamless development experience, and that's why we continue to make enhancements that allow you to build robust business applications more easily.

Faster, easier production builds

Enjoy a faster, error-free process with the addition of a pre-compiled frontend bundle for production builds in Vaadin Flow 24.1. If no add-ons or front-end files are used in the application, the pre-compiled production bundle eliminates the need to run front-end tools like npm and Vite.

Read the documentation ->

Component loading optimizations

Vaadin Flow 24.1 enables a faster initial load time of the application by only loading components when they are needed. By default, only the components of the routes "" and "login" are eagerly loaded. For other routes, components are first loaded when navigating to these routes.

Read the documentation ->

Front-end metrics for Observability Kit

Elevate your Application Performance Monitoring with new front-end metrics for Observability Kit. You can now get a complete view of your application's performance with comprehensive end-to-end insights. This new feature empowers you to proactively identify and resolve performance issues, ensuring a smooth user experience.

Read the documentation ->

Faster memory cleanup in runtime

Vaadin Flow 24.1 introduces a memory-saving enhancement that efficiently removes UI instances from the server memory once a tab is closed or a page is refreshed. 

Discover more in our blog post ->

Easier upgrades from V8

This release continues our ongoing work to make it easier to upgrade from V8 to the latest Vaadin Flow releases. 

Vaadin Flow 24.1 saw work continuing not just on V8 Upgrade Automation and improvements to Classic Components, but a selection of enhancements to the core Flow components as well. A number of enhancements introduced in Flow take inspiration from the V8 APIs that made developers more productive.  

These reintroduced APIs improve the general QoL for Flow developers but also make it easier to upgrade existing V8 code by pasting in Flow projects. Improvements to Flow include V8’s distinction between Error notifications and Warning notifications with the styles that go along with them; enhancements to Grid constructors that reduce the lines of code developers need to set DataProviders; and the ability to set renderers of Columns after they have been constructed and added to a Grid. 

UX improvements

With this release, we continue our ongoing work to make it even easier to build a compelling user experience for your complex business applications.

UI performance enhancements

We have made significant improvements to enhance the performance of all Vaadin grids, including Grid, Tree Grid, Grid Pro, and CRUD components. This release also adds support for lazy rendering of columns for faster loading of grids with many columns. These updates result in faster and smoother interactions, providing an improved user experience.

New Navigation component (Preview)

Simplify navigation in Vaadin Flow apps with our new Navigation component. It streamlines the implementation of standardized, visually engaging menus.

Read the documentation ->

Accessibility improvements

This release continues our ongoing work to ensure that applications built with Vaadin Flow are accessible and can meet emerging regulatory requirements. By aligning with Web Content Accessibility Guidelines (WCAG) 2.1 standards, we provide a better user experience for individuals with diverse abilities. This release added ARIA label APIs needed by screen readers as well as a number of other accessibility improvements. 

See how Vaadin meets WCAG standards ->

Wrapping up

Vaadin Flow 24.1 brings a range of powerful new features to enhance both the developer experience and the user experience of your web applications. With improved Vaadin Flow DX, UI performance enhancements, easier V8 compatibility upgrades, simplified navigation, frontend metrics for observability, and enhanced accessibility, we strive to provide you with a seamless and inclusive development experience. 

Upgrade to Vaadin Flow 24.1 and unlock the full potential of your web app development, delivering exceptional user experiences and accelerating your productivity.

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

Jonathan Langford
Jonathan Langford
Jonathan Langford joined Vaadin as Product Marketing Manager in April 2023. With a background in international product launches, Jonathan specializes in developing effective go-to-market strategies, coordinating sales tools, and implementing compelling value propositions to drive conversions and expand market share.
Other posts by Jonathan Langford