Vaadin, an open-source web application development platform for Java developers, released version 24.4 in June 2024. The release aims to improve and simplify the developer experience by unifying the Hilla framework with the Vaadin platform, introducing the Vaadin Copilot, and several enhancements to the design system.
One of the most significant changes in this release is the introduction of Vaadin Copilot, a handy AI-powered development tool. Vaadin Copilot allows users to drag and drop components, reorganize layouts, and edit labels and captions while developing the application. Vaadin Copilot is project-aware and seamlessly integrated with supported IDEs, instantly updating the source code as changes are made in the Vaadin Copilot. The outline view lets users understand the overall UI structure and quickly navigate to specific components.
One of Vaadin Copilot's key features is its capability to use generative AI to generate and modify UI components based on prompts. The tool offers users a convenient way to change the theme of individual components and the entire application by adjusting the properties in the Theme Editor without having to edit the underlying CSS. Vaadin Copilot is only available for views built in Hilla/React.
Starting with the 24.4.0 release, Vaadin BOM and Vaadin Spring Boot starter include the Hilla framework, allowing users to build hybrid applications containing Flow and Hilla views. It is now possible to wrap React components as Flow components via an adapter Web Component. This integration allows the React components to be used in Java applications, modify the component's state, and send events back and forth between client and server side.
Aligning with the theme of a unified Vaadin platform, it is possible to embed Flow components into Hilla/React views by implementing the WebComponentExporter class. The resulting web component can be imported into a Hilla view. Follow the guide for further code examples and details.
Vaadin Flow defaults to React Router, which is configured via the property reactEnable. This can be set in the Vaadin maven plugin or through Java system properties. When set to true, it includes core React dependencies and other React components. If set to false, Vaadin Router is used, React dependencies are excluded, and Lit dependencies are added. See the full list of properties for details.
Other noteworthy changes include the introduction of the file-based router in Hilla. The Hilla file router is built on top of the React Router. It maps the routes defined in files in the src/main/frontend/views directory and subdirectories. The Hilla File router provides a utility function, createMenuItems, to populate menu items from routes in the React main layout.
This release also brings several improvements to the design components, such as support for read-only and required states in the Checkbox, the collapsing of menu items in the Menu Bar from the left end of the bar, and support for query parameters in the Side Navigation.
See the release notes and blog for the complete list of features in Vaadin 24.4.0. In addition to these resources, the Vaadin team held a live-stream session and a community town hall on the 24.4.0 release.
To learn more about Vaadin, refer to their official docs.