As announced last year, we have been preparing the pieces for the next major version of Vaadin. The Vaadin Elements project has become a popular collection of Web Components and today we are happy to publish the developer preview of the next generation Java Framework: Vaadin Flow. And we’d love to hear what you think about it!
The upcoming Vaadin platform consists of a comprehensive set of web components, a Java web framework, configurable themes, tools and a set of app templates. Choosing the whole set of tools is the easiest option, but you can choose the parts, the languages and the abstraction level you prefer. Vaadin Flow, previously known as “project Hummingbird”, will be the Java part of that puzzle. Today we are also releasing the next generation of the theme engine Valo and major updates to Vaadin Elements.
Related reading that might interest you
Download our free guide to the Future of Web Apps
What is Vaadin Flow?
Flow is built on the same principal ideas as the previous versions of the Vaadin Framework. Through a strong abstraction of complex web technologies, we want to make Java developers as productive as possible to build awesome and secure web apps. With the next version we expect you to be more productive than ever.
If you use the strongest abstraction level and plain Java code, it is actually pretty hard to see differences with the Framework 8 code. You’ll compose your UI from components and connect your logic using event listeners. Here is a simple hello world snippet written with Vaadin Flow:
TextField textField = new TextField(); Label greeting = new Label(”Hello stranger”); textField.addValueChangeListener(event -> greeting.setText(”Hello ” + event.getValue())); VerticalLayout layout = new VerticalLayout(textField, greeting);
There are tons of changes. Vaadin Flow is almost a complete re-write, so we can’t list all new features here. However, here are couple of highlights you can try.
Smaller core - Vaadin Elements is your new collection of components
Modularity is a big change in Vaadin 10 and it is also the first thing that you’ll notice if you happen to compare Flow to previous versions of Vaadin Framework. Even basic components like DateField or Grid are no longer included in core of the Flow. Instead, you’ll be using Vaadin Elements, which, starting today, all come with a pre-built Java API as well.
You can pick exactly which components you want in your application, choose to include a larger collection or even choose to go with raw HTML elements only. In the first developer preview, all Vaadin Elements come from a single dependency: com.vaadin:flow-components.
Built for the modern web
Web technologies have progressed a lot during the past few years. The Web Component standard now works on the most popular browsers and has become a mainstream technology, used by major companies such as YouTube, Netflix, Electronic Arts, Amazon and Comcast. The client side of Flow is now optimized for the modern web, moving GWT aside.
Vaadin Flow contains new mechanisms that developers can use to interact with the browser. You can interact directly with the DOM from the server side Java, instead of getting into time-consuming client-side development. There is a more advanced templating feature, based on the Polymer syntax. Creating new Java APIs for components has never been this simple.
The following server-side Java code creates a wrapper for a small <my-label> Web Component. In more complex cases you can flexibly move some or most of the integration logic to JavaScript code in your template code.
@Tag("my-label") // declare which HTML element to use, here a custom element <my-label>
public class Label extends Component {
public void setText(String text) {
getElement().setText(text);
}
public String getText() {
return getElement().getText();
}
}
Completely new navigation support
A big part of many apps is how to implement navigation between views as well as deep linking, aka how to make views accessible with a certain URL. In Flow, we are replacing the old Navigator class with a concept called Router. It now supports nested views out of the box and builds on top of the HTML 5 History API.
The easiest way to use the new Router is just to annotate a class with a @Route annotation, giving it a distinct URL in your application.
@Route("some/path")
public class SomePathComponent extends Div {
public SomePathComponent() {
setText("Hello @Route!");
}
} Improved templating support
The same advanced templating system, which can be used to define new components, can also be used on the app level. The template language is now real modern HTML, helping you to collaborate with, for example, your designer, who creates drafts of your applications in HTML. Polymer style data binding also works with raw HTML elements and more advanced Web Components. Vaadin Designer also works with this improved declarative format.
HTML:
<template> <vaadin-vertical-layout> <vaadin-text-field id=”textField”></vaadin-text-field> <label id=”greeting”>Hello stranger</label> <input type=”color” on-input=”updateFavoriteColor”> <label>Favorite color: [[colorCode]]</label> </vaadin-vertical-layout> </template>
Java:
// Java instance fields
private @Id TextField textField;
private @Id Label greeting;
// Setting things up in the component’s constructor
textField.addValueChangeListener(event ->
greeting.setText(”Hello ” + event.getValue()));
// Instance method in the component published to the client
@EventHandler private void updateFavoriteColor(
@EventData(”event.target.value”) String color) {
getModel().setColorCode(color);
} How to try it out and join the effort?
As we are still in the developer preview phase, the website, documentation and example projects are works in progress. But there are a couple of good resources already available:
-
Vaadin Flow - Website with code examples and links to additional resources
-
Vaadin Elements - The modern Web Component based component set, now available with Java APIs for Flow
-
Starters - a collection project templates to bootstrap your project
-
Vaadin in GitHub - source code and issue tracker for all projects
The renewal for sure causes enthusiasm, questions, and concerns. Use the commenting section or the forum for your discussion. Bug reports and more fine-grained enhancement ideas welcomed on GitHub. We'll also be publishing blog entries to discuss our design decisions later this autumn.
Spread the word and join the effort to build the future of web app development!
PS. We believe this is the most exciting thing in the Java ecosystem in years. Still we want to remind you that we are still in developer preview phase and critical projects should start with the Vaadin Framework. We also published a roadmap for it today and will later this week discuss plans how you can migrate to Vaadin 10 in the future.
Learn more about Vaadin
Discover the easiest way to build web apps in Java
Related reading that might interest you
Download our free guide to the Future of Web Apps