Vaadin 24.4 was a feature release mostly focused on improving React (and Hilla) interoperability and introducing Vaadin Copilot, the new AI-powered development mode widget. However, there are also a couple of quite nice improvements for pure Java developers. Even if none of those interests you, you’ll certainly want to keep up with the latest versions to get upcoming bug fixes and possible security fixes for your current Vaadin application. The Vaadin 24.3 series will be supported until September.
But features don’t come for free in terms of developer mode performance. In trivial apps, the development mode startup time might double, and there might be noticeable increases in the deployment artifact and front-end bundle size. New (transitive) dependencies might also cause extra headaches if you have strict security policies or otherwise large projects (more dependencies, more conflicts).
With the following pro tips, prepared especially for those upgrading their existing Vaadin Flow application to 24.4, you can achieve pretty much the same artifact sizes and development performance as with Vaadin 24.3.
Drop Hilla and Copilot dependencies to improve development server startup
Hilla and Copilot dependencies are the ones to “blame” for the increased startup time. On my M1 Macbook, the difference is about 2.2 vs 4.8 seconds (a small Spring Boot-based application). This can be nasty, especially if you don’t have a well-working hotswap with a tool like JRebel in place. What you lose is Hilla support (within the same module) and, for example, the component picker from the development mode widget. The development mode indicator in the UI is also lost, but, for example, the live reload still works.
The following change set in my example repository shows how to do this. Note that the Hilla exclusion is unnecessary if you are not using a Spring Boot project. Check it out on GitHub below:
https://github.com/mstahv/pure-flow-244/commit/7201276f33ce5d70caa211692d13865a122454cb
“Downgrade” to Vaadin Router and dust of the remaining React dependencies
Vaadin 24.4 uses a different library to implement routing-related tasks on the client side. There are no changes in the Java API, but Vaadin now delegates client-side routing to a React Router-based solution for improved compatibility with the default Hilla stack. The Vaadin Flow dependencies also now bring in a module called flow-react, which makes it easier to create Flow components around client-side widgets implemented using React. If you use no other React-based components, dropping these features will noticeably slim down the amount of JS your end users will load when they enter your web app.
Also, you’ll have fewer front-end dependencies that end up in your SBOM, which again means fewer problems with a possible security department.
The following change demonstrates how to completely get rid of React, React Router, and various transitive dependencies they bring in the front-end bundle:
https://github.com/mstahv/pure-flow-244/commit/4feac7f333d93e4044bb1b7cbeec7ba7210681a1
Note, that if you wish to keep Copilot functional, you can't remove the flow-react module.
Benefits of the streamlined Vaadin Flow setup
The results of this “diet” are pretty nice. Development server startup time is less than half of the full platform (almost as fast as 24.3.12), the deployment artifact is at least 10MB smaller, and there is almost 200KB (uncompressed) less JS for the browsers to chew. Naturally, you’ll lose some new (and some old) features, but for some existing applications, this might be a fine trade-off.