Vaadin 17 is the latest milestone release (see our release model), it brings new features and enhancements to both server-side views and client-side views. Read about the Grid data binding improvements, new chart types, and form binding API for client-side views.
For the rest of the release highlights, go to the release page and for the full list of changes, go to the platform release notes in GitHub.
Improvements for data binding to Grid
In-memory and lazy data binding have a few improvements:
- Providing the item count for lazy loading is now optional. If you don’t provide the size in your lazy data binding, the Grid polls your backend for more when the user scrolls to the end of the table.
- Lazy binding to Spring Data-based repositories, or to any other backend that uses “paged access”, is now a lot easier.
- The new data view concept exposes a few often-requested APIs for common in-memory data binding. For example, it is now easier to mutate an existing in-memory data set or to find the index of a specified item in the Grid.
LazyDataView<Person> dataView = grid.setItems(q -> service.fetchPersons(q.getOffset(), q.getLimit()));
// Optional, you may give a rough estimate of the item count
// to improve the scroll behavior.
// It’s good compromise for db performance and UX.
dataView.setItemCountEstimate(10000);
Read more in Data binding to Grid gets easier and more efficient, which was published during the pre-release phase.
New chart types and a Java API for styling
The new major version of Vaadin Charts adds four new chart types: Bullet Chart, Organization Chart, Timeline Chart and X Range Chart.
Bullet
Organization
Timeline
X Range
Java API for styling charts
Because Vaadin Charts draws the graphs as SVGs, the CSS properties to style them are a bit different from regular HTML elements. Many users have requested that we reintroduce the Java API to change styling properties. Using CSS is now optional, and the Java API is the default. Take a look at the release notes for more information.
Client-side form data binding
Vaadin 17 introduces a TypeScript API for form binding. It includes the best parts of the tried-and-true Java Binder API: reliable code completion, type safety, flexible validation, and direct access to the backend data. Vaadin automatically generates TypeScript types for data entities and form models, based on the Java data model. The TypeScript views run in the browser and the new API offers low-latency client-side validation that does not require a stable network connection and works offline.
// my-form-view.ts
import { Binder, field } from '@vaadin/form';
import EmployeeModel from './generated/com/example/application/EmployeeModel';
private binder = new Binder(this, EmployeeModel);
render() {
const { model } = this.binder;
return html`
<vaadin-email-field label="Email"
...=${field(model.email)}></vaadin-email-field>
`;
}
Read more about client-side forms in Creating Forms with TypeScript and LitElement.
In the next Vaadin Dev Day, you can learn more about creating client-side views using reactive templates and the web component API. Save the date: Dev Day on Wednesday, October 14th, 2020.
More enhancements to the framework
There are more enhancements than listed in this post: LitTemplate support, routing improvements, and of course bug fixes. Check out the Vaadin platform release notes for more details on the release contents and API incompatibilities.
Most features are backported to Vaadin 14
Vaadin 17 is a non-LTS release. Developers currently on Vaadin 16, should upgrade to Vaadin 17. Development teams using the LTS version will probably want to wait, as most of the fixes and enhancements in Vaadin 17 will be released in upcoming Vaadin 14 minor versions.
Features to be backported to 14.x
- The data provider improvements, the new Charts version, and LitTemplate support.
Features you will not see in Vaadin 14
- Data binding in client-side forms
Start building web apps with Vaadin 17