web components for java developers

Web Components

@joonaslehtinen Founder & CEO

for Java Developers

Component based UI?

Web Components 101

Integration strategies

Component Oriented UI?

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