Web Components

@joonaslehtinen Founder & CEO

for Java Developers

Component based UI?

Web Components 101

Integration strategies

Component Oriented UI?

http://localhost:48080/dashboard/

BenefitsComposition

Separation

Reusability

Rich component

oriented UI in Java?

SwingJava FX

Statically typed Java

UI Components

Applets

RPC

Stateless

JSF

XML + Java

UI Components

Multi page rendering

Glue Ajax on top

Stateful

GWT

Statically typed Java

RPC

UI Components

Stateless

Compiles to JavaScript

Vaadin ZK

Single-page rendering

Automatic communications

Statically typed Java

Stateful

UI Components

Problem solved for Java developers?

Web Java>>

Web Components 101

<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

Custom Elements

Shadow DOM

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

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

Browser Support?:-?

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

Polyfills:-]

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

Polymer

<my-counter counter="10">Points</my-counter>

Increase

PointsValue: 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/

Web Components in Java apps?

1) REST API in Java

2) Wrap with GWT

3) Bind to server-side Java

1) REST API in Java

2) Wrap with GWT

3) Bind to server-side Java

Spring

Vaadin Elements

Web Components library that seamlessly extends Polymer with

focus on building business apps

<vaadin-grid>

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 benefits

with a slow multi-page app

Setup columns

Configure 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 (finally some Java ):-)

Spring is magical…

Build REST API

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

1) REST API in Java

2) Wrap with GWT

3) Bind to server-side Java

Vaadin GWT

Polymer Elements

GWT API generated for Polymer Paper and Iron elements

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

Source

Bootstrap GWT application

UI Binder Support

Widget Java Class

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

1) REST API in Java

2) Wrap with GWT

3) Bind to server-side Java

Framework

UI in Server-side 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 :)

Connecting web components

Option 1: AbstractJavaScriptComponent

Option 2: Server-side Elements Add-on

Option 3: Vaadin 8, eventually :)

UI in Server-side Java

PaperButton.java

Communication

Construction

Event API

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

Je zult maar letter wezen. Goed, ik ben niet ontevredet. Maar het valt niet mee in deze zeventiger jaren tot het vaderlandse alfabet te behoren. Foto-zetterijen wringen je steeds in steeds ingevikkelder. Je zult maar letter wezen. Goed, ik ben

slides slideshare.com/joonaslehtinen

Hiring toVaadin Berlin