Migrating from Vaadin 8 to Vaadin platform

Vaadin platform stands for Vaadin versions 10 and later, and is a continuum from Vaadin 8. While the core concepts, architecture and programming model stay the same, the platform is still a big leap forward:

In Vaadin platform the provided UI components are based on the Web Components standards. The components are written with the Polymer library, instead of GWT. Building a component based on the Web Components standards makes it possible to reuse it with any modern web framework, instead of just limiting it to Vaadin or GWT. Vaadin Flow is the Java framework in the platform, and it is a total rewrite of the Vaadin Framework. It makes all the components available for server side Java developers. It gives a much better toolset for building any reusable UI components, not just Web Components, and does not force you to use GWT for that.

Switching from Vaadin 8 to Vaadin platform could be considered as switching from a modern car to a flying car - the use cases are the same, the features are mostly the same, except the new technology brings more capabilities and potential for the future. Some features may have been removed to make way for new things.

Migration Strategies

There are different migration strategies for Vaadin 8 applications:

  • Staying with Vaadin Eight - it is Great! And supported at least until 2022.

  • Using the upcoming Multiplatform Runtime from the Prime subscription to run views or components from a V8 app inside Vaadin platform for

    • Migrating the application bit by bit

    • Extending the application with new parts implemented with Vaadin platform

  • Transform an existing application to Vaadin platform

  • Fresh start by redesigning an application for Vaadin platform

These options are described in more detail in the next chapter.

The easiest and fastest way to understand what migrating to Vaadin platform means to you is to use our migration assessment service. What’s the most suitable strategy in your case and what’s the needed effort? All of these questions get answered by our experts.

In addition, migration from V8 to Vaadin platform is illustrated in a simple example here. The application that is chosen as an example is Bookstore Starter and the whole migration story is described step-by-step.

The More Things Change The More They Stay The Same

Most of the migration documentation covers the features that have changed or been removed in Vaadin platform. But not everything has changed and at the core it is still the same product. The following concepts are not covered, since they have stayed the same between platform and 8:

  • Using high level APIs to compose UIs with ready-made components in Java on the server side

  • Stateful server-side architecture

  • Automated client-server communication using request-response or server push

  • Minimum server requirements: Java 8 and Servlet 3.0

  • Minimum browsers supported: Internet Explorer 11 and evergreen browsers

  • Data Binding API with Binder and DataProvider

A major part of any application, the API for binding data to components, was modernized in Vaadin 8 with the introduction of Binder and DataProvider. These same concepts are used in platform and the API is mostly the same.

In Vaadin platform, building UIs is still the same. By using ready made components to make beautiful apps and it is super easy by using high level type-safe Java APIs. But now the components have been redesigned to provide better end user experience, but at the same time the initial set of components is smaller than in V8.§ More components will be added later on. Creating your own components is a lot easier than before.

The following is the list of things that have changed, which does not list all the new features of Vaadin platform, but the differences with V8:

Are you planning on migrating your application? Get help from Vaadin experts.

Open in a
new tab
export class RenderBanner extends HTMLElement {
  connectedCallback() {
    this.renderBanner();
  }

  renderBanner() {
    let bannerWrapper = document.getElementById('tocBanner');

    if (bannerWrapper) {
      return;
    }

    let tocEl = document.getElementById('toc');

    // Add an empty ToC div in case page doesn't have one.
    if (!tocEl) {
      const pageTitle = document.querySelector(
        'main > article > header[class^=PageHeader-module--pageHeader]'
      );
      tocEl = document.createElement('div');
      tocEl.classList.add('toc');

      pageTitle?.insertAdjacentElement('afterend', tocEl);
    }

    // Prepare banner container
    bannerWrapper = document.createElement('div');
    bannerWrapper.id = 'tocBanner';
    tocEl?.appendChild(bannerWrapper);

    // Banner elements
    const text = document.querySelector('.toc-banner-source-text')?.innerHTML;
    const link = document.querySelector('.toc-banner-source-link')?.textContent;

    const bannerHtml = `<div class='toc-banner'>
          <a href='${link}'>
            <div class="toc-banner--img"></div>
            <div class='toc-banner--content'>${text}</div>
          </a>
        </div>`;

    bannerWrapper.innerHTML = bannerHtml;

    // Add banner image
    const imgSource = document.querySelector('.toc-banner-source .image');
    const imgTarget = bannerWrapper.querySelector('.toc-banner--img');

    if (imgSource && imgTarget) {
      imgTarget.appendChild(imgSource);
    }
  }
}