Web Components for Java Developers

Web Components
@joonaslehtinen
Founder & CEO 
 
 
for Java Developers

Component based UI?
Web Components 101
Integration strategies

Beneﬁts 
Composition
Separation
Reusability

Rich component
oriented UI in Java?

Swing 
Java FX
Statically typed Java
UI Components
Applets
RPC
Stateless

JSF
XML + Java
UI Components
Multi page rendering
Glue Ajax on top
Stateful

GWT
RPC
UI Components
Stateless
Compiles to JavaScript

Vaadin
ZK
Single-page rendering
Automatic communications
Stateful
UI Components

Problem solved
for Java developers?

<x-gangnam-style>
</x-gangnam-style>

Everything
is an element
DOM is the
Framework

<my-component></my-component>
Custom Elements

document.registerElement(
'my-component',
{
prototype: proto
}
);
Custom Elements

var proto =
Object.create(HTMLElement.prototype);
proto.createdCallback = function() {
var div = document.createElement('div');
div.textContent = 'My Custom Element';
this.appendChild(div);
};
Custom Elements

Shadow DOM
Document
<my-component> (shadow host)
Shadow border
<div>
"This is Shadow DOM"

Shadow DOM
var host = document.querySelector('#host');
var root = host.createShadowRoot();
var div = document.createElement('div');
div.textContent = 'This is Shadow DOM';
root.appendChild(div);

Shadow DOM
var proto =
Object.create(HTMLElement.prototype);
proto.createdCallback = function() {
var root = this.createShadowRoot();
root.textContent = 'My Custom Element';
};

Shadow DOM
Document (light DOM)
<my-component> (shadow host)
Shadow border
<div> (shadow DOM)
Content border
<div> (light DOM)

Shadow DOM Dictionary
Local DOM = DOM created and managed by custom element
Shadow DOM = native way of implementing Light DOM
Light DOM = "Normal" DOM that is written to page ("view source")
Shady DOM = Local DOM imply in normal DOM by Polymer

Shadow DOM
Document (light DOM)
<my-component> (host)
Shadow border
<div> (shadow/local)
Content border
<div> (light DOM)
<div> (local DOM)
Content border
<div> (light
DOM)

<template id="tmp">
<style>
...
</style>
<div>
<h1>Web Components</h1>
<img src="logo.svg">
</div>
</template>
Templates

var tmp = document.querySelector('#tmp');
var clone = document.importNode(tmp.content, true);
var host = document.querySelector('#host');
host.appendChild(clone);
Templates

HTML Imports
"import com.mybusiness.MyComponent;"
but for HTML5

index.html
<link rel="import"
href="my-component.html">
my-component.html
<link rel="stylesheet"
href="css/style.css">
<script src="js/script.js">
HTML Imports

Blink
:-)
Everything pretty much works

Firefox
:-|
Mozilla is committed in bringing full
support, but not all of it is there yet

WebKit
:-|
Shadow DOM landed on the trunk last week, but
Apple is keeping mouth shut on its plans

Edge
:-|
Microsoft started working on it and is committed
to releasing a full support eventually

IE
:-(
Guaranteed to never add support

Custom Element
HTML Template
Shadow DOM
HTML Import
CHROME OPERA FIREFOX SAFARI IE
Browser support

Polyﬁlls
:-]
Trying to emulate it on all "modern browsers"

https://github.com/webcomponents/webcomponentsjs
*Indicates the current version of the browser, ~Indicates support may be flaky. If using Custom Elements or HTML
Imports with Shadow DOM, you will get the non-flaky Mutation Observer polyfill that Shadow DOM includes.
Polyfill: webcomponents.js support

<my-counter counter="10">Points</my-counter>
Increase
Points
Value: 10

<dom-module id="my-counter">
<template>
<style> /*...*/ </style>
<div id="label"><content></content></div>
Value: <span id="counterVal">{{counter}}</span><br>
<button on-tap="{{increment}}">Increment</button>
</template>
<script> … </script>
</dom-module>

Polymer({
is: 'my-counter', 
properties: {
counter: {
type: Integer,
value: 0, // Default value
}
counterChanged: function() {
this.$.counterVal.classList.add('highlight');
},
increment: function() { this.counter++; }
});

https://www.polymer-project.org/1.0/

1) REST API in Java
2) Wrap with GWT
3) Bind to server-side Java

Vaadin
Elements
Web Components
library that seamlessly
extends Polymer with
focus on building
business apps

Render static HTML in a JSP?
<vaadin-grid>
<table>
<colgroup>
<col header-text="Name">
<col header-text="Value">
<col header-text="Progress">
</colgroup>
<tbody>
<tr>
<td>Project A</td><td>10000</td><td>0.8</td>
</tr>
...
Lose
beneﬁts
with a slow
multi-page app

Conﬁgure grid and bind to REST API

function PagedDataSource()
< 160 lines of Ajax, paging, caching,
sorting and other logic >

Render a column with progressbar

Build REST API (ﬁnally some Java )
:-)
Spring is magical…

https://github.com/vaadin-
marcus/vaadin-grid-rest

Vaadin
GWT
Polymer
Elements
GWT API generated
for Polymer Paper
and Iron elements

https://github.com/vaadin/
gwt-polymer-elements
Source

http://www.gwtproject.org/doc/latest/
polymer-tutorial/create.html
Step-by-step tutorial

https://github.com/vaadin/gwt-api-generator
Vaadin GWT API Generator
my-component.html MyComponent.java

• Initial HTML
• CSS (theme)
• Images
• JavaScript
1.2M total 
307k
compress
135k
reduced
widgetset

• name=”Joonas”
• button clicked
261 bytes

• name=”Joonas”
• button clicked
261 bytes 
• Add notification
267 bytes

Connecting web components
Option 1: AbstractJavaScriptComponent
Option 2: Server-side Elements Add-on
Option 3: Vaadin 8, eventually :)

Recommendations
For Java developers

Keep using Java
based component
oriented frameworks
you use today.

Wrap web components
to your current
framework 1-by-1, but
only when needed.

Consider going all-in
when your target
browsers and Java
framework support web
components natively.

@joonaslehtinen
Founder & CEO
slides
slideshare.com/joonaslehtinen
Hiring to
Vaadin Berlin

Web Components for Java Developers

More Related Content

What's hot (20)

Similar to Web Components for Java Developers (20)

More from Joonas Lehtinen (20)

Recently uploaded (20)

Web Components for Java Developers