One prominent theme in Vaadin 24.4 is integration with React in various forms. React has grown in popularity to the point where it's currently the most popular UI rendering library for web applications. This means that there's excellent availability of third-party components, learning resources, and experienced developers.
We want all of these to be available when building Vaadin applications, and we want Vaadin to be an option for companies that have decided to use React for some or all of their web UI development needs. We're calling for a truce between team members who advocate for React and those who advocate for Vaadin Flow as the view technology for their next application – both can work seamlessly together, so you're not required to pick only one or the other.
It's your choice to use or not to use React with Vaadin
Using React means that UI logic is implemented using TypeScript running in the browser. This adds overhead to the development process due to using multiple programming languages and also from the asynchronous and very explicitly defined communication between UI logic and server-side business logic.
We think that a Java-only approach with all application logic on the server has the potential to be more productive in most business application cases. We expect that many Vaadin applications will not use React at all, while other Vaadin applications may use React for some isolated parts or for all the application's UI logic. In other words, there's no need to start using React in your Vaadin applications just because we are opening that door. You should keep implementing everything using only Java with the help of Vaadin Flow in the same way as with previous Vaadin versions if that approach seems more productive for your needs.
The newly unified Vaadin platform includes two separate UI frameworks: Flow for server-side Java UIs and Hilla for client-side TypeScript UIs with a Java backend. Regardless of which framework you use, you have the same UI components, the same project structure, and the same underlying productivity-minded philosophy. You can even combine the frameworks so that some views in the application are implemented using Flow, and some are implemented with Hilla.
There's no point in mixing just for the sake of mixing, but it can be useful if different parts of the application are developed by separate teams that have different skills or if you prefer the productivity of Flow for most parts of the application but need, for example, offline support through Hilla for some parts. Whichever way you do it, Vaadin makes sure that you have the flexibility to choose the approach that makes the most sense for you. Mixing can be done on two different abstraction levels: views and reusable components.
Flow and Hilla views work seamlessly together
By default, Vaadin applications starting from version 24.4 use React Router for client-side routing. You won't notice this if you're building all your views using Java since we are automatically configuring React Router to fall back to Flow's server-side route registry whenever there's no matching client-side route. You might not even notice if you're building views using React and TypeScript since Hilla gets a new way of defining and configuring client-side routes based on the filesystem structure inside the src/main/frontend/views/ directory. You interact directly with the React Router APIs only for configuring special cases or if you have React views from previous versions of Hilla.
As with previous Vaadin versions, a Flow view is any component class with the @Route annotation. Based on the annotation, the view is automatically registered in the route registry.
src/main/java/com/example/myapp/FlowView.java
@Route("flow")
public class FlowView extends VertialLayout {
public FlowView() {
add("Hello Flow!");
}
}
What's new is that you can seamlessly add a Hilla view using React to the same application by adding a single file. The view is automatically added to the React Router configuration based on its location in the file system.
src/main/frontend/views/hilla.tsx
export default function HillaView() {
return "Hello Hilla!"
}
A main layout implementation in React can automatically add new Hilla views to the main menu. Flow views are not automatically shown in the client-side menu for security reasons, but you can opt to include those as well by adding a @Menu annotation to the Java class.
Read the documentation to learn more about Hilla's filesystem router and the @Menu annotation.
Use React components from Flow and Flow components from React
Another way to use Flow and React together is to export a single component to be used by the "other" side. Flow already has the WebComponentExporter class, which you can use to make any Flow component available as a web component. We are enhancing this in Vaadin 24.4 to also make it really easy to import such web components in views implemented with React.
Let's say you are exporting a Flow component with the name flow-component. You can then directly include this component in a Hilla view like this:
src/main/frontend/views/hilla.tsx
export default function HillaView() {
return <VerticalLayout>
<p>This is a Hilla view with a Flow component</p>
{ reactElement("flow-component") }
</VerticalLayout>
}
Read the documentation to learn more about exporting web components from Flow and importing them in React.
In the other direction, you can use the new ReactAdapterElement class to export a React component as a web component. The React component can be some reusable functionality that is implemented in your application or a third-party component that you have added as an npm dependency. You only need to implement a simple render function that has access to some custom hooks to integrate with the web component API.
src/main/frontend/views/MyReactAdapter.tsx
class MyReactAdapter extends ReactAdapterElement {
protected render(hooks: RenderHooks): ReactElement {
return <MyReactComponent>Hello React!</MyReactComponent>
}
}
customElements.define("react-component", MyReactAdapter);
This web component can then be used just like any other web component from Flow by creating a component class with some annotations to hook things up. There's also a ReactAdapterComponent helper class that simplifies interaction with the hooks provided by ReactAdapterElement.
src/main/java/com/example/MyReactComponent.java
@Tag("react-component")
@JsModule("./MyReactAdapter")
public class MyReactComponent extends ReactAdapterComponent {
}
Read the documentation for using React components from Flow.
We plan to make the integration even more seamless
The new integrations between React, Hilla, and Flow in Vaadin 24.4 will help you get up to speed with the basics, but there are still some additional things that we're planning to improve for upcoming releases. One such feature is the ability to automatically populate the main menu even when the main layout is built using Java. Another related improvement is to make it possible to render Hilla views inside a main layout that is built with Java. We will also introduce a way of adding child components from Flow to React adapter components, and we're considering adding a React renderer for Grid.
Vaadin 24.4 also brings various other smaller improvements to Flow and Hilla, and that will, of course, continue for Vaadin 24.5 and beyond. Additionally, we are also looking into improvements to how UI logic can be tested and a new concept for sharing data between users for collaboration or other types of live-updating use cases.
The React world is an oyster for Vaadin users
As you have seen, Vaadin 24.4 opens lots of possibilities for using React in various ways. You can go all-in and build all your UI logic using Hilla and React. Alternatively, you can create some views with Flow and others with Hilla or integrate specific React components into your Java-built UI logic. If you prefer, you can also continue using only Java without any React. Whichever approach you choose, we have you covered.