Rock GWT UI's with Polymer Elements

Arnaud Tournier, le 11-11-2015

Manuolo Carrasco

Rock GWT UI’s with Polymer Elements

Vaadin is searching a lot around using Web Components

Motivations

  • Development with GWT is very verbose.
  • Slow debugging.
  • Designers hate java (and also UI Binder)
  • Difficult to share
  • Not mobile friendly
  • Ugly Widget set

GWT + Polymer ?

  • Standard specification
  • Ready to use catalogs

What are Web Components ?

Encapsulation at the DOM level.

Composition

Community creating quality components

What are the different specifications : - Custom elements : ad-hoc element creation, - Temeplate elements, - Shadow DOM, - HTML Imports.

Browser support : not thet good, so we have PolyFills to fill the gaps where some APIs are not implemented on some browsers.

What’s poylmer ?

Make it easier to create from a button to a complete application accross desktop, mobil and beyoud.

It’s a library enbaling to create quickly Web COmponents.

Enabling to share components.

Polymer catalog is huge.

GWT consuming web components

  • GWT apps interact with JS libs most of the time
  • JSNI is difficult for complex scenario
  • JsInterop
  • Elemental

How to consumme ?

  • Create JsInterop interface for native browser objects( Window, …)
  • Create some utility methods (ensureHtmlImport, createElement, …)
  • Each WebComponent has its own interface
  • The PolymerWidget base wrapping class (to wrap light DOM to Widget)

Now we can use the components like we used to use Widgets. It works even in UiBinder.

Introducing gwt-polymer-elements

Library to use Polymer elements.

  • gwt-api-generator : create GWT wrappers for JS components. Extracts sources and docs from Polymer website. Considering using other sources than polymer mayber later.
  • gwt-polymer-elements : ready to use library for polymer elemets in gwt (1.2.1 released yesterday).

gwt-api-generator

npm install gwt-api-generator -g
bower install PolymerElements.paper-elements
gwt-api-generator --pom --groupId --artofactId
mvn clean install to create a gwt-package.jar
Everything is contained in the artifact.

gwt-polymer-elements

vaadin-gwt-polymer-elements-1.2.1.0-ddddddd

It’s very little LOC to maintain (1500 LOC) Produces a lot of code javascript (50000 LOC)

Demo


Arnaud Tournier, le 11-11-2015