As you have probably noticed, we recently introduced a new product called Vaadin Elements. Vaadin Elements builds on the Web Components standards and Google Polymer and will allow you to start using Vaadin components in any front end framework – like jQuery, Angular 2, React, Ember 2 or any plain HTML page.
In this blog post, I want to address some of the questions and concerns we’ve heard about Vaadin Elements, like: What exactly is Vaadin Elements? How does it relate to Java Vaadin Framework?
First off, Vaadin Elements is aiming to allow you to use the Vaadin components you already know in places and with technologies you previously couldn’t use them with. This means that you can now use Vaadin Grid in any plain HTML page, even if you don’t have a Java server available to you. Vaadin Framework will continue to work as before and will allow you to write UIs in server side Java also in the future. Whether it then makes sense to create an HTML page or a Java single-page app with Vaadin Framework is up to your use case.
The below example shows how to build the same grid displaying contact details through both APIs. The end result will look the same to the end user regardless which API you use.
Vaadin Framework
List<Person> people = service.getPeople();
Grid personGrid = new Grid();
personGrid.setContainerDatasource(people);
Vaadin Elements
<vaadin-grid>
<table>
<colgroup>
<col name="user.name.first" header-text="First Name" />
<col name="user.name.last" header-text="Last Name" />
<col name="user.email" header-text="Email" flex/>
</colgroup>
</table>
</vaadin-grid>
<script>
var people = api.getPeople();
var grid = document.querySelector('vaadin-grid');
grid.items = people;
</script>
By removing the need for a Java backend, you are now free to use Vaadin components in any front-end project. Maybe you have an old admin interface that’s in need of an update but doesn’t have the budget for a full overhaul? With Vaadin Elements, you can replace parts of the old static UI with dynamic ajax components, updating the UI piece by piece. Or maybe you are building mobile applications that need to work offline. Or perhaps you are working on an Angular project and need some enterprise grade components to speed up your development. Regardless of your tech stack, Vaadin Elements will allow you to deliver more with less code, by using ready made HTML elements as building blocks.
As you see, the introduction of Vaadin Elements will allow you to use Vaadin in entirely new ways. We’re really excited about all the new possibilities and are working hard on adding new components and improving the ones we have. Please give it a try, and let us know what you think and if you have any suggestions for new components you’d like to see.