Close

Entries with tag web components .

Adding charts to Polymer 2 apps

We’re happy to announce the release of Vaadin Charts 5 with support for Polymer 2! Vaadin Charts offers a range of custom elements for data visualization, from simple column charts to complex combinations of more than one type of chart.

Powerful features and a powerful API

Although this is a new major version of the Charts element, the API didn’t change. We are offering the same powerful features as before, with the same API.

To use Vaadin Charts, all you need to do is to import it and add the web component to your page. Here’s a simple sample of how to use vaadin-charts. You can configure the chart declaratively, and then feed the data to the data property e.g. by using iron-ajax.

<vaadin-line-chart id="mychart">
  <chart-title>Average temperatures in Turku, Finland</chart-title>
  <subtitle>1961 - 2016</subtitle>
  <x-axis>
    <chart-title>Year</chart-title>
  </x-axis>
  <y-axis max="30" min="0">
    <chart-title>Temperature (℃)</chart-title>
  </y-axis>
  </vaadin-line-chart>

And as you can see from the screenshot below, it couldn’t be much simpler to add a chart to your Polymer 2 based web app.

The Charts element is using Polymer 2 and ES6. And if you need to support IE11 and Safari 9, your code needs to be transpiled to ES5.

Try out the latest version now

P.S. In case you’re attending Polymer Summit in Copenhagen next week, join the Vaadin pre-summit to see charts and all other Vaadin Elements.

JavaScript datagrid comparison

Data grids are some of the most commonly used components in business apps. But at the same time they are some of the most complex components to implement well. There are many aspects that the component needs to get right – customizability, performance, usability, accessibility, and cross-platform support.

 

After recently releasing Vaadin Grid 2, we wanted to see how it stacks up against other JavaScript grids out there. We selected four grids that are all framework agnostic – that is, they can be used together with any framework. The grids we selected for comparison are Vaadin Grid, bwt-datatable, ag-Grid, and the classic jQuery DataTables.

  Testing JavaScript grid perfomance with Chrome DevTools

So whether you're looking for a grid for your upcoming Polymer project, or are looking for the best alternative to jQuery DataTables, head on over to the comparison and see how they compare.

  Read the data grid comparison

Vaadin Core Elements 2 Roadmap

Polymer 2 support, more components, and theming support

Vaadin Elements 2 Polymer 2 support

These are exciting times for Web developers. More and more browsers have shipped native support for Web Components, allowing us to rely less on polyfills and finally realize the full potential of Web Components. You might have seen that Google released a new Polymer-based version of Youtube a couple weeks ago. Several other large companies like General Electric and McDonald's have also showcased production applications built with Web Components. We're finally seeing Web Components move from "cool future technology" to something that's running business critical apps and sites for large companies.

Announcing Polymer 2 support

One of the major highlights of Google I/O 2017 is the release of Polymer 2.0. This new version of Polymer is both faster and more interoperable than before because it is able to use browser native Web Component implementations and new ECMAScript features.

Vaadin Elements is being updated to support Polymer 2.0, with the most elements already offering hybrid support (works both with Polymer 1 and 2). We are working to add support for the remaining components within the next few weeks. You can follow the implementation status on our GitHub repo or browse the components at vaadin.com/elements.

Looking ahead – building a cohesive, themeable set of components for the next generation of Web apps

While Web Components as a technology has matured, the ecosystem is still young. When it comes to cohesive component sets, Polymer's Paper Elements is still the gold standard. When we started building Vaadin Elements, we understood that it would take us some time to get a complete enough set of components to allow our users to build complete applications. That's why we designed the first iteration to work as an extension to the Polymer Paper Elements set.

One of the most common issues we hear from our users is that the Paper Element set and our components follow Material design and that they want their project to follow their own design. That's why we are evolving Vaadin Elements into a stand-alone set Web Components that you can easily theme to match the look and feel of your organization.

Vaadin Elements theming support

The theming support will allow you to easily customize the look and feel of all Vaadin Elements with CSS custom properties and standard CSS.

Roadmap

Building a new set of components is no small task, especially when you pay as much attention to detail, quality, and accessibility as we do. Getting the entire set of components completed will take some time. Our plan is to work from most commonly used components to more specific use case components. The goal is to have a set of components that is on par with and then going beyond the Vaadin Framework's current set of components. By starting with the most common components, we can cover the majority of use cases as soon as possible.

The roadmap below outlines our current priorities and schedule. We'll keep you updated on progress and show demos as soon as we have something that's ready enough for you to start trying out and giving feedback on.

May

  • vaadin-button
  • vaadin-text-field
  • vaadin-form layout

June – July

  • vaadin-list-box
  • vaadin-dialog
  • vaadin-dropdown-menu

August – October

  • Theming support for all components
  • vaadin-text-area
  • vaadin-checkbox

Later

  • vaadin-menu-button
  • vaadin-progress
  • vaadin-details
  • vaadin-radio-button
  • vaadin-slider
  • vaadin-spinner
  • vaadin-tabs
  • vaadin-tab
  • vaadin-toggle-button

What do you want to see next?

Although we have a clear vision of what we want to build next, we welcome all your comments and suggestions. Are there specific components or features you'd like us to add? Reach out to us on Twitter, Gitter for a chat, or file an issue on GitHub for enhancements you'd like to see.

Browse all Vaadin Elements

— 3 Items per Page
Showing 1 - 3 of 8 results.