Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
+Web Components
Polymer
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
• Lead of JUG Dortmund
• Speaker, blogger & author
• Java Arch...
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
• UI magician
• Active speaker and writer
• Code Monkey @ Cano...
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Questions?
https://app.sli.do/event/xfb1afkm/ask
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Web Component
Spec
Polymer A first app Real World
Applications...
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
frontend code today
<li class="yt-shelf-grid-item yt-uix-shelf...
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
frontend code today
<li class=" yt-uix-shelfslider-item">

<div class="yt-lockup yt-lockup-grid yt-lockup-video vve-check clearfix" data-conte...
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
frontend code tomorrow
<shelf
title="Popular on YouTube - Swit...
Web Component
Spec
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Web Component Spec
• Specified by W3C
• Current state of spec ...
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Web Component Spec
• Divided in 4 parts:
• HTML Templates
• Sh...
<template>
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
<template>
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
<template>
<div class="activity-stream">

<h2>Activities</h2>
...
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
<template>
<div class="activity-stream">

<h2>Activities</h2>
...
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
<template>
<div class="activity">



</div>


<img class="icon...
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
<template>
<template id="activity-template">

</template>
<div...
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
<template>
<div>

<img class="icon" src="" width="40" height="...
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
<template>
<div>

<img class="icon" src="" width="40" height="...
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
<template>
<template id="activity-template">

<div>

<img clas...
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
<template>
<template id="activity-template">

<div>

<img clas...
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
<template>
<template id="activity-template">

<div>

<img clas...
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
<template>
document.body.appendChild(clone);
<template id="act...
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
<template>
<template id="activity-template">

<div>

<img clas...
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
<template>
<template id="activity-template">

<div>

<img clas...
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
<template>
22+ 26+ and
Android 4.4+
7.1+ 15+
Shadow Dom
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Shadow Dom
Web Component
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Shadow Dom
".content"".content"
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Shadow Dom
".content"".content"
document.querySelector(".conte...
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Shadow Dom
".content"".content"
document.querySelector(".conte...
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Shadow Dom
".content"".content"
.content {
color: blue;
}
docu...
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Shadow Dom
".content"".content"
.content {
color: blue;
}
docu...
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Shadow Dom
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Shadow Dom
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Shadow Dom
Host
Root
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Shadow Dom
visible to

the user
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Shadow Dom
visible to

the user
used during
rendering
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Shadow Dom
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Shadow Dom
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Shadow Dom
document.querySelector(".content")
.content {
color...
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Shadow Dom
document.querySelector(".content")
.content {
color...
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Shadow Dom
Host
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Shadow Dom
var root = host.createShadowRoot();
Host
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Shadow Dom
var root = host.createShadowRoot();
Host
Root
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Shadow Dom
var root = host.createShadowRoot();
Host
Root
root....
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Shadow Dom
var root = host.createShadowRoot();
Host
Root
root....
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Shadow Dom
Host
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Shadow Domvar root = host.createShadowRoot();
Host
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Shadow Domvar root = host.createShadowRoot();
Host
Root
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Shadow Domvar root = host.createShadowRoot();
Host
Root
var cl...
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Shadow Domvar root = host.createShadowRoot();
Host
Root
var cl...
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Shadow Domvar root = host.createShadowRoot();
Host
Root
var cl...
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Shadow Domvar root = host.createShadowRoot();
Host
Root
var cl...
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Shadow Dom
25+ and
Android 4.4+
15+
Custom
Elements
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Custom Elements
<div class="activity">
<a>Michael</a> had fun ...
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Custom Elements
<div class="activity">
<a>Michael</a> had fun ...
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Custom Elements
<activity-card iconSrc="img/michael.jpg" time=...
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Custom Elements
var activityCardPrototype = Object.create(HTML...
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Custom Elements
var activityCardPrototype = Object.create(HTML...
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Custom Elements
var activityCardPrototype = Object.create(HTML...
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Custom Elements
var activityCardPrototype = Object.create(HTML...
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Custom Elements
document.registerElement("activity-card", opti...
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Custom Elements
document.registerElement("activity-card", opti...
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Custom Elements
document.registerElement("activity-card", opti...
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Custom Elements
document.registerElement("activity-card", opti...
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Custom Elements
create attach detach
change
createdCallback
at...
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Custom Elements
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Custom Elementsvar activityPrototype = Object.create(HTMLEleme...
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Custom Elementsvar activityPrototype = Object.create(HTMLEleme...
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Custom Elementsvar activityPrototype = Object.create(HTMLEleme...
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Custom Elementsvar activityPrototype = Object.create(HTMLEleme...
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Custom Elementsvar activityPrototype = Object.create(HTMLEleme...
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Custom Elementsvar activityPrototype = Object.create(HTMLEleme...
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Custom Elementsvar activityPrototype = Object.create(HTMLEleme...
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Custom Elementsvar activityPrototype = Object.create(HTMLEleme...
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Custom Elementsvar activityPrototype = Object.create(HTMLEleme...
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Custom Elementsvar activityPrototype = Object.create(HTMLEleme...
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Custom Elements
35+ and
Android 4.4.4+
26+
Html Import
<!DOCTYPE html>

<html>

<head lang="en">

<meta charset="UTF-8">

<title>Activity Stream - Standard Web Component</title>...
<!DOCTYPE html>

<html>

<head lang="en">

<meta charset="UTF-8">

<title>Activity Stream - Standard Web Component</title>...
Component Code
Application Code
Application Code
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Html Import
<!DOCTYPE html>

<html>

<head lang="en">

<meta c...
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Html Import
<!DOCTYPE html>

<html>

<head lang="en">

<meta c...
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Html Import
<!DOCTYPE html>

<html>

<head lang="en">

<meta c...
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Html Import
36+ and
Android Browser
37
26+
Use Web
Components today
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
webcomponent.js
• Today not all browsers support the new stand...
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
webcomponent.js
• The polyfills are the junction of X-Tag and
...
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
webcomponent.js
• X-Tag and Polymer depends on
webcomponents-j...
Polymer
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Polymer
• Adds sugar on top of web components
• Easy to use
• ...
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Polymer
• Separated in several parts:
• Polymer API
• Iron Ele...
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Polymer
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Iron Elements
• Iron Elements are low level components
• Most ...
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Icons
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Icons
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Google Web Components
• Google is building a lot of components...
Paper Elements
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Polymer Paper
• Complete component library based on
Material D...
Bower
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Bower
• A package manager for the web
• Search for dependencie...
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Bower
requires npm, node.js and git
$ npm install -g bower
$ b...
Polymer Paper
Components
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
How to use Components
• All components are build as web compon...
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Paper Button
• The default Button
• shows ripple animation on ...
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Paper CheckBox
• A styled CheckBox
• State can be defined as a...
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Paper Dialog
• A dialog
• Supports title, modality, actions, …...
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Overview
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Overview
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Layout
• HeaderPanel
• Toolbar
• DrawerPanel
• Scaffold
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Toolbar
• An application toolbar
• Toolbar content will be ali...
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
HeaderPanel
• Wrapper around toolbar and content
• Toolbar alw...
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
DrawerPanel
• Adds a responsive menu
• Defines attributes to
o...
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
DrawerPanel
<core-drawer-panel>
<core-header-panel drawer>
<co...
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Scaffold
• Basic skeleton
• Best practice to
create an
applica...
using Paper
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Paper Demo
• Create a new folder
• Install needed modules with...
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Paper Demo
• Create index.html
<!DOCTYPE html>
<html lang="en"...
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Paper Demo
• add webcomponents.js
• 
<head>
. . .
<script src=...
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Paper Demo
• add Roboto Font
• 
<head>
<link rel="import" href...
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Paper Demo
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Paper Demo
• add a header panel with a toolbar
<body class="fu...
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Paper Demo
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Paper Demo
• Add some content to the toolbar
<link rel=„import...
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Paper Demo
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Paper Demo
• Add paper elements as content
<link rel="import"
...
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Paper Demo
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Paper Demo
• Add some padding
.content {
padding: 20px;
}
<div...
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Paper Demo
www.guigarage.com
Custom
Components
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Custom Components
• Polymer can be used to create custom
web c...
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
A First Example
<link rel=„import" href="bower_components/poly...
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
A First Example
<link rel=„import" href="bower_components/poly...
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
A First Example
<link rel=„import" href="bower_components/poly...
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
A First Example
<link rel=„import" href="bower_components/poly...
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
• Component name must contain a "-"
• Polymer script call must...
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Lifecycle
• Polymer defines it’s own lifecycle that is
based o...
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Difference to Spec
• created instead of createdCallback
• atta...
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Additional Callback
• Polymer adds an extra callback ready whi...
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Example<script>
Polymer({
is: „dom-element“,
ready: function (...
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Property
• Properties can be specified for a
Polymer component...
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Property
• Properties can be defined in JavaScript
Polymer({
i...
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Property
• Properties can be set in JavaScript







Properti...
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Property
• Default value can be specified
properties: {
user: ...
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Data Binding
• binds a property to an attribute of an
element
...
Ok, let’s create
an application
Mockup
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Basic
Layout
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Application Basic Layout
• Header with fixed size

• Resizeabl...
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Polymer Layout
• The Polymer layout is based on flexbox
• Use ...
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Flexbox
• New CSS 3 layout
• Flexbox consists of flex containe...
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Flexbox
• Contents can be laid out in any flow direction (left...
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Flexbox
box box box
container
flex-direction: row;
box
box
box...
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Flexbox
box box box
container
flex: 0; flex: 0;flex: 1;
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Application Basic Layout
fix height
fix height
dynamic
height
...
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Using Flex Box in Polymer
• Polymer defines several layout cla...
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Polymer Layout
Alpha Beta Gamma
<div class="horizontal layout"...
Application
Structure
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Application Structure
• A Polymer application is based on web
...
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Application Structure
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Application Structure
Yeah!
message-view
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
chat-bubble
Application Structure
Yeah!
message-view
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
chat-view
chat-bubble
Application Structure
Yeah!
message-view
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
app-view
chat-view
chat-bubble
Application Structure
Yeah!
mes...
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Like building futuristic Matrjoschkas with Lego
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Application Structure
• The demo will use bower to handle all
...
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
index.html
• add web components polyfill script
• Import basic...
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
imports


<script src="bower_components/webcomponentsjs/webcom...
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
imports


<script src="bower_components/webcomponentsjs/webcom...
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
component-xy.html
• Contains the definition of one web
compone...
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Workspace
bower.json
index.html
chat-bubble.html
chat-view.htm...
Chat Bubble
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Chat Bubble
Sender
This is the chat message. The size of the
b...
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Chat Bubble
Sender
This is the chat message. The size of the
b...
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Chat Bubble
Sender
This is the chat message. The size of the
b...
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Chat Bubble
Sender
This is the chat message. The size of the
b...
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Chat Bubble
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Chat Bubble
<div id="bubble"><div>
#bubble {

background-color...
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Chat Bubble
Sender
This is the chat message. The size of the
b...
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Chat Bubble
<div id="bubble"><div>
#bubble {

background-color...
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Chat Bubble
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
CSS ::after Selector
p::after {

content: " - Remember this";
...
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Chat Bubble
#bubble::after {

background-color: #F2F2F2;

disp...
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Chat Bubble Web Component
<dom-module id=„chat-bubble">
<style...
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Chat Bubble Attributes
• Sender & message should be dynamic
• ...
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Problem
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
configure Bubble with CSS
#bubble {

. . .

}
• We can specify ...
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
• We can dynamically change the CCS
class in JS code
• Access ...
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
• Polymer provides observers for
properties



• Observer will...
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
• The initial boolean property value
reflects if a HTML attrib...
Chat View
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Chat View
• Should contain a list of chat bubbles
• Scrollable...
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Polymer Iron
• List of low level components
• Define behavior
...
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
iron-list
• Defines a list that can be scrolled
• Can contain ...
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
iron-list
<iron-list items="[[data]]" as="item">

<template>

...
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
provide dummy data
<iron-ajax url="data.json" last-response="{...
Application
Header
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Centered Text
• The name should be centered
• Layout should no...
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Rounded Image
• Avatar image should be rounded
.avatar {

widt...
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Dynamic content
• Add some Polymer properties





• Use them ...
Application
Footer
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Custom Textbox
• <input> can be styled with CSS
• Polymer prov...
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Custom Button
• Call a internal web component function
when th...
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Polymer events
• Web Components can fire events

• Observer ca...
Emoji Support
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
About Emojis
• All emojis are defined by a a unicode
character
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Emojis in HTML
• Most OS provide a font to render emojis
• As ...
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Parse Emojis
• Cool lib with word - emoji mapping can be
found...
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Emojis in the chat
var converted = '';

var words = input.spli...
Adding a
server
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Dolphin Platform
• Enterprise Framework with
Presentation Mode...
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Dolphin Platform
• JavaFX, AngularJS & Google Polymer
client A...
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Dolphin Platform
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Model
• Defined in Java
• Hierarchical models are no problem
•...
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Model
@DolphinBean
public class MyModel {
private Property<Str...
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Controller
• Controller is defined on the server
• Will be man...
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Controller
@DolphinController
public class MyController {
@Dol...
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
View
• The smallest part ;)
• Use the complete UI Toolkit powe...
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
View
<dom-module id="my-view">
<template>
<paper-input label="...
Chat App
PolymerWeb Components & by
Sending a message
Client Server
PolymerWeb Components & by
Sending a message
Client Server
call DolphinAction
PolymerWeb Components & by
Sending a message
Client Server
Event
Bus
call DolphinAction
PolymerWeb Components & by
Sending a message
Client Server
Event
Bus
call DolphinAction
publish
PolymerWeb Components & by
Sending a message
Client Server
Event
Bus
call DolphinAction
publish
PolymerWeb Components & by
Sending a message
Client Server
Event
Bus
call DolphinAction
publish
notify
PolymerWeb Components & by
Sending a message
Client
Presentation
Model
Server
Event
Bus
call DolphinAction
publish
notify
PolymerWeb Components & by
Sending a message
Client
Presentation
Model
Server
Event
Bus
call DolphinAction
publish
notifyu...
PolymerWeb Components & by
Sending a message
Client
Presentation
Model
Server
Event
Bus
call DolphinAction
publish
notifyu...
PolymerWeb Components & by
Sending a message
Client
Presentation
Model
Server
Event
Bus
call DolphinAction
publish
notifyu...
PolymerWeb Components & by
client code diff
Additional
Topics
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Additional Topics
• Behaviors
• Animations
• Custom CSS proper...
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Additional Topics
• Polymer contains more features
• Explorer ...
Real World
Applications
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Real World
• Todo
Polymer
Starter Kit
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Polymer Starter Kit
• Fully functional mini-application
• Defi...
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Polymer Starter Kit
• Minification ( js, css, images)
• Inlini...
Web Component
Tester
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Web Component Tester
npm install -g web-component-tester
wct
I...
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Web Component Tester
• Integrates Mocha, Chai, and Sinon
• Run...
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Web Component Tester
<head>

<meta charset="utf-8">

<script s...
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Web Component Tester
<head>

<meta charset="utf-8">

<script s...
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Web Component Tester
<head>

<meta charset="utf-8">

<script s...
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Web Component Tester
<head>

<meta charset="utf-8">

<script s...
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Web Component Tester
<head>

<meta charset="utf-8">

<script s...
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Web Component Tester
<head>

<meta charset="utf-8">

<script s...
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Web Component Tester
<body>
<test-fixture id="chatBubbleFixtur...
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Web Component Tester
<body>
<test-fixture id="chatBubbleFixtur...
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Web Component Tester
<body>
<test-fixture id="chatBubbleFixtur...
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Web Component Tester
<body>
<test-fixture id="chatBubbleFixtur...
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Web Component Tester<script>

describe('<chat-bubble>', functi...
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Web Component Tester<script>

describe('<chat-bubble>', functi...
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Web Component Tester
<script>

describe('<chat-bubble>', funct...
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Web Component Tester
<script>

describe('<chat-bubble>', funct...
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Web Component Tester<script>

describe('<chat-bubble>', functi...
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Web Component Tester<script>

describe('<chat-bubble>', functi...
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Web Component Tester<script>

describe('<chat-bubble>', functi...
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Web Component Tester<script>

describe('<chat-bubble>', functi...
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Web Component Tester
module.exports = {

plugins: {

sauce: {
...
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Web Component Tester
module.exports = {

plugins: {

sauce: {
...
Create reusable
components
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Situation
• All components are part of our project
• We can’t ...
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
Wish list
• We want reusable components
• A component should b...
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
seed-element
• Blueprint for custom component
• Defines demo, ...
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
polyserve
• Polymer offers a special web server to
create reus...
PolymerWeb Components & by
Questions: https://goo.gl/iZI3l0
polyserve
• Your component can refer to external
components li...
Questions?
BUILDING MODERN WEB UIS WITH WEB COMPONENTS @ Devoxx
BUILDING MODERN WEB UIS WITH WEB COMPONENTS @ Devoxx
BUILDING MODERN WEB UIS WITH WEB COMPONENTS @ Devoxx
BUILDING MODERN WEB UIS WITH WEB COMPONENTS @ Devoxx
BUILDING MODERN WEB UIS WITH WEB COMPONENTS @ Devoxx
BUILDING MODERN WEB UIS WITH WEB COMPONENTS @ Devoxx
BUILDING MODERN WEB UIS WITH WEB COMPONENTS @ Devoxx
BUILDING MODERN WEB UIS WITH WEB COMPONENTS @ Devoxx
Nächste SlideShare
Wird geladen in …5
×

BUILDING MODERN WEB UIS WITH WEB COMPONENTS @ Devoxx

1.241 Aufrufe

Veröffentlicht am

This session will give you a thorough introduction into Web Components. We start by explaining the standards that form the foundation of WebComponents: Template tag, custom elements, Shadow DOM, and HTML imports. Next we will do a live coding session showing you how you can rapidly build a web application with existing Web Components from Polymer Elements and other sources and connect the application to a server. In the last section, we are going to explain how you can build your own custom components and integrate them into your application. Also we will share our experience gained while building an application with Web Components and talk about pitfalls that should be avoided when using Web Components in a real world project.

Veröffentlicht in: Technologie
  • Als Erste(r) kommentieren

BUILDING MODERN WEB UIS WITH WEB COMPONENTS @ Devoxx

  1. 1. +Web Components Polymer
  2. 2. 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
  3. 3. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 • UI magician • Active speaker and writer • Code Monkey @ Canoo Engineering AG • http://blog.netopyr.com @net0pyr Michael Heinrichs
  4. 4. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 Questions? https://app.sli.do/event/xfb1afkm/ask
  5. 5. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 Web Component Spec Polymer A first app Real World Applications Content
  6. 6. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 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
  7. 7. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 frontend code today
  8. 8. <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
  9. 9. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 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
  10. 10. Web Component Spec
  11. 11. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 Web Component Spec • Specified by W3C • Current state of spec can be found online: 
 http://www.w3.org/standards/techs/components#w3c_all
  12. 12. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 Web Component Spec • Divided in 4 parts: • HTML Templates • Shadow DOM • Custom Elements • HTML Imports
  13. 13. <template>
  14. 14. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 <template>
  15. 15. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 <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> 
 <div class="activity">
 <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>
  16. 16. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 <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> 
 <div class="activity">
 <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>
  17. 17. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 <template> <div class="activity">
 
 </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>
  18. 18. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 <template> <template id="activity-template">
 </template> <div class="activity">
 
 </div> template tag 
 <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>
  19. 19. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 <template> <div>
 <img class="icon" src="" width="40" height="40">
 <div class="time"></div>
 <div class="content"></div>
 </div> <template id="activity-template">
 </template> <div class="activity">
 
 </div> copy boilerplate template tag 
 <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>
  20. 20. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 <template> <div>
 <img class="icon" src="" width="40" height="40">
 <div class="time"></div>
 <div class="content"></div>
 </div> <template id="activity-template">
 </template> <div class="activity">
 
 </div> copy boilerplate template tag
  21. 21. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 <template> <template id="activity-template">
 <div>
 <img class="icon" src="" width="40" height="40">
 <div class="time"></div>
 <div class="content"></div>
 </div>
 </template>
  22. 22. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 <template> <template id="activity-template">
 <div>
 <img class="icon" src="" width="40" height="40">
 <div class="time"></div>
 <div class="content"></div>
 </div>
 </template> var template = document.querySelector('#activity-template');
  23. 23. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 <template> <template id="activity-template">
 <div>
 <img class="icon" src="" width="40" height="40">
 <div class="time"></div>
 <div class="content"></div>
 </div>
 </template> var template = document.querySelector('#activity-template'); var clone = document.importNode(template.content, true); use content property
  24. 24. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 <template> document.body.appendChild(clone); <template id="activity-template">
 <div>
 <img class="icon" src="" width="40" height="40">
 <div class="time"></div>
 <div class="content"></div>
 </div>
 </template> var template = document.querySelector('#activity-template'); var clone = document.importNode(template.content, true); use content property
  25. 25. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 <template> <template id="activity-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>
  26. 26. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 <template> <template id="activity-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
  27. 27. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 <template> 22+ 26+ and Android 4.4+ 7.1+ 15+
  28. 28. Shadow Dom
  29. 29. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 Shadow Dom Web Component
  30. 30. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 Shadow Dom ".content"".content"
  31. 31. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 Shadow Dom ".content"".content" document.querySelector(".content")
  32. 32. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 Shadow Dom ".content"".content" document.querySelector(".content")
  33. 33. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 Shadow Dom ".content"".content" .content { color: blue; } document.querySelector(".content")
  34. 34. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 Shadow Dom ".content"".content" .content { color: blue; } document.querySelector(".content")
  35. 35. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 Shadow Dom
  36. 36. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 Shadow Dom
  37. 37. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 Shadow Dom Host Root
  38. 38. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 Shadow Dom visible to
 the user
  39. 39. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 Shadow Dom visible to
 the user used during rendering
  40. 40. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 Shadow Dom
  41. 41. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 Shadow Dom
  42. 42. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 Shadow Dom document.querySelector(".content") .content { color: blue; } ".content" ".content"
  43. 43. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 Shadow Dom document.querySelector(".content") .content { color: blue; } ".content" ".content"
  44. 44. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 Shadow Dom Host
  45. 45. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 Shadow Dom var root = host.createShadowRoot(); Host
  46. 46. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 Shadow Dom var root = host.createShadowRoot(); Host Root
  47. 47. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 Shadow Dom var root = host.createShadowRoot(); Host Root root.appendChild(child1); root.appendChild(child2);
  48. 48. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 Shadow Dom var root = host.createShadowRoot(); Host Root root.appendChild(child1); root.appendChild(child2);
  49. 49. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 Shadow Dom Host
  50. 50. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 Shadow Domvar root = host.createShadowRoot(); Host
  51. 51. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 Shadow Domvar root = host.createShadowRoot(); Host Root
  52. 52. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 Shadow Domvar root = host.createShadowRoot(); Host Root var clone = document.importNode( template.content, true);
  53. 53. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 Shadow Domvar root = host.createShadowRoot(); Host Root var clone = document.importNode( template.content, true); Clone
  54. 54. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 Shadow Domvar root = host.createShadowRoot(); Host Root var clone = document.importNode( template.content, true); root.appendChild(clone); Clone
  55. 55. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 Shadow Domvar root = host.createShadowRoot(); Host Root var clone = document.importNode( template.content, true); root.appendChild(clone); Clone
  56. 56. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 Shadow Dom 25+ and Android 4.4+ 15+
  57. 57. Custom Elements
  58. 58. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 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?
  59. 59. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 Custom Elements <div class="activity"> <a>Michael</a> had fun coding. </div>
  60. 60. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 Custom Elements <activity-card iconSrc="img/michael.jpg" time="Seconds ago"> <a>Michael</a> had fun coding. </activity-card> <div class="activity"> <a>Michael</a> had fun coding. </div>
  61. 61. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 Custom Elements var activityCardPrototype = Object.create(HTMLElement.prototype);
  62. 62. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 Custom Elements var activityCardPrototype = Object.create(HTMLElement.prototype); Rough translation to Java class ActivityCard extends HTMLElement {}; Class<ActivityCard> activityCardClass = ActivityCard.class;
  63. 63. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 Custom Elements var activityCardPrototype = Object.create(HTMLElement.prototype); Rough translation to Java class ActivityCard extends HTMLElement {}; Class<ActivityCard> activityCardClass = ActivityCard.class; var options = {prototype: activityPrototype}
  64. 64. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 Custom Elements var activityCardPrototype = Object.create(HTMLElement.prototype); Rough translation to Java class ActivityCard extends HTMLElement {}; Class<ActivityCard> activityCardClass = ActivityCard.class; ElementRegistrationOptions options = 
 new ElementRegistrationOptions(activityCardClass); var options = {prototype: activityPrototype}
  65. 65. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 Custom Elements document.registerElement("activity-card", options); var activityCardPrototype = Object.create(HTMLElement.prototype); Rough translation to Java class ActivityCard extends HTMLElement {}; Class<ActivityCard> activityCardClass = ActivityCard.class; ElementRegistrationOptions options = 
 new ElementRegistrationOptions(activityCardClass); var options = {prototype: activityPrototype}
  66. 66. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 Custom Elements document.registerElement("activity-card", options); var activityCardPrototype = Object.create(HTMLElement.prototype); document.registerElement("activity-card", options); Rough translation to Java class ActivityCard extends HTMLElement {}; Class<ActivityCard> activityCardClass = ActivityCard.class; ElementRegistrationOptions options = 
 new ElementRegistrationOptions(activityCardClass); var options = {prototype: activityPrototype}
  67. 67. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 Custom Elements document.registerElement("activity-card", options); var activityCardPrototype = Object.create(HTMLElement.prototype); var options = {prototype: activityPrototype}
  68. 68. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 Custom Elements document.registerElement("activity-card", options); var activityCardPrototype = Object.create(HTMLElement.prototype); var options = {prototype: activityPrototype} <activity-card iconSrc="img/michael.jpg" time="Seconds ago"> <a>Michael</a> had fun coding. </activity-card>
  69. 69. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 Custom Elements create attach detach change createdCallback attachedCallback detachedCallback attributeChangedCallback
 (attrName, oldVal, newVal)
  70. 70. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 Custom Elements
  71. 71. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 Custom Elementsvar activityPrototype = Object.create(HTMLElement.prototype);
  72. 72. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 Custom Elementsvar activityPrototype = Object.create(HTMLElement.prototype); activityPrototype.createdCallback = function() {
  73. 73. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 Custom Elementsvar activityPrototype = Object.create(HTMLElement.prototype); activityPrototype.createdCallback = function() { var template = $("#activity-template");
  74. 74. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 Custom Elementsvar activityPrototype = Object.create(HTMLElement.prototype); activityPrototype.createdCallback = function() { var template = $("#activity-template"); var clone = document.importNode(template.content, true);
  75. 75. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 Custom Elementsvar activityPrototype = Object.create(HTMLElement.prototype); activityPrototype.createdCallback = function() { var template = $("#activity-template"); var clone = document.importNode(template.content, true); var host = $(this);
  76. 76. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 Custom Elementsvar activityPrototype = Object.create(HTMLElement.prototype); activityPrototype.createdCallback = function() { var template = $("#activity-template"); var clone = document.importNode(template.content, true); var host = $(this); $(".icon", clone).attr("src", host.attr("iconSrc"));
  77. 77. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 Custom Elementsvar activityPrototype = Object.create(HTMLElement.prototype); activityPrototype.createdCallback = function() { var template = $("#activity-template"); var clone = document.importNode(template.content, true); var host = $(this); $(".icon", clone).attr("src", host.attr("iconSrc")); $(".time", clone).text(host.attr("time"));
  78. 78. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 Custom Elementsvar activityPrototype = Object.create(HTMLElement.prototype); activityPrototype.createdCallback = function() { var template = $("#activity-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 shadow = this.createShadowRoot();
  79. 79. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 Custom Elementsvar activityPrototype = Object.create(HTMLElement.prototype); activityPrototype.createdCallback = function() { var template = $("#activity-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 shadow = this.createShadowRoot(); shadow.appendChild(clone); };
  80. 80. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 Custom Elementsvar activityPrototype = Object.create(HTMLElement.prototype); activityPrototype.createdCallback = function() { var template = $("#activity-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 shadow = this.createShadowRoot(); shadow.appendChild(clone); }; document.registerElement("activity-card", {prototype: activityPrototype});
  81. 81. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 Custom Elements 35+ and Android 4.4.4+ 26+
  82. 82. Html Import
  83. 83. <!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="activity">
 <img class="icon" src="" width="40" height="40">
 <div class="time"></div>
 <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>
 
 <div class="activity-stream">
 <h2>Activities</h2>
 <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>
  84. 84. <!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="activity">
 <img class="icon" src="" width="40" height="40">
 <div class="time"></div>
 <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>
 
 <div class="activity-stream">
 <h2>Activities</h2>
 <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> Component Code Application Code Application Code
  85. 85. Component Code Application Code Application Code
  86. 86. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 Html Import <!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>
 <div class="activity-stream">
 <h2>Activities</h2>
 <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> <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="activity">
 <img class="icon" src="" width="40" height="40">
 <div class="time"></div>
 <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>
  87. 87. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 Html Import <!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>
 <div class="activity-stream">
 <h2>Activities</h2>
 <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> <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="activity">
 <img class="icon" src="" width="40" height="40">
 <div class="time"></div>
 <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.html
  88. 88. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 Html Import <!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>
 <div class="activity-stream">
 <h2>Activities</h2>
 <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> <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="activity">
 <img class="icon" src="" width="40" height="40">
 <div class="time"></div>
 <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.html <link rel="import" href="activity-card.html">
  89. 89. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 Html Import 36+ and Android Browser 37 26+
  90. 90. Use Web Components today
  91. 91. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 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
  92. 92. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 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
  93. 93. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 webcomponent.js • X-Tag and Polymer depends on webcomponents-js • Both libraries provide additional features that are not part of the specification webcomponents.org
  94. 94. Polymer
  95. 95. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 Polymer • Adds sugar on top of web components • Easy to use • Extendable • Polymer is created & supported by Google
  96. 96. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 Polymer • Separated in several parts: • Polymer API • Iron Elements • Paper Elements • … www.polymer-project.org
  97. 97. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 Polymer
  98. 98. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 Iron Elements • Iron Elements are low level components • Most Paper UI components base on Iron • Icons, layouts …
  99. 99. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 Icons
  100. 100. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 Icons
  101. 101. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 Google Web Components • Google is building a lot of components (maps, youtube…) <google-chart></google-chart> <google-hangout-button></google-hangout-button>
  102. 102. Paper Elements
  103. 103. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 Polymer Paper • Complete component library based on Material Design
  104. 104. Bower
  105. 105. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 Bower • A package manager for the web • Search for dependencies and install them as packages • Created by Twitter • Open Source www.bower.io
  106. 106. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 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
  107. 107. Polymer Paper Components
  108. 108. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 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
  109. 109. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 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>
  110. 110. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 Paper CheckBox • A styled CheckBox • State can be defined as attribute <paper-checkbox></paper-checkbox> <paper-checkbox checked></paper-checkbox>
  111. 111. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 Paper Dialog • A dialog • Supports title, modality, actions, … <paper-dialog heading="Title"> <p>Some content</p> </paper-dialog>
  112. 112. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 Overview
  113. 113. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 Overview
  114. 114. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 Layout • HeaderPanel • Toolbar • DrawerPanel • Scaffold
  115. 115. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 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>
  116. 116. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 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>
  117. 117. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 DrawerPanel • Adds a responsive menu • Defines attributes to open and close the menu • Normally wraps 2 core- header-panel
  118. 118. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 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> <core-header-panel main> <core-toolbar> <paper-icon-button core-drawer-toggle icon="menu"></paper-icon-button> </core-toolbar> <div>content</div> </core-header-panel> </core-drawer-panel> drawer panel main panel show drawer
  119. 119. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 Scaffold • Basic skeleton • Best practice to create an application • Contains all the shown features <core-scaffold> <core-header-panel navigation flex> <!-- nav drawer --> </core-header-panel> <span tool>Title</span> <div>content</div> </core-scaffold> defines the drawer defines the main toolbar
  120. 120. using Paper
  121. 121. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 Paper Demo • Create a new folder • Install needed modules with Bower $ mkdir app $ cd app $ bower init $ bower install --save PolymerElements/paper-elements
  122. 122. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 Paper Demo • Create index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> </head> <body>Hello World</body> </html>
  123. 123. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 Paper Demo • add webcomponents.js • 
<head> . . . <script src=„bower_components/webcomponentsjs/webcomponents.js"> </script> </head>
  124. 124. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 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>
  125. 125. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 Paper Demo
  126. 126. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 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">
  127. 127. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 Paper Demo
  128. 128. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 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>
  129. 129. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 Paper Demo
  130. 130. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 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>
  131. 131. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 Paper Demo
  132. 132. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 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>
  133. 133. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 Paper Demo
  134. 134. www.guigarage.com
  135. 135. Custom Components
  136. 136. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 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
  137. 137. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 A First Example <link rel=„import" href="bower_components/polymer/polymer.html">
  138. 138. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 A First Example <link rel=„import" href="bower_components/polymer/polymer.html"> <dom-module id="dom-element"> </dom-module>
  139. 139. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 A First Example <link rel=„import" href="bower_components/polymer/polymer.html"> <dom-module id="dom-element"> <template> <p>I'm a DOM element. This is my local DOM!</p> </template> </dom-module>
  140. 140. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 A First Example <link rel=„import" href="bower_components/polymer/polymer.html"> <dom-module id="dom-element"> <template> <p>I'm a DOM element. This is my local DOM!</p> </template> <script> Polymer({is: "dom-element"}); </script> </dom-module>
  141. 141. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 • 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
  142. 142. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 Lifecycle • Polymer defines it’s own lifecycle that is based on the Web Component Spec lifecycle • Callbacks can simply be defined in Polymer
  143. 143. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 Difference to Spec • created instead of createdCallback • attached instead of attachedCallback • detached instead of detachedCallback • attributeChanged instead of attributeChangedCallback
  144. 144. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 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.
  145. 145. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 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>
  146. 146. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 Property • Properties can be specified for a Polymer component • A property can be of the following types: • Boolean, Date, Number, String, Array or Object
  147. 147. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 Property • Properties can be defined in JavaScript Polymer({ is: 'my-component', properties: { user: String, isHappy: Boolean } });
  148. 148. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 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>
  149. 149. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 Property • Default value can be specified properties: { user: { type: String, value: ‘unknown‘ }, isHappy: Boolean }
  150. 150. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 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>
  151. 151. Ok, let’s create an application
  152. 152. Mockup
  153. 153. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0
  154. 154. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0
  155. 155. Basic Layout
  156. 156. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 Application Basic Layout • Header with fixed size
 • Resizeable main area
 • Footer with fixed size
  157. 157. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 Polymer Layout • The Polymer layout is based on flexbox • Use Polymer layout classes to simplify the usage of flexbox
  158. 158. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 Flexbox • New CSS 3 layout • Flexbox consists of flex containers and flex items. box box box container
  159. 159. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 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 • …
  160. 160. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 Flexbox box box box container flex-direction: row; box box box container flex-direction:column;
  161. 161. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 Flexbox box box box container flex: 0; flex: 0;flex: 1;
  162. 162. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 Application Basic Layout fix height fix height dynamic height flexbox
  163. 163. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 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
  164. 164. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 Polymer Layout Alpha Beta Gamma <div class="horizontal layout"> <div>Alpha</div> <div class="flex">Beta (flex)</div> <div>Gamma</div> </div>
  165. 165. Application Structure
  166. 166. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 Application Structure • A Polymer application is based on web components • The components define a hierarchy • chat-view component contains several chat-bubble components
  167. 167. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 Application Structure
  168. 168. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 Application Structure Yeah! message-view
  169. 169. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 chat-bubble Application Structure Yeah! message-view
  170. 170. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 chat-view chat-bubble Application Structure Yeah! message-view
  171. 171. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 app-view chat-view chat-bubble Application Structure Yeah! message-view
  172. 172. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 Like building futuristic Matrjoschkas with Lego
  173. 173. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 Application Structure • The demo will use bower to handle all dependencies • Real applications should use a build script • like Gulp or Grunt
  174. 174. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 index.html • add web components polyfill script • Import basic dependencies like Roboto- Font and Polymer layouts • body contains only one web component: the application
  175. 175. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 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">

  176. 176. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 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
  177. 177. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 component-xy.html • Contains the definition of one web component • All components that are needed internally should be imported
  178. 178. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 Workspace bower.json index.html chat-bubble.html chat-view.html chat-header.html chat-footer.html chat-app.html
  179. 179. Chat Bubble
  180. 180. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 Chat Bubble Sender This is the chat message. The size of the bubble should fit to this message. Next to normal text emojis can be part of a message: 😊 5 min ago
  181. 181. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 Chat Bubble Sender This is the chat message. The size of the bubble should fit to this message. Next to normal text emojis can be part of a message: 😊 5 min ago depends on parent width dependsontextlength
  182. 182. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 Chat Bubble Sender This is the chat message. The size of the bubble should fit to this message. Next to normal text emojis can be part of a message: 😊 5 min ago dependsontext length fix fix
  183. 183. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 Chat Bubble Sender This is the chat message. The size of the bubble should fit to this message. Next to normal text emojis can be part of a message: 😊 5 min ago fix
  184. 184. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 Chat Bubble
  185. 185. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 Chat Bubble <div id="bubble"><div> #bubble {
 background-color: #F2F2F2;
 border-radius: 5px;
 }
  186. 186. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 Chat Bubble Sender This is the chat message. The size of the bubble should fit to this message. Next to normal text emojis can be part of a message: 😊 5 min ago
  187. 187. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 Chat Bubble <div id="bubble"><div> #bubble {
 background-color: #F2F2F2;
 border-radius: 5px; padding: 2px 12px 2px 12px; }
  188. 188. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 Chat Bubble
  189. 189. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 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.
  190. 190. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 Chat Bubble #bubble::after {
 background-color: #F2F2F2;
 display: block;
 position: absolute;
 content: "00a0";
 height: 16px;
 width: 20px;
 bottom: 11px;
 transform: rotate(29deg) skew(-35deg);
 }
  191. 191. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 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>
  192. 192. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 Chat Bubble Attributes • Sender & message should be dynamic • Can be defined as attributes of the component • Use Polymer properties properties: {
 text: String,
 sender: String
 }
  193. 193. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 Problem
  194. 194. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 configure Bubble with CSS #bubble {
 . . .
 } • We can specify 2 separate CSS classes: me and you .me { . . . } .you { . . . }
  195. 195. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 • 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
  196. 196. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 • 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);
 }
  197. 197. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 • 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
  198. 198. Chat View
  199. 199. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 Chat View • Should contain a list of chat bubbles • Scrollable • based on data array (JSON)
  200. 200. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 Polymer Iron • List of low level components • Define behavior • Don’t define theme / skin
  201. 201. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0
  202. 202. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 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
  203. 203. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 iron-list <iron-list items="[[data]]" as="item">
 <template>
 <chat-bubble text=„[[item.message]]" …></chat-bubble>
 </template>
 </iron-list>
  204. 204. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 provide dummy data <iron-ajax url="data.json" last-response="{{messages}}" auto></iron-ajax>
 • Polymer provides Iron Element to load JSON data
  205. 205. Application Header
  206. 206. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 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
  207. 207. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 Rounded Image • Avatar image should be rounded .avatar {
 width: 64px;
 height: 64px;
 border-radius: 32px;
 border-style: solid;
 border-width: 1px;
 border-color: lightgrey;
 }
  208. 208. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 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>
  209. 209. Application Footer
  210. 210. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 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}}">
  211. 211. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 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) {…}
 });
  212. 212. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 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');
  213. 213. Emoji Support
  214. 214. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 About Emojis • All emojis are defined by a a unicode character
  215. 215. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 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
  216. 216. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 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
  217. 217. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 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];
 }
 }
  218. 218. Adding a server
  219. 219. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 Dolphin Platform • Enterprise Framework with Presentation Model pattern • Server centric logic • Spring and JavaEE integration
  220. 220. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 Dolphin Platform • JavaFX, AngularJS & Google Polymer client APIs
 
 
 
 
 … More will come
  221. 221. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 Dolphin Platform
  222. 222. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 Model • Defined in Java • Hierarchical models are no problem • Full observable • Collection support
  223. 223. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 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
  224. 224. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 Controller • Controller is defined on the server • Will be managed by the container (Spring, JavaEE, …) • Full CDI support
  225. 225. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 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
  226. 226. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 View • The smallest part ;) • Use the complete UI Toolkit power • Simply bind your view to the model • Trigger controller actions
  227. 227. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 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
  228. 228. Chat App
  229. 229. PolymerWeb Components & by Sending a message Client Server
  230. 230. PolymerWeb Components & by Sending a message Client Server call DolphinAction
  231. 231. PolymerWeb Components & by Sending a message Client Server Event Bus call DolphinAction
  232. 232. PolymerWeb Components & by Sending a message Client Server Event Bus call DolphinAction publish
  233. 233. PolymerWeb Components & by Sending a message Client Server Event Bus call DolphinAction publish
  234. 234. PolymerWeb Components & by Sending a message Client Server Event Bus call DolphinAction publish notify
  235. 235. PolymerWeb Components & by Sending a message Client Presentation Model Server Event Bus call DolphinAction publish notify
  236. 236. PolymerWeb Components & by Sending a message Client Presentation Model Server Event Bus call DolphinAction publish notifyupdate
  237. 237. PolymerWeb Components & by Sending a message Client Presentation Model Server Event Bus call DolphinAction publish notifyupdate
  238. 238. PolymerWeb Components & by Sending a message Client Presentation Model Server Event Bus call DolphinAction publish notifyupdate synced automatically
  239. 239. PolymerWeb Components & by client code diff
  240. 240. Additional Topics
  241. 241. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 Additional Topics • Behaviors • Animations • Custom CSS properties • DOM manipulation
  242. 242. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 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/
  243. 243. Real World Applications
  244. 244. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 Real World • Todo
  245. 245. Polymer Starter Kit
  246. 246. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 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
  247. 247. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 Polymer Starter Kit • Minification ( js, css, images) • Inlining of HTML Imports • Cache Config for Offline Usage • Local Server (with browser-sync) • Testing
  248. 248. Web Component Tester
  249. 249. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 Web Component Tester npm install -g web-component-tester wct Installation Usage
  250. 250. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 Web Component Tester • 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)
  251. 251. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 Web Component Tester <head>
 <meta charset="utf-8">
 <script src="../bower_components/webcomponentsjs/webcomponents.min.js"> </script>
 <script src="/web-component-tester/browser.js"></script>
 <link rel="import" href="../chat-bubble.html">
 </head>
  252. 252. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 Web Component Tester <head>
 <meta charset="utf-8">
 <script src="../bower_components/webcomponentsjs/webcomponents.min.js"> </script>
 <script src="/web-component-tester/browser.js"></script>
 <link rel="import" href="../chat-bubble.html">
 </head> web component polyfill
  253. 253. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 Web Component Tester <head>
 <meta charset="utf-8">
 <script src="../bower_components/webcomponentsjs/webcomponents.min.js"> </script>
 <script src="/web-component-tester/browser.js"></script>
 <link rel="import" href="../chat-bubble.html">
 </head>
  254. 254. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 Web Component Tester <head>
 <meta charset="utf-8">
 <script src="../bower_components/webcomponentsjs/webcomponents.min.js"> </script>
 <script src="/web-component-tester/browser.js"></script>
 <link rel="import" href="../chat-bubble.html">
 </head> provided by wct
  255. 255. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 Web Component Tester <head>
 <meta charset="utf-8">
 <script src="../bower_components/webcomponentsjs/webcomponents.min.js"> </script>
 <script src="/web-component-tester/browser.js"></script>
 <link rel="import" href="../chat-bubble.html">
 </head>
  256. 256. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 Web Component Tester <head>
 <meta charset="utf-8">
 <script src="../bower_components/webcomponentsjs/webcomponents.min.js"> </script>
 <script src="/web-component-tester/browser.js"></script>
 <link rel="import" href="../chat-bubble.html">
 </head> component under test
  257. 257. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 Web Component Tester <body> <test-fixture id="chatBubbleFixture">
 <template>
 <chat-bubble></chat-bubble>
 </template>
 </test-fixture> ...
  258. 258. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 Web Component Tester <body> <test-fixture id="chatBubbleFixture">
 <template>
 <chat-bubble></chat-bubble>
 </template>
 </test-fixture> ... provided by wct
  259. 259. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 Web Component Tester <body> <test-fixture id="chatBubbleFixture">
 <template>
 <chat-bubble></chat-bubble>
 </template>
 </test-fixture> ...
  260. 260. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 Web Component Tester <body> <test-fixture id="chatBubbleFixture">
 <template>
 <chat-bubble></chat-bubble>
 </template>
 </test-fixture> ... web component under test
  261. 261. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 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>
  262. 262. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 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> create component
  263. 263. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 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>
  264. 264. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 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> set property
  265. 265. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 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>
  266. 266. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 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> needs to be asynchronous
  267. 267. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 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>
  268. 268. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 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> DOM-query
  269. 269. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 Web Component Tester module.exports = {
 plugins: {
 sauce: {
 browsers: [
 {
 platform: 'Windows 8.1',
 browserName: 'internet explorer',
 version: '11.0'
 }
 ]
 }
 }
 };
  270. 270. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 Web Component Tester module.exports = {
 plugins: {
 sauce: {
 browsers: [
 {
 platform: 'Windows 8.1',
 browserName: 'internet explorer',
 version: '11.0'
 }
 ]
 }
 }
 }; environment configuration
  271. 271. Create reusable components
  272. 272. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 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
  273. 273. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0
  274. 274. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 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
  275. 275. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 seed-element • Blueprint for custom component • Defines demo, test, and main section • Web component tester and polyserve integrated
  276. 276. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 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/
  277. 277. PolymerWeb Components & by Questions: https://goo.gl/iZI3l0 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
  278. 278. Questions?

×