Vaadin 14 is the latest LTS release of the Vaadin framework. It shipped tens of new features and enhancements and is the version that we recommend that all new users start out with.
But what if you already have a Vaadin project from before? Does it make sense to upgrade to Vaadin 14, or is it better to stay with the version you are on? In this blog post, I'll help you make an informed decision.
Should you upgrade from Vaadin 10-13 to Vaadin 14?
If you are on a recent version of Vaadin, the choice will be simple: yes, you should upgrade. There are very few API changes between Vaadin 10 and 14. Mostly you will get more components and a more refined and helpful Java API. The upgrade will put your project on the latest LTS release with five years of support.
By updating vaadin.version and adding the flow-server-compatibility-mode dependency in your pom.xml file, your project will run in Vaadin 14 compatibility mode. You get access to all new features except for the new @JSModule loading. The steps needed to enable compatibility mode are outlined in the Vaadin 14 upgrade documentation.
To use Vaadin 14 with the new frontend build system, you need to change a few more things as outlined in this tutorial.
Should you upgrade from Vaadin 8 to Vaadin 14?
The decision on whether to upgrade from Vaadin 8 is a bit more nuanced. It depends more on the status of your project and what your needs are.
Vaadin 8 is an LTS version that is supported until 2022. With a Prime subscription, you can extend this with up to 10 additional years, to 2032. So there is no immediate need to upgrade if you can live without the new features and enhancements in Vaadin 14.
I've listed some pros and cons of updating to Vaadin 14 below to help you make a choice.
Benefits of upgrading to Vaadin 14
An updated set of UI components
Vaadin 14 comes with an entirely new set of UI components that have been designed to work well on both mobile and desktop. The components are screen reader and keyboard accessible, and their look and feel can easily be customized.
The component-based Java development model you love is now more powerful
Vaadin 14 lets you build great looking web apps entirely in Java, just like in previous versions of Vaadin. What's new is that you now have access to the underlying DOM elements if you need to extend functionality or integrate third-party code. Without having to recompile a GWT widgetset.
A more expressive template format
Although most developers use the Java API, there are cases where a declarative HTML template is more convenient. Like when your designer hands you a ready-made HTML file for the app layout. You can freely mix and match components made with the Java API and the template API.
The flexible template format supports custom CSS and JavaScript. Vaadin manages state transfer between the server and the browser and lets you call Java methods directly from the template.
Built on web and industry standards
Vaadin 14 components are based on W3C web component standards. There is no GWT widgetset to compile. It also means that you can use the same components as simple HTML tags on any web page if you want to have a consistent experience between your website and app.
Vaadin 14 uses new CSS standards instead of Sass. You can now make dynamic changes to the theme, like letting your users change colors on the fly, all without a compilation step.
Frontend resources are handled by the de-facto standard npm package manager, giving you access to thousands of third-party components and libraries. Vaadin uses Webpack to optimize the code that is sent to the browser so that your users only download what they need.
Vaadin's Maven plugin handles both npm and Webpack for you, so you can continue to develop with familiar tools.
Apps that can be installed on desktop and mobile
Vaadin 14 apps are Progressive Web Applications by default. This allows your users to install them on their computers or mobile devices for easy access. You can customize how the application handles offline situations to provide a smooth app-like experience.
Future-proof
Vaadin 14 will receive updates until 2024 – 5 years from release. Prime customers have the option of extending support with up to 10 additional years, until 2034.
Drawbacks
Changes in the Java API
The new component set in Vaadin 14 is not 1:1 identical with the components in Vaadin 8. There are differences in functionality and API which require manual updating.
Changes in styling
The new standard CSS styling is not compatible with the previous Sass-based Valo theme. This means that any custom CSS you have will need to be rewritten.
Runs slower on Internet Explorer 11
IE 11 requires a polyfill library to support the new web standards that Vaadin 14 uses. This emulation of the missing APIs comes at a performance cost, making complex apps run slow.
Migrating from Vaadin 7 to 14. Should you first go to Vaadin 8 or directly to 14?
Vaadin 7 has reached its end-of-life. Unless you are a Prime customer with access to extended support, it is probably a good idea to upgrade to a later Vaadin version.
Many customers ask if it makes more sense to first migrate to Vaadin 8, or if it's better to upgrade directly to Vaadin 14.
For most projects, it makes more sense to move directly to Vaadin 14. This means you will only have one migration step and will get all the benefits of Vaadin 14 along with the longest support period.
The exception to this rule is if you still need to support IE11 for a while longer. In this case, it may be better to upgrade to Vaadin 8 using the compatibility mode so you can run on a supported version until you can drop IE 11 support. Once IE 11 support is no longer needed, you can upgrade to Vaadin 14.
Migrating in steps using the Multiplatform Runtime Tool
You also have the option of running Vaadin 7 and 8 applications within a Vaadin 14 application through the Multiplatform Runtime tool. This approach allows you to perform the migration gradually, or even keep the existing functionality as-is while building new views with Vaadin 14.
Conclusion
Most projects will benefit from migrating to Vaadin 14. The new version will give you access to a modern set of components, more powerful APIs, and the ability to install apps.