Vaadin


Vaadin is an open-source platform for web application development. The Vaadin Platform includes a set of web components, a Java web framework, and a set of tools and application starters. Its flagship product, Vaadin Platform allows the implementation of HTML5 web user interfaces using the Java Programming Language.

History

Development was first started as an adapter on top of the Millstone 3 open-source web framework released in the year 2002. It introduced an Ajax-based client communication and rendering engine. During 2006 this concept was then developed separately as a commercial product. As a consequence of this, a large part of Vaadin's server-side API is still compatible with Millstone's Swing-like APIs.
In early 2007 the product name was changed to IT Mill Toolkit and version 4 was released. It used a proprietary JavaScript Ajax-implementation for the client-side rendering, which made it rather complicated to implement new widgets. By the end of the year 2007 the proprietary client-side implementation was abandoned and GWT was integrated on top of the server-side components. At the same time, the product license was changed to the open source Apache License 2.0. The first production-ready release of IT Mill Toolkit 5 was made on March 4, 2009, after an over one year beta period.
On September 11, 2008, it was publicly announced that Michael Widenius–the main author of the original version of MySQL–invested in IT Mill, the developer of Vaadin. The size of the investment is undisclosed.
On May 20, 2009, IT Mill Toolkit changed its name to Vaadin Framework. The name originates from the Finnish word for doe, more precisely put, a female reindeer. It can also be translated from Finnish as "I insist". In addition to the name change, a pre-release of version 6 along with a community website was launched. Later, IT Mill Ltd, the company behind the open source Vaadin Framework, changed its name to Vaadin Ltd.
On March 30, 2010, Vaadin Directory was opened. It added a channel for distributing add-on components to the core Vaadin Framework, both for free or commercially. On launch date, there were 95 add-ons already available for download.
On February 22, 2017, Vaadin Framework 8 was released. Improvements include a re-written data binding API utilizing modern Java features such as type parameters and lambda expressions, and more efficient memory and CPU usage.
On June 25, 2018, Vaadin 10 was released. Vaadin 10 made possible to use Vaadin's components from any technology compatible with Web Components and enhanced Vaadin Directory to include Web Components distribution. Vaadin Flow–the next generation of Vaadin Framework–was presented as a server-side Java web framework on top of the Vaadin components.
On September 5, 2018, Vaadin 11 was released with Gradle integration, a few new components and Vaadin Charts 6.1.
On December 5, 2018, Vaadin 12 was released.
On March 6, 2019, Vaadin 13 was released.
On August 14, 2019, Vaadin 14 was released. It's the latest LTS version with free maintenance for 5 years. One of the main new features is the support for npm and Bower.
Latest stable version as of May 24, 2020, is Vaadin 14.2.0, released on May 20, 2020.
Vaadin 14.2.0 sees the introduction of pnpm as the packet manager.

Vaadin's components

Vaadin's components are a comprehensive set of Web Components for application developers. The components can be used in web documents and web frameworks compatible with Web Components. These components are the core of Vaadin Flow, a Java web framework that offers a Java API on top the each Vaadin component.

Basic usage

The Vaadin components are typically installed with npm or Bower. For example, the following command installs the vaadin-button component:
bower install vaadin/vaadin-button
Once installed, the component can be used in a web page as follows:





Click me


The following is a screenshot of the previous page:

Available components

The following table shows a list of the free open-source Web Components included in Vaadin:
ComponentElement nameDescription
Buttonvaadin-buttonElement for customized buttons
Checkboxvaadin-checkboxElement for customized checkboxes
Combo boxvaadin-combo-boxShows a list of items with filtering
Context menuvaadin-context-menuShows context dependent items for any element on the page
Date pickervaadin-date-pickerA date selection field with a scrollable month calendar
Dialogvaadin-dialogShows modal dialogs-
Dropdown menuvaadin-dropdown-menuCustomizable web component for dropdown menus
Form layoutvaadin-form-layoutConfigurable responsive layout for form elements
Gridvaadin-gridData grid / data table element
UI icon setvaadin-iconsA collection of 600+ icons
Itemvaadin-itemA container for item elements-
vaadin-list-boxReusable list boxes
Notificationvaadin-notificationCustomized notifications
Ordered layoutvaadin-ordered-layoutHorizontally or vertically align HTML elements
--
Themable input controls--
Progress barvaadin-progress-barCustomized progress bars
Radio buttonvaadin-radio-buttonCustomized radio buttons
Split layoutvaadin-split-layoutPartition a layout into resizeable areas
Navigation tabsvaadin-tabsCustomized tabs
Uploadvaadin-uploadUpload multiple files with progress indication

Vaadin Flow

Vaadin Flow is a web framework for building web applications and websites. Vaadin Flow programming model is similar to Vaadin Framework's–It uses Java as the programming language for creating web content. Vaadin Flow features a server-side architecture which means that most of the logic runs on the server. On the client-side, Vaadin Flow is built on top of Web Component standards.
Vaadin Flow includes Web Component support for Java developers and allows the use of HTML templates with automated client-server communication. It also includes APIs for routing, data binding, and server-side DOM manipulation.

Basic usage

The following is an elementary example of Vaadin Flow usage:
@Route
public class MainView extends VerticalLayout
The following is a screenshot of the previous application:

Features

User interface implementation with only Java

Vaadin Flow allows the usage of existing interface components and the implementation of new ones by using Java code running on the server side. It is possible to create and modify the DOM from the server side. The constructor in the following snippet of code shows how to create a new HTML div element, set its id attribute, and add a click listener:
@Route
public class MainView extends Div

Web Components integration

Web Components integration is provided through the @Tag and @Import annotations. The following snippet of code shows how to wrap an existing web component in a server-side Java component:
@Tag
@HtmlImport
public class JuicyAceEditor extends Div

Router

The Router is a core concept in Vaadin Flow and enables navigation via URLs. The Router allows the connection of URLs to user interface components. It is based on the HTML5 History API which allows end users to navigate through pages while preserving the page state. The following snippet of code shows how to use the @Route annotation to show the annotated component when the end user requests a URL like http://yourdomain.com/hello/world:
@Route
public class HelloWorldComponent extends Div

Data binding

Data binding is done through the Binder class. It allows synchronizing the values in input fields with server-side data models. The following snippet of code shows how to bind the name Java field of a hypothetical Person class to the value in a TextField component:
TextField nameField = new TextField;
Binder binder = new Binder<>;
binder.bind;

HTML templates

Vaadin Flow allows the definition of HTML templates with automated client-server communication and data binding. The following is an example of a Polymer-based template:






The following snippet of code shows how to connect the previous template to a server-side Java component:
@Tag
@HtmlImport
public class HelloWorld extends PolymerTemplate

Look and feel customization

Customization of the look and feel can be done with CSS, HTML custom styles, or by ready-made themes configuration.

Spring Integration

Vaadin Flow includes Spring Framework 5 and Spring Boot 2 integration.

Certifications

Vaadin offered 2 paid certification tracks that are taken online. This was to showcase the developer skills and knowledge about Vaadin Framework and related tools, for successful web application development.
To pass the certification you needed to go through the whole documentation and have completed a couple of web applications using the framework. The exams also test your knowledge in certain areas of Java SE, Java EE, GWT and HTML/JS/CSS.
Certifications for Vaadin 8, 10 and 14 are now available, since the release of the Learning Center on 3 December 2019. They consist of a series of videos divided into two main tracks, Foundation and Professional, and a final test to earn the certification.