Add-ons, Integrations and Tools

Maven Plugin

There is a Maven Plugin available for Vaadin 14. The plugin handles transpilation, minification and bundling of the front-end resources for the production version of the application. This is only necessary when you take the application into production, or want to test it with IE11.

By default there are no custom widgetsets or Sass themes that need compilation for development time in Vaadin 14. The plugin is thus not needed during development, except when testing with IE11.

Maven Archetypes

Besides the project bases that you can find at vaadin.com/hello-world-starters, there is also a vaadin-archetype-application available for you to get your project started.

Using Vaadin with Spring

Vaadin 14 has an integration for using it with Spring. The concept is mostly the same, but some features like the @ViewScope have been removed. Also there is currently no specific Spring Security support, although it can still be integrated manually. The Bakery App Starter for Vaadin Flow and Spring shows an example of this.

CDI Support

There is a CDI Add-on for easier CDI integration and to help using other Java EE features.

Vaadin Designer

In Vaadin 8, Designer was used to edit declarative files with a .html suffix. Despite the file format suffix, the declarative format was a generic XML syntax that mapped directly into a tree of Vaadin components on the server side. The XML was read by Vaadin at runtime on the server, and was never sent to the client. It’s important to note that the syntax only allowed component declarations.

In Vaadin 14 the high level concept is the same. There are still “html template” files that can be edited with Designer to declaratively compose views. But as with Vaadin 14 in general, the underlying technology has completely changed from what it was in Vaadin 8. Starting from Vaadin 14, the templates are written as JavaScript modules, which is a part of the web standard and works natively in modern browsers. The modules define templates and are rendered by the browser, and allow using encapsulated CSS, HTML, Web Components, and JavaScript. Using this new format allows Designer to do a couple of new things. As one major improvement, any template can be rendered inside one another. Furthermore, because templates are themselves Web Components, custom components are now fully supported by the Designer as well. On the other hand, HTML as a syntax is flexible enough that Designer might not work with all templates created in other ways.

Some features of Designer are not available for all Vaadin versions. See the Release Notes for an overview of the feature-level differences.

Migrating from Vaadin 8 Designs

As the underlying technology has been completely changed, Vaadin 8 designs are not compatible with Vaadin 14 applications. There are two paths to migration; either use Multiplatform Runtime (available through Prime or Enterprise subscription) to run a Vaadin 8 application inside a Vaadin 14 application, or migrate the HTML files manually. When migrating manually, the declarative component tree should be copied inside the <template> in a blank Vaadin 14 design, and then modified to fit the new element API’s.

Version Support

The new Designer plugin will support editing both Vaadin 8 and Vaadin 14 designs. Whether you are working with Vaadin 8 or Vaadin 14 designs, you should always update to the latest version of Designer to receive the latest bugfixes and enhancements.

Vaadin TestBench

Vaadin 14 provides access to the same TestBench features that are available for Vaadin 8 but the API has been tweaked in many places to correspond with the changes to the components/elements themselves, as well as the features they offer.

The ElementQuery operation $ no longer has methods such as caption() as there is no generic “caption” concept in Vaadin 14. On the other hand, there is instead a generic attribute(String key, String value) method which can be used to find elements based on any HTML attribute.

The element classes have been moved to a sub package of the component, e.g. com.vaadin.flow.component.textfield.testbench.TextFieldElement instead of com.vaadin.testbench.elements.TextFieldElement.

If any API is missing, there are low level helper methods available such as TestBenchElement.getProperty(String name) and TestBenchElement.callFunction(String name) which makes it easy to interact with any web component with a public JavaScript API.

Vaadin Charts

Vaadin Charts 6 shares a lot of the Java API from Charts 4 even though the underlying technology has been changed. However, almost all of the styling related Java API has been replaced with an ability to style charts using CSS. See list of breaking changes from Charts 4 to Charts 6.

Vaadin Board

Vaadin Board for Vaadin 14 contains the same API as Vaadin Board for Vaadin 8 but the API has been adapted to follow Vaadin 14 conventions, e.g. Row contains add(Component… component) instead of addComponent(Component) and addComponents(Component…).

Vaadin Spreadsheet

Currently we don’t have a version of Vaadin Spreadsheet for Vaadin 14.