Rock GWT UI’s with Polymer Elements
Vaadin is searching a lot around using Web Components
- 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.
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
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.
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).
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.