BUILDING MODERN WEB UIS WITH WEB COMPONENTS @ Devoxx

PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
• Lead of JUG Dortmund
• Speaker, blogger & author
• Java Architect @ Canoo Engineering AG
• JavaOne Rockstar
• JSR Expert Group member www.guigarage.com@hendrikEbbers
Hendrik Ebbers

• UI magician
• Active speaker and writer
• Code Monkey @ Canoo Engineering AG
• http://blog.netopyr.com
@net0pyr
Michael Heinrichs

Questions?
https://app.sli.do/event/xfb1afkm/ask

Web Component
Spec
Polymer A first app Real World
Applications
Content

frontend code today
<li class="yt-shelf-grid-item yt-uix-shelfslider-item"> 
<div class="yt-lockup yt-lockup-grid yt-lockup-video vve-check clearfix"
data-context-item-id="naiLVvuPCAw" 
data-visibility-tracking=
"CFEQpDAYBSITCM7Or_3JucMCFY6yHAodHk0ANiiOHkCMkLzc7-qi1J0B"> 
<div class="yt-lockup-dismissable"> 
<div class="yt-lockup-thumbnail contains-addto"> 
<a aria-hidden="true" href="/watch?v=naiLVvuPCAw"
class=" yt-uix-sessionlink spf-link " 
data-sessionlink=
"itct=CFEQpDAYBSITCM7Or_3JucMCFY6yHAodHk0ANiiOHjIKZy1oaWdoLXJjaA"> 
<div class="yt-thumb video-thumb"> 
<img src="//i.ytimg.com/vi/naiLVvuPCAw/mqdefault.jpg"
width="196" height="110"/> 
</div> 
Web Applications
Today

frontend code today

<li class=" yt-uix-shelfslider-item"> 
<div class="yt-lockup yt-lockup-grid yt-lockup-video vve-check clearfix" data-context-item-id="naiLVvuPCAw" 
data-visibility-tracking="CFEQpDAYBSITCM7Or_3JucMCFY6yHAodHk0ANiiOHkCMkLzc7-qi1J0B"> 
<div class="yt-lockup-dismissable"> 
<div class="yt-lockup-thumbnail contains-addto"> 
<a aria-hidden="true" href="/watch?v=naiLVvuPCAw" class=" yt-uix-sessionlink spf-link " 
data-sessionlink="itct=CFEQpDAYBSITCM7Or_3JucMCFY6yHAodHk0ANiiOHjIKZy1oaWdoLXJjaA"> 
<div class="yt-thumb video-thumb"> 
<img src="//i.ytimg.com/vi/naiLVvuPCAw/mqdefault.jpg" width="196" height="110"/> 
</div> 
<span class="video-time" aria-hidden="true">1:21</span> 
</a> 
<span class="thumb-menu dark-overflow-action-menu video-actions"> 
<button onclick=";return false;" 
class="yt-uix-button-reverse flip addto-watch-queue-menu spf-nolink hide-until-delayloaded yt-uix-button yt-uix-button-dark-overflow-action-menu yt-uix-button-size-default yt-uix-button-has-icon no-icon-markup yt-uix-button-empty" 
aria-expanded="false" aria-haspopup="true" type="button"> 
<span class="yt-uix-button-arrow yt-sprite"></span> 
<ul class="watch-queue-thumb-menu yt-uix-button-menu yt-uix-button-menu-dark-overflow-action-menu" style="display: none;"> 
<li role="menuitem" class="overflow-menu-choice addto-watch-queue-menu-choice addto-watch-queue-play-next yt-uix-button-menu-item" 
data-action="play-next" onclick=";return false;" data-video-ids="naiLVvuPCAw"> 
<span class="addto-watch-queue-menu-text">Play next</span> 
</li> 
<li role="menuitem" class="overflow-menu-choice addto-watch-queue-menu-choice addto-watch-queue-play-now yt-uix-button-menu-item" 
data-action="play-now" onclick=";return false;" data-video-ids="naiLVvuPCAw"> 
<span class="addto-watch-queue-menu-text">Play now</span> 
</li> 
</ul> 
</button> 
</span> 
<button class="yt-uix-button yt-uix-button-size-small yt-uix-button-default yt-uix-button-empty yt-uix-button-has-icon no-icon-markup addto-button video-actions spf-nolink hide-until-delayloaded addto-watch-later-button-sign-in yt-uix-tooltip" 
type="button" onclick=";return false;" title="Watch Later" role="button" 
data-video-ids="naiLVvuPCAw" data-button-menu-id="shared-addto-watch-later-login"><span 
class="yt-uix-button-arrow yt-sprite"></span></button> 
<button class="yt-uix-button yt-uix-button-size-small yt-uix-button-default yt-uix-button-empty yt-uix-button-has-icon no-icon-markup addto-button addto-queue-button video-actions spf-nolink hide-until-delayloaded addto-tv-queue-button yt-uix-
tooltip" 
type="button" onclick=";return false;" title="TV Queue" data-video-ids="naiLVvuPCAw" 
data-style="tv-queue"></button> 
</div> 
<div class="yt-lockup-content"> 
<h3 class="yt-lockup-title"> 
<a href="/watch?v=naiLVvuPCAw" 
class=" yt-ui-ellipsis yt-ui-ellipsis-2 yt-uix-sessionlink spf-link " 
data-sessionlink="itct=CFEQpDAYBSITCM7Or_3JucMCFY6yHAodHk0ANiiOHjIKZy1oaWdoLXJjaA" 
title="Polizisten hören Helene Fischer's 'Atemlos' im Polizeiauto" 
aria-describedby="description-id-439757" 
dir="ltr">Polizisten hören Helene Fischer's'Atemlos' im Polizeiauto</a> 
<span class="accessible-description" id="description-id-439757"> - Duration: 1:21.</span> 
</h3> 
<div class="yt-lockup-byline">by <a href="/user/djgreyhair class=" yt-uix-sessionlink spf-link g-hovercard" data-name="" 
data-sessionlink="itct=CFEQpDAYBSITCM7Or_3JucMCFY6yHAodHk0ANiiOHg" data-ytid="UCCBrsuWhYxpwZYSTY7kkB4A">Spass MussSein</a> 
</div> 
<div class="yt-lockup-meta"> 
<ul class="yt-lockup-meta-info"> 
<li>3,542,577 views</li> 
<li>6 months ago</li> 
</ul> 
</div> 
</div> 
</div> 
</div> 
</li>
Web Applications
Today

frontend code tomorrow
<shelf
title="Popular on YouTube - Switzerland"
subscribers=“128,657">
<shelf-grid-item
title="iPhone 6 Plus Bend Test"
url="https://www.youtube.com/watch?v=znK652H6yQM"
thumbnail="https://i.ytimg.com/vi_webp/znK652H6yQM/mqdefault.webp"
user="Unbox Therapy"
userUrl="https://www.youtube.com/user/unboxtherapy"
views="63,732,280"
time="4 months ago">
…
 
Web Applications
Tomorrow

Web Component Spec
• Specified by W3C
• Current state of spec can be found
online:  
http://www.w3.org/standards/techs/components#w3c_all

Web Component Spec
• Divided in 4 parts:
• HTML Templates
• Shadow DOM
• Custom Elements
• HTML Imports

<template>
<div class="activity-stream"> 
<h2>Activities</h2> 
 
<div class="activity"> 
<img class="icon" src="img/hendrik.jpeg" width="40" height="40"> 
<div class="time">Minutes ago</div> 
<div class="content"><a>Hendrik</a> did this again.</div> 
</div>
 
…
</div>
 
<img class="icon" src="img/michael.jpeg" width="40" height="40"> 
<div class="time">Seconds ago</div> 
<div class="content"><a>Michael</a> had fun coding.</div> 
</div>

<template>
 
</div>
 
<div class="content"><a>Michael</a> had fun coding.</div>

<template>
<template id="activity-template"> 
</template>
 
</div>
template tag
 

<template>
<div> 
<img class="icon" src="" width="40" height="40"> 
<div class="time"></div> 
<div class="content"></div> 
</div>
</template>
 
</div>
copy boilerplate
template tag
 

<template>
<div> 
</div>
</template>
 
</div>
copy boilerplate
template tag

<template>
<div> 
</div> 
</template>
var template = document.querySelector('#activity-template');

<template>
<div> 
</div> 
</template>
var clone = document.importNode(template.content, true);
use content property

<template>
document.body.appendChild(clone);
<div> 
</div> 
</template>
use content property

<template>
<div> 
<img class="icon" ng-src="{{item.iconSrc}}" width="40" height="40"> 
<div class="time">{{item.time}}</div> 
<div class="content">{{item.content}}</div> 
</div> 
</template>

<template>
<div> 
<img class="icon" ng-src="{{item.iconSrc}}" width="40" height="40"> 
<div class="time">{{item.time}}</div> 
<div class="content">{{item.content}}</div> 
</div> 
</template>
No Data Binding

<template>
22+ 26+ and
Android 4.4+
7.1+ 15+

Shadow Dom
Web Component

Shadow Dom
".content"".content"

Shadow Dom
document.querySelector(".content")

Shadow Dom
.content {
color: blue;
}

Shadow Dom

Shadow Dom
Host
Root

Shadow Dom
visible to 
the user

Shadow Dom
visible to 
the user
used during
rendering

Shadow Dom
.content {
color: blue;
}
".content" ".content"

Shadow Dom
Host

Shadow Dom
var root = host.createShadowRoot();
Host

Shadow Dom
Host
Root

Shadow Dom
Host
Root
root.appendChild(child1);
root.appendChild(child2);

Shadow Domvar root = host.createShadowRoot();
Host

Host
Root

Host
Root
var clone = document.importNode(
template.content, true);

Host
Root
Clone

Host
Root
root.appendChild(clone);
Clone

Shadow Dom
25+ and
Android 4.4+
15+

Custom Elements
<div class="activity">
<a>Michael</a> had fun coding.
</div>
How do we store the icon source and time?
What is a <div> with the class “activity” anyway?

Custom Elements
</div>

Custom Elements
<activity-card iconSrc="img/michael.jpg" time="Seconds ago">
</activity-card>
</div>

Custom Elements
var activityCardPrototype = Object.create(HTMLElement.prototype);

Custom Elements
Rough translation to Java
class ActivityCard extends HTMLElement {};
Class<ActivityCard> activityCardClass = ActivityCard.class;

Custom Elements
var options = {prototype: activityPrototype}

Custom Elements
ElementRegistrationOptions options =  
new ElementRegistrationOptions(activityCardClass);

Custom Elements
document.registerElement("activity-card", options);

Custom Elements

Custom Elements
<activity-card iconSrc="img/michael.jpg" time="Seconds ago">
</activity-card>

Custom Elements
create attach detach
change
createdCallback
attachedCallback
detachedCallback
attributeChangedCallback 
(attrName, oldVal, newVal)

Custom Elements

Custom Elementsvar activityPrototype = Object.create(HTMLElement.prototype);

activityPrototype.createdCallback = function() {

var template = $("#activity-template");

var host = $(this);

var host = $(this);
$(".icon", clone).attr("src", host.attr("iconSrc"));

var host = $(this);
$(".time", clone).text(host.attr("time"));

var host = $(this);
var shadow = this.createShadowRoot();

var host = $(this);
shadow.appendChild(clone);
};

var host = $(this);
shadow.appendChild(clone);
};
document.registerElement("activity-card", {prototype: activityPrototype});

Custom Elements
35+ and
Android 4.4.4+
26+

<!DOCTYPE html> 
<html> 
<head lang="en"> 
<meta charset="UTF-8"> 
<title>Activity Stream - Standard Web Component</title> 
<link href="stylesheet.css" rel="stylesheet"> 
<script src="bower_components/jquery/dist/jquery.min.js"></script> 
</head> 
<body> 
<template> 
<style> 
* { 
font-family: "Helvetica Neue Light", "HelveticaNeue-Light", "Helvetica Neue", Calibri, Helvetica, Arial, sans-serif; 
} 
.activity { 
width: 500px; 
height: 40px; 
padding: 10px; 
background-color: #f0f8ff; 
font-size: small; 
margin: 10px 0; 
} 
.activity .icon { 
float: left; 
border-radius: 100%; 
} 
 
.activity .time { 
float: right; 
color: #b7b7b7; 
font-style: italic; 
} 
.activity .content { 
margin-left: 60px; 
} 
</style> 
 
<div class="content"><content></content></div> 
</div> 
</template> 
 
 
<script> 
 
var activityPrototype = Object.create(HTMLElement.prototype); 
 
activityPrototype.createdCallback = function() { 
var template = document.querySelector('template'); 
var clone = document.importNode(template.content, true); 
 
var host = $(this); 
$(".icon", clone).attr("src", host.attr("iconSrc")); 
$(".time", clone).text(host.attr("time")); 
 
var shadowRoot = this.createShadowRoot(); 
shadowRoot.appendChild(clone); 
}; 
 
// Register our new element 
document.registerElement('activity-card', { 
prototype: activityPrototype 
}); 
</script> 
 
<activity-card iconSrc="../img/michael.jpeg" time="Seconds ago"> 
<a href="profiles/michael">Michael</a> had fun writing web components. 
</activity-card> 
<activity-card iconSrc="../img/hendrick.jpeg" time="Minutes ago"> 
<a href="profiles/hendrick">Hendrick</a> blogged on <a href="http://guigarage.com">GuiGarage</a>. 
</activity-card> 
<activity-card iconSrc="../img/michael.jpeg" time="1 hour ago"> 
<a href="profiles/michael">Michael</a> needed an extra large cup of coffee. 
</activity-card> 
<activity-card iconSrc="../img/hendrick.jpeg" time="Yesterday"> 
<a href="profiles/hendrick">Hendrick</a> watched a movie. 
</activity-card> 
</div> 
</body> 
</html>

<!DOCTYPE html> 
<html> 
<head lang="en"> 
</head> 
<body> 
<template> 
<style> 
* { 
} 
.activity { 
width: 500px; 
height: 40px; 
padding: 10px; 
margin: 10px 0; 
} 
float: left; 
} 
 
float: right; 
color: #b7b7b7; 
} 
} 
</style> 
 
</div> 
</template> 
 
 
<script> 
 
 
 
 
}; 
 
}); 
</script> 
 
</activity-card> 
</activity-card> 
</activity-card> 
</activity-card> 
</div> 
</body> 
</html>
Component Code
Application Code
Application Code

Component Code
Application Code
Application Code

Html Import
<!DOCTYPE html> 
<html> 
<head lang="en"> 
</head> 
<body> 
</activity-card> 
</activity-card> 
</activity-card> 
</activity-card> 
</div> 
</body> 
</html>
<template> 
<style> 
* { 
} 
.activity { 
width: 500px; 
height: 40px; 
padding: 10px; 
margin: 10px 0; 
} 
float: left; 
} 
 
float: right; 
color: #b7b7b7; 
} 
} 
</style> 
 
</div> 
</template> 
 
 
<script> 
 
 
 
 
}; 
 
}); 
</script>

Html Import
<!DOCTYPE html> 
<html> 
<head lang="en"> 
</head> 
<body> 
</activity-card> 
</activity-card> 
</activity-card> 
</activity-card> 
</div> 
</body> 
</html>
<template> 
<style> 
* { 
} 
.activity { 
width: 500px; 
height: 40px; 
padding: 10px; 
margin: 10px 0; 
} 
float: left; 
} 
 
float: right; 
color: #b7b7b7; 
} 
} 
</style> 
 
</div> 
</template> 
 
 
<script> 
 
 
 
 
}; 
 
}); 
</script>
activity-card.html

Html Import
<!DOCTYPE html> 
<html> 
<head lang="en"> 
</head> 
<body> 
</activity-card> 
</activity-card> 
</activity-card> 
</activity-card> 
</div> 
</body> 
</html>
<template> 
<style> 
* { 
} 
.activity { 
width: 500px; 
height: 40px; 
padding: 10px; 
margin: 10px 0; 
} 
float: left; 
} 
 
float: right; 
color: #b7b7b7; 
} 
} 
</style> 
 
</div> 
</template> 
 
 
<script> 
 
 
 
 
}; 
 
}); 
</script>
activity-card.html
<link rel="import" href="activity-card.html">

Html Import
36+ and
Android Browser
37
26+

webcomponent.js
• Today not all browsers support the new standards
• The community provides a pollyfills to enable web
components in browser that have no native support
$ bower install --save webcomponentsjs
<script src="bower_components/webcomponentsjs/webcomponents.js"></script>
install it with bower
use it in your code

webcomponent.js
• The polyfills are the junction of X-Tag and
Polymer basic libraries
• Mozilla created X-Tag as a polyfill to provide
web components
• Google created Polymer as a polyfill to
provide web components

webcomponent.js
• X-Tag and Polymer depends on
webcomponents-js
• Both libraries provide additional
features that are not part of the
specification
webcomponents.org

Polymer
• Adds sugar on top of web components
• Easy to use
• Extendable
• Polymer is created & supported by
Google

Polymer
• Separated in several parts:
• Polymer API
• Iron Elements
• Paper Elements
• …
www.polymer-project.org

Polymer

Iron Elements
• Iron Elements are low level components
• Most Paper UI components base on Iron
• Icons, layouts …

Icons

Google Web Components
• Google is building a lot of components
(maps, youtube…)
<google-chart></google-chart>
<google-hangout-button></google-hangout-button>

Polymer Paper
• Complete component library based on
Material Design

Bower
• A package manager for the web
• Search for dependencies and install
them as packages
• Created by Twitter
• Open Source
www.bower.io

Bower
requires npm, node.js and git
$ npm install -g bower
$ bower init
$ bower install --save webcomponentsjs
in your project folder
download &
add module
add dependency to
bower file

How to use Components
• All components are build as web components
• A single component or a set can be added by
using bower
$ bower install --save Polymer/paper-slider
<link rel="import" href="bower_components/paper-slider/paper-slider.html">
import it in HTML

Paper Button
• The default Button
• shows ripple animation on click
<paper-button>flat button</paper-button>
<paper-button raised>raised button</paper-button>
<paper-button noink>No ripple effect</paper-button>

Paper CheckBox
• A styled CheckBox
• State can be defined as attribute
<paper-checkbox></paper-checkbox>
<paper-checkbox checked></paper-checkbox>

Paper Dialog
• A dialog
• Supports title, modality, actions, …
<paper-dialog heading="Title">
<p>Some content</p>
</paper-dialog>

Overview

Layout
• HeaderPanel
• Toolbar
• DrawerPanel
• Scaffold

Toolbar
• An application toolbar
• Toolbar content will be aligned
<core-toolbar>
<paper-icon-button icon="menu"></paper-icon-button>
<div>My Application</div>
<span flex></span>
<paper-icon-button icon="event"></paper-icon-button>
</core-toolbar>

HeaderPanel
• Wrapper around toolbar and content
• Toolbar always on top
• Content scrollable
<core-header-panel flex>
<core-toolbar>Title</core-toolbar>
<div>content</div>
</core-header-panel>

DrawerPanel
• Adds a responsive menu
• Defines attributes to
open and close the
menu
• Normally wraps 2 core-
header-panel

DrawerPanel
<core-drawer-panel>
<core-header-panel drawer>
<core-toolbar></core-toolbar>
<core-menu>
<core-item label="One"></core-item>
</core-menu>
<core-header-panel main>
<core-toolbar>
<paper-icon-button core-drawer-toggle icon="menu"></paper-icon-button>
</core-toolbar>
<div>content</div>
</core-drawer-panel>
drawer panel
main panel
show drawer

Scaffold
• Basic skeleton
• Best practice to
create an
application
• Contains all the
shown features
<core-scaffold>
<core-header-panel navigation flex>

<span tool>Title</span>
<div>content</div>
</core-scaffold>
defines the drawer
defines the main
toolbar

Paper Demo
• Create a new folder
• Install needed modules with Bower
$ mkdir app
$ cd app
$ bower init
$ bower install --save PolymerElements/paper-elements

Paper Demo
• Create index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>Hello World</body>
</html>

Paper Demo
• add webcomponents.js
•  <head>
. . .
<script src=„bower_components/webcomponentsjs/webcomponents.js">
</script>
</head>

Paper Demo
• add Roboto Font
•  <head>
<link rel="import" href=„bower_components/font-roboto/
roboto.html">
<style>
html,body {
font-family: 'RobotoDraft', sans-serif;
}
</style>
</head>

Paper Demo

Paper Demo
• add a header panel with a toolbar
<body class="fullbleed layout vertical"> 
<paper-header-panel class="flex"> 
<paper-toolbar>Title</paper-toolbar> 
</paper-header-panel> 
</body> 
<link rel=„import" href="bower_components/paper-styles/paper-styles.html">
<link rel=„import" href="bower_components/paper-header-panel/paper-header-panel.html">
<link rel="import" href="bower_components/paper-toolbar/paper-toolbar.html">

Paper Demo
• Add some content to the toolbar
<link rel=„import" href="bower_components/iron-icons/iron-icons.html">
<link rel="import" href="bower_components/paper-icon-button/paper-icon-button.html">
<paper-toolbar> 
<paper-icon-button icon="menu"></paper-icon-button> 
<span class="flex">Title</span> 
<paper-icon-button icon="add"></paper-icon-button> 
<paper-icon-button icon="remove"></paper-icon-button> 
</paper-toolbar>

Paper Demo
• Add paper elements as content
<link rel="import"
href=„bower_components/paper-input/paper-input.html">
<link rel="import"
href="bower_components/paper-button/paper-button.html">
<div class="layout vertical">
<paper-input label="Name"></paper-input>
<paper-input label="Description"></paper-input>
<paper-button raised>save</paper-button>
</div>

Paper Demo
• Add some padding
.content {
padding: 20px;
}
<div class="content layout vertical">
<paper-input label="Name"></paper-input>
<paper-input label="Description"></paper-input>
<paper-button raised>save</paper-button>
</div>

Custom Components
• Polymer can be used to create custom
web components
• Defines a nice and modern API to create
components
• Adds several features on top of the spec

A First Example
<link rel=„import" href="bower_components/polymer/polymer.html">

A First Example
<dom-module id="dom-element">
</dom-module>

A First Example
<template>
<p>I'm a DOM element. This is my local DOM!</p>
</template>
</dom-module>

A First Example
<template>
<p>I'm a DOM element. This is my local DOM!</p>
</template>
<script>
Polymer({is: "dom-element"});
</script>
</dom-module>

• Component name must contain a "-"
• Polymer script call must be included
• Template is not needed
• Once it is created it can be used as
custom tag
Custom Components

Lifecycle
• Polymer defines it’s own lifecycle that is
based on the Web Component Spec
lifecycle
• Callbacks can simply be defined in
Polymer

Difference to Spec
• created instead of createdCallback
• attached instead of attachedCallback
• detached instead of detachedCallback
• attributeChanged instead of
attributeChangedCallback

Additional Callback
• Polymer adds an extra callback ready which is
invoked when Polymer has finished creating and
initializing the element’s local DOM.
• The created callback is always called before
ready.
• The ready callback is always called before
attached.

Example<script>
Polymer({
is: „dom-element“,
ready: function () {
console.log('Ready!');
},
detached: function() {
console.log(this.localName + '#' + this.id + ' was detached');
},
attributeChanged: function(name, type) {
console.log('Attribute ' + name + ' was changed');
}
});
</script>

Property
• Properties can be specified for a
Polymer component
• A property can be of the following types:
• Boolean, Date, Number, String,
Array or Object

Property
• Properties can be defined in JavaScript
Polymer({
is: 'my-component',
properties: {
user: String,
isHappy: Boolean
}
});

Property
• Properties can be set in JavaScript 
 
 
 
Properties can be set as HTML attribute
ready: function () {
this.set(‘user‘,’unknown‘);
}
<my-component user=‘unknown‘></my-component>

Property
• Default value can be specified
properties: {
user: {
type: String,
value: ‘unknown‘
},
isHappy: Boolean
}

Data Binding
• binds a property to an attribute of an
element 
 
• Use [[prop]] for one-way-binding
• Property defines if {{prop}} is one-way or
bidirectional binding
<child-element name="{{myName}}"></child-element>

Ok, let’s create
an application

Application Basic Layout
• Header with fixed size 
• Resizeable main area 
• Footer with fixed size

Polymer Layout
• The Polymer layout is based on flexbox
• Use Polymer layout classes to simplify
the usage of flexbox

Flexbox
• New CSS 3 layout
• Flexbox consists of flex containers and
flex items.
box box box
container

Flexbox
• Contents can be laid out in any flow direction (leftwards,
rightwards, downwards, or even upwards!)
• Contents can be laid out linearly along a single (main) axis
or wrapped into multiple lines along a secondary (cross)
axis
• Contents can “flex” their sizes to respond to the available
space
• …

Flexbox
box box box
container
flex-direction: row;
box
box
box
container
flex-direction:column;

Flexbox
box box box
container
flex: 0; flex: 0;flex: 1;

Application Basic Layout
fix height
fix height
dynamic
height
flexbox

Using Flex Box in Polymer
• Polymer defines several layout classes
• layout: basic class that must be set
• horizontal: layout content in a row
• vertical: layout content in a column
• flex: content will fill space

Polymer Layout
Alpha Beta Gamma
<div class="horizontal layout">
<div>Alpha</div>
<div class="flex">Beta (flex)</div>
<div>Gamma</div>
</div>

Application Structure
• A Polymer application is based on web
components
• The components define a hierarchy
• chat-view component contains
several chat-bubble components

Yeah!
message-view

chat-bubble
Yeah!
message-view

chat-view
chat-bubble
Yeah!
message-view

app-view
chat-view
chat-bubble
Yeah!
message-view

Like building futuristic Matrjoschkas with Lego

• The demo will use bower to handle all
dependencies
• Real applications should use a build
script
• like Gulp or Grunt

index.html
• add web components polyfill script
• Import basic dependencies like Roboto-
Font and Polymer layouts
• body contains only one web
component: the application

imports
 
<script src="bower_components/webcomponentsjs/webcomponents.js"></script> 
 
<link rel="import" href="bower_components/paper-styles/paper-styles.html"> 
<link rel="import" href="bower_components/font-roboto/roboto.html">

imports
 
<script src="bower_components/webcomponentsjs/webcomponents.js"></script> 
 
<link rel="import" href="bower_components/paper-styles/paper-styles.html"> 
<link rel="import" href="bower_components/font-roboto/roboto.html"> 
web components polyfill
font and layouts

component-xy.html
• Contains the definition of one web
component
• All components that are needed
internally should be imported

Workspace
bower.json
index.html
chat-bubble.html
chat-view.html
chat-header.html
chat-footer.html
chat-app.html

Chat Bubble
Sender
This is the chat message. The size of the
bubble should ﬁt to this message. Next to
normal text emojis can be part of a
message: 😊
5 min ago

Chat Bubble
Sender
message: 😊
5 min ago
depends on parent width
dependsontextlength

Chat Bubble
Sender
message: 😊
5 min ago
dependsontext
length
fix
fix

Chat Bubble
Sender
message: 😊
5 min ago
fix

Chat Bubble

Chat Bubble
<div id="bubble"><div>
#bubble { 
background-color: #F2F2F2; 
border-radius: 5px; 
}

Chat Bubble
<div id="bubble"><div>
#bubble { 
border-radius: 5px;
padding: 2px 12px 2px 12px;
}

CSS ::after Selector
p::after { 
content: " - Remember this"; 
}
• The ::after selector inserts something after
the content of each selected element(s).
• Use the content property to specify the
content to insert.

Chat Bubble
#bubble::after { 
display: block; 
position: absolute; 
content: "00a0"; 
height: 16px; 
width: 20px; 
bottom: 11px; 
transform: rotate(29deg) skew(-35deg); 
}

Chat Bubble Web Component
<dom-module id=„chat-bubble">
<style>
#bubble { . . . }
</style>
 
<template>
<div id=„bubble"> . . . </div>
</template>
 
</dom-module>
 
<script>
Polymer({ 
is: "chat-bubble"
});
</script>

Chat Bubble Attributes
• Sender & message should be dynamic
• Can be defined as attributes of the
component
• Use Polymer properties
properties: { 
text: String, 
sender: String 
}

Problem

conﬁgure Bubble with CSS
#bubble { 
. . . 
}
• We can specify 2 separate CSS classes:
me and you
.me {
. . .
}
.you {
. . .
}

• We can dynamically change the CCS
class in JS code
• Access bubble div in Polymer 
• Mutate class list
change Css class
bubbleDiv.classList.remove('me'); 
bubbleDiv.classList.add('you');
var bubbleDiv = this.$.bubble;
id of the div

• Polymer provides observers for
properties 
 
• Observer will be called whenever
property values changes
Property Observer
me: {
type: Boolean, 
observer: ‚_senderChanged'
}
_senderChanged: function (newValue, oldValue) { 
this.updateStyleClass(newValue); 
}

• The initial boolean property value
reflects if a HTML attribute is set
use boolean property
<chat-bubble me></chat-bubble>
<chat-bubble></chat-bubble>
„me“ property == true
„me“ property == false

Chat View
• Should contain a list of chat bubbles
• Scrollable
• based on data array (JSON)

Polymer Iron
• List of low level components
• Define behavior
• Don’t define theme / skin

iron-list
• Defines a list that can be scrolled
• Can contain thousands of elements.
Only visible area is rendered
• Define a template for each cell

iron-list
<iron-list items="[[data]]" as="item"> 
<template> 
<chat-bubble text=„[[item.message]]" …></chat-bubble> 
</template> 
</iron-list>

provide dummy data
<iron-ajax url="data.json" last-response="{{messages}}" auto></iron-ajax> 
• Polymer provides Iron Element to load
JSON data

Centered Text
• The name should be centered
• Layout should not be effected by
other nodes
.centered { 
top: 18px; 
left: 0; 
position:absolute; 
width: 100%; 
}
.title { 
font-size: 22px; 
text-align:center; 
}
parent of text text

Rounded Image
• Avatar image should be rounded
.avatar { 
width: 64px; 
height: 64px; 
border-radius: 32px; 
border-style: solid; 
border-width: 1px; 
border-color: lightgrey; 
}

Dynamic content
• Add some Polymer properties 
 
 
• Use them inline 
Properties: { 
title: String, 
state: String 
}
<div class="centered vertical layout"> 
<div class="title">{{title}}</div> 
<div class="subtitle">{{state}}</div> 
</div>

Custom Textbox
• <input> can be styled with CSS
• Polymer provides a behavior to add
data binding to a normal input
<input is="iron-input" value="{{message::input}}">

Custom Button
• Call a internal web component function
when the button is clicked
<button on-click="sendMyMessage">send</button>
Polymer({ 
is: "input-view", 
sendMyMessage: function (e) {…} 
});

Polymer events
• Web Components can fire events 
• Observer can be added 
• Hint: trigger a resize for iron-list when
content changes: 
this.fire('message-send', {message: this.message});
<input-view on-message-send="send"></input-view>
this.$.itemsList.fire('resize');

About Emojis
• All emojis are defined by a a unicode
character

Emojis in HTML
• Most OS provide a font to render emojis
• As long as the browser supports
unicode and your files are encoded in
unicode you can use them

Parse Emojis
• Cool lib with word - emoji mapping can be
found here:  
github.com/muan/emojilib
• A Polymer Emoji selector can be found here: 
github.com/notwaldorf/emoji-selector

Emojis in the chat
var converted = ''; 
var words = input.split(' '); 
for (var i = 0; i < words.length; i++) { 
var emoji = getMeAnEmoji(words[i]); 
if(emoji != '') { 
converted = converted + ' ' + emoji; 
} else { 
converted = converted + ' ' + words[i]; 
} 
}

Dolphin Platform
• Enterprise Framework with
Presentation Model pattern
• Server centric logic
• Spring and JavaEE integration

Dolphin Platform
• JavaFX, AngularJS & Google Polymer
client APIs 
 
 
 
 
… More will come

Dolphin Platform

Model
• Defined in Java
• Hierarchical models are no problem
• Full observable
• Collection support

Model
@DolphinBean
public class MyModel {
private Property<String> name;
public Property<String> nameProperty() {return name;}
}
Dolphin Platform propere can be
used on client and server
This is NOT a JFXProperty

Controller
• Controller is defined on the server
• Will be managed by the container
(Spring, JavaEE, …)
• Full CDI support

Controller
@DolphinController
public class MyController {
@DolphinModel
private MyModel model;
@PostConstruct
public void init() {
model.nameProperty().onChange(e -> System.out.println(„CHANGE“));
}
}
Inject the model
Use containerfeatures

View
• The smallest part ;)
• Use the complete UI Toolkit power
• Simply bind your view to the model
• Trigger controller actions

View
<dom-module id="my-view">
<template>
<paper-input label="Task name" value="{{model.name}}"></paper-input>
</template>
</dom-module>
<script>
Polymer({
is: "my-view",
behaviors: [clientContext.createBehavior('MyController')]
});
</script>
Dolphin Platform providesPolymer behavior
Server controller
Dolphin Platformmodel

Sending a message
Client Server

Sending a message
Client Server
call DolphinAction

Sending a message
Client Server
Event
Bus
call DolphinAction

Sending a message
Client Server
Event
Bus
call DolphinAction
publish

Sending a message
Client Server
Event
Bus
call DolphinAction
publish
notify

Sending a message
Client
Presentation
Model
Server
Event
Bus
call DolphinAction
publish
notify

Sending a message
Client
Presentation
Model
Server
Event
Bus
call DolphinAction
publish
notifyupdate

Sending a message
Client
Presentation
Model
Server
Event
Bus
call DolphinAction
publish
notifyupdate
synced
automatically

client code diff

Additional Topics
• Behaviors
• Animations
• Custom CSS properties
• DOM manipulation

Additional Topics
• Polymer contains more features
• Explorer the Polymer Catalog 
• Read the documentation
https://elements.polymer-project.org
https://www.polymer-project.org/1.0/docs/

Real World
• Todo

Polymer Starter Kit
• Fully functional mini-application
• Defines application structure
• Contains many useful configurations 
(e.g. for gitignore, jshint, travis)
• Sophisticated build script
• Sidenote: all files contain copyright headers

Polymer Starter Kit
• Minification ( js, css, images)
• Inlining of HTML Imports
• Cache Config for Offline Usage
• Local Server (with browser-sync)
• Testing

Web Component Tester
npm install -g web-component-tester
wct
Installation
Usage

• Integrates Mocha, Chai, and Sinon
• Runs with Selenium
• Integration with Sauce Labs provided
• By default runs all tests in test/
• Tasks for grunt and gulp available 
(though gulp integration is sub-optimal)

<head> 
</script> 
</head>
web component polyfill

<head> 
</script> 
</head> provided by wct

<head> 
</script> 
</head>
component under test

<body>
<test-fixture id="chatBubbleFixture"> 
<template> 
<chat-bubble></chat-bubble> 
</template> 
</test-fixture>
...

<body>
<template> 
</template> 
</test-fixture>
...
provided by wct

<body>
<template> 
</template> 
</test-fixture>
...
web component under test

Web Component Tester<script> 
describe('<chat-bubble>', function() { 
it('should show the sender', function(done) { 
var chatBubble = fixture('chatBubbleFixture'); 
chatBubble.set('sender', 'Test Sender'); 
setTimeout(function () { 
expect(chatBubble.$$('.sender'))
.to.have.property('textContent') 
.that.contains('Test Sender'); 
done(); 
}); 
}); 
}); 
</script>

done(); 
}); 
}); 
}); 
</script>
create component

done(); 
}); 
}); 
}); 
</script>
needs to be
asynchronous

done(); 
}); 
}); 
}); 
</script>
DOM-query

module.exports = { 
plugins: { 
sauce: { 
browsers: [ 
{ 
platform: 'Windows 8.1', 
browserName: 'internet explorer', 
version: '11.0' 
} 
] 
} 
} 
};

module.exports = { 
plugins: { 
sauce: { 
browsers: [ 
{ 
platform: 'Windows 8.1', 
browserName: 'internet explorer', 
version: '11.0' 
} 
] 
} 
} 
};
environment
configuration

Situation
• All components are part of our project
• We can’t reuse them in other projects
• The components are not isolated
• Looks like a bad mixup

Wish list
• We want reusable components
• A component should be independent and
isolated
• Components can depend on each other /
include other custom components
• Use a component as a bower dependency

seed-element
• Blueprint for custom component
• Defines demo, test, and main section
• Web component tester and polyserve
integrated

polyserve
• Polymer offers a special web server to
create reusable components
• serves project files under /components/
{bower-name}/
• other component are served from ./
bower_components/

polyserve
• Your component can refer to external
components like your component is in the
bower_components folder
• Simple to create a github repo for one
specific reusable component
• Polymer Paper is doing the same

BUILDING MODERN WEB UIS WITH WEB COMPONENTS @ Devoxx

More Related Content

Viewers also liked

Similar to BUILDING MODERN WEB UIS WITH WEB COMPONENTS @ Devoxx

More from Hendrik Ebbers

Recently uploaded

BUILDING MODERN WEB UIS WITH WEB COMPONENTS @ Devoxx