Vaadin 12

Here are the highlighted new and improved features in the Vaadin 12 release. There are a lot of bug fixes and smaller improvements not mentioned here, but in the platform release notes.

See full release notes

Highlighted new and updated features

Components

  • App Layout

    App Layout is a component to be used as the main layout of your application. It gives you a content area and a responsive navigation bar, which is displayed at the top on larger screens and the bottom on smaller screens. Supports setting one level of navigation elements with an icon and a text. You can also set a branding text or image to be shown.

  • Checkbox Group

    The new Checkbox group component simplifies working with multiple values produced by the contained Checkboxes.

  • Context Menu

    Context Menu web component now has a server-side Java API for adding a context menu for any Vaadin component. Vaadin Grid has support for handling context menu item clicks for each row.

  • CRUD Pro

    CRUD stands for Create, Read, Update, Delete. The CRUD component is a quick way to make a list of entries editable. It gives you a Grid listing all the entries and an editor for the entries. You can click a row to edit, press new item to add a new one and press delete to remove. Vaadin CRUD is a database agnostic component.

  • Time Picker

    An input field for selecting a time with a mouse, keyboard or touch device.

  • TreeGrid

    TreeGrid feature was available for the Grid web component already earlier, but now it’s available for Vaadin Flow users as a separate Java component. Display hierarchical data in a data grid with tree-like expandable items.

  • Grid inline editing

    It is now possible to allow the users to edit the data directly in the Grid component. Like before, both buffered and non-buffered versions of the editing are supported. Now it is also possible to change the used editor component on the fly depending on the data. See the demos for usage examples.

  • Grid simple column config

    The new <vaadin-grid> convenience columns and properties eliminate lots of previously required boilerplate wiring in the most typical use cases.

  • ComboBox lazy-loading

    When using large data sets, the component doesn't send all the data to the client immediately. Instead, the client requests smaller sets of data as needed, as the user scrolls down the overlay.

  • Content renderer functions

    Use of <template> tags together with Polymer syntax data-binding is no longer required with the newest generation of Vaadin's Web Components. Instead, a developer can assign a "renderer" function hook to components such as <vaadin-dialog> or <vaadin-grid> and prepare the function to programmatically populate the component upon invocation. This will make if more straightforward for developers using JavaScript frameworks other than Polymer to integrate Vaadin Components to their applications.

  • Components available as npm packages

    All Vaadin web components are available also as npm packages in addition to Bower. You should not mix Bower and npm versions in the same application. Flow still uses Bower and WebJars for frontend dependencies.

Themes and styling

  • Material Theme

    The Material theme for Vaadin components is an implementation of Google’s Material Design specs. The new theme is an alternative for the default Lumo theme, and both are also supported in the future.

  • Component theme variants in Java

    Now there is a Java API for choosing an alternative built-in component style from Lumo or Material theme for any of the components that have a variant. The theme variants are exposed as constants.

Integrations

  • CDI support

    With a separate vaadin-cdi module, you can make Vaadin components CDI managed beans and start using @Inject. There are custom contexts for Vaadin Service, Session, UI, and Route.

  • OSGi support

    The Vaadin platform can now be used in OSGi applications.

    The best way to get started is to take the Project Base for Flow and OSGi to start making your web application bundle for OSGi container.

  • PWA

    All progressive web applications have the same common features that enable the native-app-like behavior. With a simple annotation, Flow will automatically serve web manifest, service worker, icons, offline page and a prompt to install the app on home screen.

  • Multi-platform runtime PRIME

    Multiplatform Runtime lets you run your Vaadin 7 or Vaadin 8 application inside Vaadin Flow application. The runtime works as an adapter so that Flow understands your legacy components. Legacy components and the Vaadin platform components can live together on the same view at the same time.

Performance

  • Performance improvements - Memory

    Server-side memory optimizations reduce the heap size significantly. For example, the Beverage Buddy Starter sees 48% reduce down to 134KB per session with one UI open.

  • Performance improvements - Loading UI after server restart

    Internal improvements make the first loading of the UI faster after a server restart. For example, the Beverage Buddy application MainView opens 50 % faster than before and the editor dialog load time is reduced by 85 % to 330ms.

Designer

  • Redesigned UI

    Redesigned user experience based on user feedback. New Palette, Outline and Properties. Preconfigured snippets for components and bigger UI patterns to get started quickly.

  • Theme switcher

    Change the component theme for viewing designs. You can choose either Valo or Material theme. For a complete control over the styling, you can also choose not to have any theme applied.

Update Instructions

For users of Vaadin 10 or later, updating the version number in the vaadin-bom is enough. Notice, that a few breaking changes were introduced in vaadin-combo-box. See Combo Box release notes for more details.

Browser Compatibility

IE11
Latest
Latest
Latest
iOS9

Java Compatibility

Java 8
Java 9
Java 10
Java 11