Vaadin 24.4 Adds React Support, In-App Coding Assistant

Unified Vaadin Platform: Seamless Integration with Hilla

24.4 adds React support to the entire Vaadin platform by including the Hilla framework.

The Vaadin BOM and Vaadin Spring Boot Starter now include Hilla, allowing you to choose between Flow and Hilla or mix both in your projects.

Vaadin Copilot: an in-app development assistant

Vaadin 24.4 introduces Vaadin Copilot, a visual development tool and AI-powered assistant.

Available by default in development mode, Copilot helps you inspect and edit the UI, and use generative AI to create or modify code.

Copilot is a code-first editor, meaning there is no intermediate design format, it modifies your code directly.

Flow Enhancements

Mixing Flow and Hilla views: Combine server-side and client-side routes in a single application. No special configuration needed. Docs · Example Project
Using React components in Flow: Wrap any React component as a Flow component and manage its state and events automatically. Docs
Using Flow components in React: Embed Flow components in Hilla/React views using WebComponentExporter. Docs
React Router by default: Vaadin Flow now uses React Router, simplifying the addition of React components and views. Docs
New default frontend directory: The default location for frontend resources is now src/main/frontend/, aligning better with Maven project structure.

Hilla Enhancements

Hilla File Router: Simplifies adding React views by automatically mapping files in src/main/frontend/views/ as routes. Docs
Automatic Main Menu: The file router’s createMenuItems() utility populates the menu items in the React main layout. Docs
Hilla React Signals: Manage state in React applications with @vaadin/hilla-react-signals, offering a robust way to share state updates across components. Docs

Detailed Changelogs

Flow and Hilla: Flow 24.4.0 · Hilla 24.4.0
Design System: Web Components 24.4.0 · Flow Components 24.4.1
Other updates: TestBench 9.3.0 · Classic Components 24.2.1 · MPR 7.0.10

For full details, check the release notes.

Upgrading Guides

Upgrading Flow to Vaadin 24
Upgrading Hilla to Vaadin 24

The post Vaadin 24.4 Adds React Support, In-App Coding Assistant appeared first on foojay.