Vaadin

Vaadin Ltd
Company type	Private
Industry	Software development
Predecessor	IT Mill Toolkit
Founded	2002; 24 years ago
Headquarters	Helsinki, Finland
Products	Vaadin platform, Vaadin Flow, Hilla (Vaadin Fusion), Vaadin Directory
Owner	Private investors (including Michael Widenius)
Website	vaadin.com

Vaadin () is an open-source platform designed for developing web applications in Java. It offers a collection of Web Components, a Java-based web framework, and a suite of tools that allow developers to build contemporary web GUIs using solely Java, solely TypeScript, or a combination of both.

History

The origins of Vaadin trace back to 2002 when it was created as an adapter for the Millstone 3 open-source web framework, featuring an Ajax-powered client communication and rendering system. By 2006, it had transformed into a commercial offering. A significant portion of Vaadin's server-side API still retains compatibility with Millstone's Swing-like APIs.

In early 2007, the product was rebranded as IT Mill Toolkit version 4, adopting a proprietary JavaScript Ajax client-side rendering approach that complicated widget development. This method was replaced later that year by integration with the GWT, layered over server-side components. Concurrently, the licensing shifted to the open source Apache License 2.0. After more than a year in beta, IT Mill Toolkit 5 achieved production-ready status in March 2009.

On September 11, 2008, Michael Widenius, the original creator of MySQL, made an undisclosed investment in IT Mill, the Finnish firm responsible for Vaadin.

The name changed from IT Mill Toolkit to Vaadin Framework on May 20, 2009. The term "Vaadin" is derived from the Finnish word meaning "doe" or "I insist." Alongside this rebranding, version 6 pre-release was introduced and a community portal was launched. Subsequently, IT Mill Ltd adopted the name Vaadin Ltd.

Vaadin Directory was launched on March 30, 2010, establishing a marketplace for add-on components—both free and commercial—with an initial catalog of 95 extensions.

Release history
LTS Version	Release date	Notes and new features since previous LTS
6	20 May 2009	Initial launch
7	3 February 2013
8	21 February 2017	Unveiled a redesigned data binding API utilizing modern Java capabilities such as type parameters and lambdas; enhanced memory usage and CPU performance.
10	25 June 2018	Allowed Vaadin UI components to be used within any technology supporting Web Components; Vaadin Directory began distributing Web Components; introduced Vaadin Flow as a server-side Java web framework built on Vaadin UI components.
14	14 August 2019	Added new UI components along with support for CDI and OSGi; integrated Gradle build system; enabled dynamic route registration; introduced keyboard shortcuts API; and incorporated support for npm and Bower.
23	1 March 2022	Simplified the release process; included new UI components; revamped the design system; introduced feature flags; designated npm as the default package manager.

Vaadin Flow (Java API)

Vaadin Flow—previously known as Vaadin Framework—is a Java web framework tailored for constructing web applications and websites. It empowers developers to design User Interfaces (UIs) purely in Java without requiring direct interaction with HTML or JavaScript. Utilizing a server-centric architecture, most UI logic runs on the server side to bolster security. The client side is based on Web Component standards, with client-server communication handled transparently via WebSocket or HTTP, employing lightweight JSON messages that keep the browser UI synchronized with the server state.

The Java API provided by Vaadin Flow includes components such as TextField, Button, ComboBox, and Grid. These can be styled and organized using layout classes like VerticalLayout and HorizontalLayout. Functional behavior is implemented through event listeners responding to user interactions such as clicks or input changes. Views are defined by custom Java classes annotated with @Route, which map them to specific URL paths. For example:<syntaxhighlight lang="java"> @Route("hello-world") public class MainView extends VerticalLayout {

   public MainView() {
       TextField textField = new TextField("Enter your name");
       Button button = new Button("Send");
       button.addClickListener(event ->
               add(new Paragraph("Hello, " + textField.getValue()))
       );
       add(textField, button);
   }

} </syntaxhighlight>

Hilla (TypeScript API)

Hilla—previously known as Vaadin Fusion—facilitates the integration of Spring Boot Java backends with reactive front-end applications developed in TypeScript. This framework ensures complete type safety by merging server-side Java business logic with client-side TypeScript code. The user interface is built using Lit, a minimalistic library designed for crafting Web Components. Below is a sample of a simple Hilla view written in TypeScript:<syntaxhighlight lang="typescript"> @customElement('hello-world-view') export class HelloWorldView extends LitElement {

 render() {
   return html`

       <vaadin-text-field label="Your name"></vaadin-text-field>
       <vaadin-button @click="${this.sayHello}">Say hello</vaadin-button>

   `;
 }
 sayHello() {
   showNotification('Hello!');
 }

} </syntaxhighlight>

Vaadin's UI components

Vaadin provides an extensive collection of User Interface (UI) components implemented as Web Components. These can be utilized via a server-side Java API (Vaadin Flow) or directly through HTML. The components are designed to support both mouse and touch interactions, allow CSS customization, adhere to WAI-ARIA accessibility standards, enable keyboard navigation and screen reader compatibility, and support right-to-left languages.

The following table outlines essential Vaadin UI components, listing their corresponding Java class names or HTML element tags, descriptions, and licensing details (either Apache 2.0 or Commercial):

Vaadin components
Java class	HTML element name	Description	License
`Accordion`	`vaadin-accordion`	Stacked panels that expand vertically	Apache 2.0
`Anchor`	`a`	Hyperlink directing to a URL	Apache 2.0
`AppLayout`	`vaadin-app-layout`	Standard layout structure for applications	Apache 2.0
`Avatar`	`vaadin-avatar`	Visual icon representing a user	Apache 2.0
(none)	`vaadin-badge`	Colored label element displaying text	Apache 2.0
`Board`	`vaadin-board-row`	Responsive layout manager for views	Commercial
`Button`	`vaadin-button`	Clickable button for user actions	Apache 2.0
`Crud`	`vaadin-crud`	Component for Create, Read, Update, Delete operations	Commercial
`Chart`	`vaadin-chart`	Interactive charts including bar, pie, and line types	Commercial
`Checkbox`	`vaadin-checkbox`	Input field for binary selections	Apache 2.0
`Combo box`	`vaadin-combo-box`	Selectable list with filtering capabilities	Apache 2.0
`ConfirmDialog`	`vaadin-confirm-dialog`	Modal dialog for confirmation prompts	Apache 2.0
`ContextMenu`	`vaadin-context-menu`	Menu activated by right-click or long press	Apache 2.0
`CookieConsent`	`vaadin-cookie-consent`	Banner for privacy compliance (GDPR, CCPA)	Commercial
`CustomField`	`vaadin-custom-field`	Container combining multiple components into one field	Apache 2.0
`DatePicker`	`vaadin-date-picker`	Date input via text or calendar popup	Apache 2.0
`DateTimePicker`	< code > vaadin-date-time-picker </ code >	Input field for selecting date and time	Apache 2.0	-	< code > Details </ code >	< code > vaadin-details </ code >	Panel with expandable content	Apache 2.0	-	< code > Dialog </ code >	< code > vaadin-dialog </ code >	Popup window overlaying components	Apache 2.0	-	< code > EmailField </ code >	< code > vaadin-email-field </ code >	Text field restricted to email addresses	Apache 2.0	-	< code > Form layout </ code >	< code > vaadin-form-layout </ code >	Responsive multi-column form arrangement	Apache 2.0	-	< code > Grid </ code >	< code > vaadin-grid </ code >	Table/grid component for displaying tabular data	Apache 2.0	-	< code > GridPro </ code >	< code > vaadin-grid-pro </ code >	Inline editing with comprehensive keyboard support	Commercial	-	< code > HorizontalLayout </ code >	< code > vaadin-horizontal-layout </ code >	Arranges components horizontally in a row	Apache 2.0	-	< code > Icon </ code >	< code > iron-icon </ code >	Custom icons from a set of over 600 icons	Apache 2.0	-	< code > Image </ code >	< code > img </ code >	Displays images sourced from resources or runtime data	Apache 2.0	-	< code > ListBox </ code >	< code > vaadin-list-box </ code >	Scrollable list allowing single or multiple selections	Apache 2.0	-	< code > LoginForm </ code >	< code > vaadin-login-form </ code >	Component providing login form functionality	Apache 2.0	-	< code > LoginOverlay </ code >	< code > vaadin-login-overlay </ code >	Modal or full-screen overlay login form component	Apache 2.0
< code > MenuBar </ code >	< code > vaadin-menu-bar </ code >	Horizontal bar with buttons supporting hierarchical menus	Apache 2.0
< code > MessageList </ code >	< code > vaadin-message-list </ code >	Displays messages in chat or comment sections	Apache 2.0
< code > Notification </ code >	< code > vaadin-notification </ code >	Overlay component providing user feedback	Apache 2.0
< code > NumberField </ code >	< code > vaadin-number-field </ code >	Input field accepting decimal or integer numbers	Apache 2.0
< code > PasswordField </ code >	< code > vaadin-password-field </ code >	Password input with masked characters	Apache 2.0
< code > ProgressBar </ code >	< code > vaadin-progress-bar </ code >	Visual indicator of task or process completion	Apache 2.0
< code > Radio button </ code >	< code > vaadin-radio-button </ code >	Selection of one option among mutually exclusive choices	Apache 2.0
< code > RichTextEditor </ co de >	< co de > vaadi n-rich-text-editor </ co de >	Input field supporting rich text formatting	Commercial
< co de > Scroller </ co de >	< co de > vaadi n-scroller </ co de >	Component enabling scrollable content containers	Apache 2.0
< co de > Select </ co de >	< co de > vaadi n-select </ co de >	Input field for selecting a single value	Apache 2 .0
SplitLayout	vaadi n-split-layout	Two resizable content areas separated by draggable splitter	Apache 2 .0
Tabs	vaadi n-tabs	Component organizing content into tabs/sections	Apache 2 .0
TextArea	vaadi n-text-area	Multi-line text input component	Apache 2 .0
TextField	vaadi n-text-field	Component for text input and editing	Apache 2 .0
TimePicker	vaadi n-time-picker	Input field for selecting time values	Apache 2 .0
TreeGrid	vaadi n-grid	Hierarchical grid displaying expandable tabular data nodes	Apache 2 .0
Upload	vaadi n-upload	File upload component showing progress and status indicators	Apache 2 .0
VerticalLayout	vaadi n-vertical-layout	Arranges components vertically in a column format	Apache 2 .0

Certifications

Vaadin provides two distinct certification paths designed to confirm developer expertise with Vaadin Flow:

Certified Vaadin 14 Developer
Certified Vaadin 14 Professional

Achieving certification involves reviewing official documentation, engaging with instructional video content, and successfully completing an online examination.

Previous certification programs, which are no longer available, consisted of:

Vaadin Online Exam for Vaadin 7 Certified Developer
Vaadin Online Exam for Vaadin 8 Certified Developer

External links

Vaadin on GitHub