Vaadin

<h2 id="history">History</h2>
<p>Development was first started as an adapter on top of the Millstone 3 <a href="/facts/Open-source_software/HzTaB8E9">open-source</a> web framework released in the year 2002. It introduced an <a href="/facts/Ajax_(programming)/cS0P0whT">Ajax</a>-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 <a href="/facts/Server-side/JqukWyaA">server-side</a> <a href="/facts/Application_programming_interface/GMlN4vUr">API</a> is still compatible with Millstone's <a href="/facts/Swing_(Java)/xFbyDcjS">Swing-like</a> APIs.
</p><p>In early 2007 the product name was changed to <a href="/facts/IT_Mill_Toolkit/DR6Rvp61">IT Mill Toolkit</a> and version 4 was released. It used a proprietary <a href="/facts/JavaScript/XhhIIEsl">JavaScript</a> 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 <a href="/facts/Google_Web_Toolkit/k88Ns10e">GWT</a> was integrated on top of the server-side components. At the same time, the product license was changed to the open source <a href="/facts/Apache_License/5AeIjas8">Apache License 2.0</a>. The first production-ready release of IT Mill Toolkit 5 was made on March 4, 2009, after an over one year beta period.
</p><p>On September 11, 2008, it was publicly announced<a class="footnote-ref" id="fnref:1" href="#fn:1"><sup>1</sup></a><a class="footnote-ref" id="fnref:2" href="#fn:2"><sup>2</sup></a> that <a href="/facts/Michael_Widenius/1TTUlFhj">Michael Widenius</a>–the main author of the original version of <a href="/facts/MySQL/QEEDNBDP">MySQL</a>–invested in IT Mill, the Finnish developer of Vaadin.<a class="footnote-ref" id="fnref:3" href="#fn:3"><sup>3</sup></a> The size of the investment is undisclosed.
</p><p>On May 20, 2009, IT Mill Toolkit changed its name to Vaadin Framework. The name originates from the <a href="/facts/Finnish_language/lBuEIgs0">Finnish</a> word for <a href="/facts/List_of_animal_names/flhD953S">doe</a>, more precisely put, a female <a href="/facts/Reindeer/LXSh8svy">reindeer</a>. 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.
</p><p>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.<a class="footnote-ref" id="fnref:4" href="#fn:4"><sup>4</sup></a>
</p>

Release history<table><tbody><tr><th>LTS Version</th><th>Release date</th><th>Notes and new features since the previous LTS version launch</th></tr><tr><td>6</td><td>20 May 2009</td><td>Initial release</td></tr><tr><td>7</td><td>3 February 2013</td><td></td></tr><tr><td>8</td><td>21 February 2017</td><td>Improvements include a re-written data binding API that uses modern Java features such as type parameters and lambda expressions, and more efficient memory and CPU usage.<a class="footnote-ref" id="fnref:5" href="#fn:5"><sup>5</sup></a></td></tr><tr><td>10</td><td>25 June 2018</td><td>It's possible to use Vaadin's UI components from any technology compatible with <a href="/facts/Web_Components/zQzBNnef">Web Components</a>. Vaadin Directory adds Web Components distribution. Vaadin Flow—the next generation of Vaadin Framework—was presented as a server-side Java web framework on top of Vaadin's UI components.<a class="footnote-ref" id="fnref:6" href="#fn:6"><sup>6</sup></a></td></tr><tr><td>14</td><td>14 August 2019</td><td>New UI components, <a href="/facts/Context_and_Dependency_Injection/LFQVV4Ik">CDI</a> and <a href="/facts/OSGi/qh2yzbsu">OSGi</a> support, <a href="/facts/Gradle/eqsXvwI7">Gradle</a> integration, dynamic registration of routes, keyboard shortcuts API, support for <a href="/facts/Npm_(software)/wJg3ebn2">npm</a> and Bower.<a class="footnote-ref" id="fnref:7" href="#fn:7"><sup>7</sup></a></td></tr><tr><td>23</td><td>1 March 2022</td><td>New release model.<a class="footnote-ref" id="fnref:8" href="#fn:8"><sup>8</sup></a> New UI components, reworked design system, feature flags, <a href="/facts/Npm_(software)/wJg3ebn2">npm</a> is now the default package manager.<a class="footnote-ref" id="fnref:9" href="#fn:9"><sup>9</sup></a></td></tr></tbody></table>
<h2 id="vaadin-flow-java-api">Vaadin Flow (Java API)</h2>
<p>Vaadin Flow (formerly Vaadin Framework) is a Java web framework for building <a href="/facts/Web_application/BLkF3BIN">web applications</a> and <a href="/facts/Website/SAsjJnca">websites</a>. Vaadin Flow's programming model allows developers to use <a href="/facts/Java_(programming_language)/9ScgFyAL">Java</a> as the programming language for implementing User Interfaces (UIs) without having to directly use HTML or JavaScript. Vaadin Flow features a server-side architecture which means that most of the UI logic runs securely on the server reducing the exposure to attackers. On the client-side, Vaadin Flow is built on top of <a href="/facts/Web_Components/zQzBNnef">Web Component</a> standards. The client/server communication is automatically handled through <a href="/facts/WebSocket/NcQrqpnv">WebSocket</a> or <a href="/facts/Hypertext_Transfer_Protocol/TWtvf7JD">HTTP</a> with light <a href="/facts/JSON/bs1rUAhd">JSON</a> messages that update both, the UI in the browser and the UI state in the server.
</p><p>
Vaadin Flow's Java API includes classes such as TextField, Button, ComboBox, Grid, and many others that can be configured, styled, and added into layout objects instances of classes such as VerticalLayout, HorizontalLayout, SplitLayout, and others. Behaviour is implemented by adding listeners to events such as clicks, input value changes, and others. Views are created by custom Java classes that implement another UI component (custom or provided by the framework). This view classes are annotated with @Route to expose them to the browser with a specific <a href="/facts/URL/pPD5g7Wq">URL</a>. The following example illustrates these concepts: </p>@Route("hello-world") // exposes the view through http://localhost:8080/hello-world
public class MainView extends VerticalLayout { // extends an existing UI component

public MainView() {
        // creates a text field
        TextField textField = new TextField("Enter your name");

// creates a button
        Button button = new Button("Send");
        
        // adds behaviour to the button using the click event
        button.addClickListener(event ->
                add(new Paragraph("Hello, " + textField.getValue()))
        );

// adds the UI components to the view (VerticalLayout)
        add(textField, button);
    }
}
<p>The following is a screenshot of the previous example: 
</p>
<h2 id="hilla-typescript-api">Hilla (TypeScript API)</h2>
<p>Hilla (formerly Vaadin Fusion) is a web framework that integrates <a href="/facts/Spring_Boot/ajIwLM73">Spring Boot</a> Java backends with reactive front ends implemented in <a href="/facts/TypeScript/W9J27V1N">TypeScript</a>. This combination offers a fully type-safe development platform by combining server-side business logic in Java and type-safety in the client side with the TypeScript programming language. Views are implemented using Lit—a lightweight library for creating <a href="/facts/Web_Components/zQzBNnef">Web Components</a>. The following is an example of a basic view implemented with Hilla:</p>@customElement('hello-world-view')
export class HelloWorldView extends LitElement {
  render() {
    return html`
      <div>
        <vaadin-text-field label="Your name"></vaadin-text-field>
        <vaadin-button @click="${this.sayHello}">Say hello</vaadin-button>
      </div>
    `;
  }

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

<h2 id="vaadins-ui-components">Vaadin's UI components</h2>
<p>Vaadin includes a set of User Interface (UI) components implemented as <a href="/facts/Web_Components/zQzBNnef">Web Components</a>. These components include a server-side Java API (Vaadin Flow) but can also be used directly in HTML documents as well. Vaadin's UI components work with mouse and touch events, can be customized with CSS, are compatible with <a href="/facts/WAI-ARIA/WGKp5XVK">WAI-ARIA</a>, include keyboard and screen readers support, and support <a href="/facts/Right-to-left_language/BJEXET2w">right-to-left languages</a>.
</p><p>The following table shows a list of the UI components included in Vaadin:
</p>
Vaadin components<table><tbody><tr><th>Java class</th><th>HTML element name</th><th>Description</th><th>License</th></tr><tr><td>Accordion</td><td>vaadin-accordion</td><td>A vertically stacked set of expandable panels</td><td>Apache 2.0</td></tr><tr><td>Anchor</td><td>a</td><td>Allows navigation to a given URL</td><td>Apache 2.0</td></tr><tr><td>AppLayout</td><td>vaadin-app-layout</td><td>A common application layout structure</td><td>Apache 2.0</td></tr><tr><td>Avatar</td><td>vaadin-avatar</td><td>A graphical representation of a person</td><td>Apache 2.0</td></tr><tr><td>(not available)</td><td>vaadin-badge</td><td>A coloured text element for labelling content</td><td>Apache 2.0</td></tr><tr><td>Board</td><td>vaadin-board-row</td><td>Layout component for building responsive views</td><td>Commercial</td></tr><tr><td>Button</td><td>vaadin-button</td><td>Allows users to perform actions</td><td>Apache 2.0</td></tr><tr><td>Crud</td><td>vaadin-crud</td><td>A component to manage Create, Read, Update, and Delete operations</td><td>Commercial</td></tr><tr><td>Chart</td><td>vaadin-chart</td><td>Interactive charts with different types such as bar, pie, line, and others</td><td>Commercial</td></tr><tr><td>Checkbox</td><td>vaadin-checkbox</td><td>An input field representing a binary choice</td><td>Apache 2.0</td></tr><tr><td>Combo box</td><td>vaadin-combo-box</td><td>Shows a list of items that can be filtered</td><td>Apache 2.0</td></tr><tr><td>ConfirmDialog</td><td>vaadin-confirm-dialog</td><td>A modal Dialog used to confirm user actions</td><td>Apache 2.0</td></tr><tr><td>ContextMenu</td><td>vaadin-context-menu</td><td>A menu that appears on right-click or long touch press</td><td>Apache 2.0</td></tr><tr><td>CookieConsent</td><td>vaadin-cookie-consent</td><td>A banner that to comply with privacy laws such as <a href="/facts/General_Data_Protection_Regulation/RMLY6ohr">GDPR</a> and <a href="/facts/California_Consumer_Privacy_Act/SWDSaUb1">CCPA</a></td><td>Commercial</td></tr><tr><td>CustomField</td><td>vaadin-custom-field</td><td>A component for wrapping multiple components as a single field</td><td>Apache 2.0</td></tr><tr><td>DatePicker</td><td>vaadin-date-picker</td><td>Allows to enter a date by typing or by selecting from a calendar overlay</td><td>Apache 2.0</td></tr><tr><td>DateTimePicker</td><td>vaadin-date-time-picker</td><td>An input field for selecting both a date and a time</td><td>Apache 2.0</td></tr><tr><td>Details</td><td>vaadin-details</td><td>An expandable panel for showing and hiding content</td><td>Apache 2.0</td></tr><tr><td>Dialog</td><td>vaadin-dialog</td><td>A popup window to show other components in an overlay</td><td>Apache 2.0</td></tr><tr><td>EmailField</td><td>vaadin-email-field</td><td>A text field that only accepts email addresses as input</td><td>Apache 2.0</td></tr><tr><td>Form layout</td><td>vaadin-form-layout</td><td>A layout for building responsive forms with multiple columns</td><td>Apache 2.0</td></tr><tr><td>Grid</td><td>vaadin-grid</td><td>Data grid or data table component for tabular data</td><td>Apache 2.0</td></tr><tr><td>GridPro</td><td>vaadin-grid-pro</td><td>Provides inline editing with full keyboard navigation</td><td>Commercial</td></tr><tr><td>HorizontalLayout</td><td>vaadin-horizontal-layout</td><td>Places components side-by-side in a row</td><td>Apache 2.0</td></tr><tr><td>Icon</td><td>iron-icon</td><td>Shows a custom icon or from a collection of 600+ icons (VaadinIcons enum)</td><td>Apache 2.0</td></tr><tr><td>Image</td><td>img</td><td>Shows an image from a resource file or from binary data generated at runtime</td><td>Apache 2.0</td></tr><tr><td>ListBox</td><td>vaadin-list-box</td><td>Allows to select one or more values from a scrollable list of items</td><td>Apache 2.0</td></tr><tr><td>LoginForm</td><td>vaadin-login-form</td><td>A component that contains a login form</td><td>Apache 2.0</td></tr><tr><td>LoginOverlay</td><td>vaadin-login-overlay</td><td>A modal or full-screen login form</td><td>Apache 2.0</td></tr><tr><td>MenuBar</td><td>vaadin-menu-bar</td><td>A horizontal button bar with hierarchical drop-down menus</td><td>Apache 2.0</td></tr><tr><td>MessageList</td><td>vaadin-message-list</td><td>A component for displaying messages and building chats and comment sections</td><td>Apache 2.0</td></tr><tr><td>Notification</td><td>vaadin-notification</td><td>Overlay component used to provide feedback to the user</td><td>Apache 2.0</td></tr><tr><td>NumberField</td><td>vaadin-number-field</td><td>A text field that only accepts numeric input (decimal, integral, or big decimal)</td><td>Apache 2.0</td></tr><tr><td>PasswordField</td><td>vaadin-password-field</td><td>An input field for entering passwords masked by default</td><td>Apache 2.0</td></tr><tr><td>ProgressBar</td><td>vaadin-progress-bar</td><td>Shows the completion status of a task or process</td><td>Apache 2.0</td></tr><tr><td>Radio button</td><td>vaadin-radio-button</td><td>Allows to select exactly one value from a list of related but mutually exclusive options</td><td>Apache 2.0</td></tr><tr><td>RichTextEditor</td><td>vaadin-rich-text-editor</td><td>An input field for entering rich text</td><td>Commercial</td></tr><tr><td>Scroller</td><td>vaadin-scroller</td><td>A component container for creating scrollable areas in the UI</td><td>Apache 2.0</td></tr><tr><td>Select</td><td>vaadin-select</td><td>An input field component for choosing a single value from a set of options</td><td>Apache 2.0</td></tr><tr><td>SplitLayout</td><td>vaadin-split-layout</td><td>A component with two content areas and a draggable split handle between them</td><td>Apache 2.0</td></tr><tr><td>Tabs</td><td>vaadin-tabs</td><td>Organize and group content into sections</td><td>Apache 2.0</td></tr><tr><td>TextArea</td><td>vaadin-text-area</td><td>An input field component for multi-line text input</td><td>Apache 2.0</td></tr><tr><td>TextField</td><td>vaadin-text-field</td><td>A component for introducing and editing text</td><td>Apache 2.0</td></tr><tr><td>TimePicker</td><td>vaadin-time-picker</td><td>An input field for entering or selecting a specific time</td><td>Apache 2.0</td></tr><tr><td>TreeGrid</td><td>vaadin-grid</td><td>A component for displaying hierarchical tabular data grouped into expandable and collapsible nodes</td><td>Apache 2.0</td></tr><tr><td>Upload</td><td>vaadin-upload</td><td>A component for uploading one or more files with upload progress and status</td><td>Apache 2.0</td></tr><tr><td>VerticalLayout</td><td>vaadin-vertical-layout</td><td>Places components top-to-bottom in a column</td><td>Apache 2.0</td></tr></tbody></table>
<h2 id="certifications">Certifications</h2>
<p>Vaadin offers two certification tracks to prove that a developer is proficient with Vaadin Flow:<a class="footnote-ref" id="fnref:10" href="#fn:10"><sup>10</sup></a>
</p>
<ul><li>Certified Vaadin 14 Developer</li>
<li>Certified Vaadin 14 Professional</li></ul>
<p>To pass the certification, a developer should go through the documentation, follow the training videos, and take an online test.
</p><p>Previous (now unavailable) certifications included:
</p>
<ul><li>Vaadin Online Exam for Vaadin 7 Certified Developer</li>
<li>Vaadin Online Exam for Vaadin 8 Certified Developer</li></ul>
<h2 id="see-also">See also</h2>
<ul><li><a href="/facts/List_of_rich_web_application_frameworks/6SdIW8cN">List of rich web application frameworks</a></li></ul>

<h2 id="further-reading">Further reading</h2>
<ul><li>Duarte, A. (2021) <a href="https://www.apress.com/gp/book/9781484271780"><i>Practical Vaadin: Developing Web Applications in Java</i></a>. Apress.
</li><li>Duarte, A. (2018) <i><a href="https://www.packtpub.com/application-development/data-centric-applications-vaadin-8">Data-Centric Applications with Vaadin 8</a></i>. Packt Publishing.
</li><li>Frankel, N. (2013) <i><a href="https://isbnsearch.org/isbn/9781782169772">Learning Vaadin 7, Second Edition</a></i>. Packt Publishing.</li><li>Duarte, A. (2013) <i><a href="https://isbnsearch.org/isbn/9781782162261">Vaadin 7 UI Design by Example: Beginner's Guide</a></i>. Packt Publishing.</li><li>Holan, J., & Kvasnovsky, O. (2013) <i><a href="https://isbnsearch.org/isbn/9781849518802">Vaadin 7 Cookbook</a></i>. Packt Publishing.</li><li>Taylor C. (2012) <i><a href="https://isbnsearch.org/isbn/9781478375104">Vaadin Recipes</a></i>. Packt Publishing.</li><li>Frankel, N. (2011) <i><a href="https://isbnsearch.org/isbn/9781849515221">Learning Vaadin</a></i>. Packt Publishing.</li><li>Grönroos, M. (2010) <i><a href="https://isbnsearch.org/isbn/9789529267538">Book of Vaadin</a></i>. Vaadin Ltd.</li></ul>
<h2 id="external-links">External links</h2>
<ul><li><a href="https://vaadin.com/">Official website</a> </li>
<li><a href="https://github.com/vaadin">Vaadin on GitHub</a></li></ul>

<h2 id="references">References</h2>

<ol>
<li id="fn:1"><p>"Michael "Monty" Widenius investing in Finnish IT Mill". Invest in Finland. Archived from the original on 2011-07-20. Retrieved 2009-01-31. <a href="https://web.archive.org/web/20110720185127/http://www.investinfinland.fi/news/2008/en_GB/ITMill/" target="_blank">https://web.archive.org/web/20110720185127/http://www.investinfinland.fi/news/2008/en_GB/ITMill/</a> <a href="#fnref:1" class="footnote-back-ref">↩</a></p></li>
<li id="fn:2"><p>Asay, Matt. "Monty Widenius invests in Act II: IT Mill". CNET News. Archived from the original on 2016-03-11. Retrieved 2009-01-31. <a href="https://web.archive.org/web/20160311195756/http://www.cnet.com/news/monty-widenius-invests-in-act-ii-it-mill/" target="_blank">https://web.archive.org/web/20160311195756/http://www.cnet.com/news/monty-widenius-invests-in-act-ii-it-mill/</a> <a href="#fnref:2" class="footnote-back-ref">↩</a></p></li>
<li id="fn:3"><p>Sani, Ilari (10 March 2009). "IT Mill, avointa Ajaxia Suomesta". Tivi [fi] (in Finnish). Alma Media. Retrieved 11 July 2024. <a href="https://www.tivi.fi/uutiset/it-mill-avointa-ajaxia-suomesta/5070cd81-d50a-3c87-98eb-b4b5c67a2fca" target="_blank">https://www.tivi.fi/uutiset/it-mill-avointa-ajaxia-suomesta/5070cd81-d50a-3c87-98eb-b4b5c67a2fca</a> <a href="#fnref:3" class="footnote-back-ref">↩</a></p></li>
<li id="fn:4"><p>"Vaadin Directory Opens its Doors". vaadin.com. Retrieved 2021-09-07. <a href="https://vaadin.com/blog/vaadin-directory-opens-its-doors" target="_blank">https://vaadin.com/blog/vaadin-directory-opens-its-doors</a> <a href="#fnref:4" class="footnote-back-ref">↩</a></p></li>
<li id="fn:5"><p>Vaadin. "Vaadin releases Vaadin Framework 8". www.prnewswire.com (Press release). <a href="http://www.prnewswire.com/news-releases/vaadin-releases-vaadin-framework-8-300412081.html" target="_blank">http://www.prnewswire.com/news-releases/vaadin-releases-vaadin-framework-8-300412081.html</a> <a href="#fnref:5" class="footnote-back-ref">↩</a></p></li>
<li id="fn:6"><p>Vaadin. "Vaadin modernizes Java development with its biggest release to date: Vaadin 10". www.businessinsider.com. <a href="http://markets.businessinsider.com/news/stocks/vaadin-modernizes-java-development-with-its-biggest-release-to-date-vaadin-10-1027314255" target="_blank">http://markets.businessinsider.com/news/stocks/vaadin-modernizes-java-development-with-its-biggest-release-to-date-vaadin-10-1027314255</a> <a href="#fnref:6" class="footnote-back-ref">↩</a></p></li>
<li id="fn:7"><p>"Vaadin 14.0.0 release on GitHub". GitHub. <a href="https://github.com/vaadin/platform/releases/tag/14.0.0" target="_blank">https://github.com/vaadin/platform/releases/tag/14.0.0</a> <a href="#fnref:7" class="footnote-back-ref">↩</a></p></li>
<li id="fn:8"><p>"A simpler release model | Vaadin". vaadin.com. Retrieved 2022-08-11. <a href="https://vaadin.com/blog/a-better-release-model" target="_blank">https://vaadin.com/blog/a-better-release-model</a> <a href="#fnref:8" class="footnote-back-ref">↩</a></p></li>
<li id="fn:9"><p>"Vaadin 23 is finally here! | Vaadin". vaadin.com. Retrieved 2022-08-11. <a href="https://vaadin.com/blog/vaadin-23-is-finally-here" target="_blank">https://vaadin.com/blog/vaadin-23-is-finally-here</a> <a href="#fnref:9" class="footnote-back-ref">↩</a></p></li>
<li id="fn:10"><p>"Training". Vaadin. Retrieved 2021-09-08. <a href="https://vaadin.com/learn/training/v14" target="_blank">https://vaadin.com/learn/training/v14</a> <a href="#fnref:10" class="footnote-back-ref">↩</a></p></li>
</ol>

Vaadin open-in-new

Vaadin