Vaadin has enabled Java development teams to build full-stack applications, 100% in Java, for over 20 years. With an extensive web component library, powerful abstraction capabilities, the Collaboration Kit (for real-time collaboration), and Hilla (for React and TypeScript support), Vaadin is more capable than ever.
Vaadin is the only framework that allows you to write the UI completely in Java. Take a look at our comparison page to see how Vaadin Flow and Hilla compare to other frontend frameworks or continue reading the Vaadin key features below.
Standardized Web Components
Vaadin components are a set of mobile-optimized UI components built on the Web Components standard. These components are supported by all major browsers and can be used with Vaadin - or other frontend frameworks - to build UIs. We ship our components with powerful Java APIs that allow developers to build complex, enterprise-grade UIs 100% in Java.
Like the Vaadin framework, the free components are open-source, while the professional components come with our commercial licenses. The Vaadin directory contains all components - either made by us or contributed by the community. Also, we recently made our previously-commercial Component Factory library free.
You can integrate any web components into your Vaadin web app, or contact us for a quote to build a custom component!
Extending Components
Whether it is a built-in component or an integrated web component, the Java APIs allow you to customize the components to fit your needs. If you do extend them, please consider contributing the results back to the Vaadin community!
Progressive Web Apps
You can turn your Vaadin web apps into Progressive Web Apps (PWAs) with the @PWAannotation. Although PWAs run in the browser, like any other web app, they look and feel like native applications. They can be installed, scaled visually to fill the screen space of any platform, and even support offline functionality.
You can read more about PWAs and their benefits in our handbook.
PS. You can use the PWABuilder to submit your Vaadin PWA to different app stores.
Routing and Navigation
Vaadin provides a Router class to structure navigation into logical parts. You can use Router to define what content is served to the user when navigating between different views, such as error pages or login windows. You can also combine the @PWA annotation with the @Route annotation to automatically serve the PWA resources:
@PWA(name = "My Progressive Web Application",
shortName = "MyPWA")
@Route("")
public class MyPWA extends Div {
public MyPWA() {
setText("Welcome to my PWA");
}
}
You can find more details about the Vaadin Router with code samples in our technical documentation.
Data binding
When users provide structured data by completing fields in forms, this data is typically represented in code as a business object instance.
The Binder class allows you to define how the values in a business object are bound to the instance, making it easy to connect the frontend and backend while staying within the Java ecosystem.
You can find instructions on how to use Binder in our documentation.
Data validation
Vaadin validates data securely on the server by default. However, you can also opt for client-side validation using JavaScript or TypeScript. The script below shows how binder can be used to validate the name a user inputs:
binder.forField(nameField)
// Validator defined based on a lambda
// and an error message
.withValidator(
name -> name.length() >= 3,
"Name must contain at least three characters")
.bind(Person::getName, Person::setName);
It shows the user an error message if the three-character condition is not met. You can find more details and examples, including different validation criteria and custom error messages, in our documentation.
Theming
Vaadin uses themes to separate the UI's appearance from the server-side logic. It comes with two default themes, Lumo and Material, that you can use as is, adapt to fit your needs, or use as a starting point for a custom theme.
The Lumo theme is applied by default for a modern and concise look and feel. The Material theme is an implementation of Google’s Material Design guidelines and comes bundled with Vaadin.
Try the Lumo theme in our online starter project.
The Vaadin components expose their styleable parts with built-in CSS properties, making them easy to style to fit the look of your application. You can also extend this by importing component-specific style sheets.
You can read all about theme styling, complete with examples and demos, in our documentation.
You can also find detailed release notes for every Vaadin release in the GitHub repository. Recent developments include our new Acceleration Kits, which make it fast and easy to build key features and integrations into your Vaadin Flow-based applications.
Go to https://vaadin.com/start to begin developing with Vaadin today!
Any questions? Ask by commenting below!