Blog

Vaadin Elements – a set of Web Components for business apps

By  
Marcus Hellberg
Marcus Hellberg
·
On Dec 1, 2015 8:00:00 AM
·

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.

Get started with tutorials and examples

Marcus Hellberg
Marcus Hellberg
Marcus is the Head of Community at Vaadin. His daily work includes everything from writing blogs and tech demos to attending events and giving presentations on all things Vaadin and web-related. You can reach out to him on Twitter @marcushellberg.
Other posts by Marcus Hellberg