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 canoo
Webcomponents
canoo Engineering AG
2015
Web Components canoo
About us
<speaker name=„Michael Heinrichs“
company=„Canoo Engineering AG“
web=„blog.netopyr.com“
twit...
Content
• The web component specification
• Web component polyfills
• Polymer
• Perspectives
Web Components canoo
Revolution of the web
Web Components canoo
HTML Ajax JS HTML5 mobile Angular ?
Bower
• A package manager for the web
• Search for dependencies and install them as packages
• Created by Twitter
• Open S...
Bower
requires npm, node.js and git
Web Components canoo
$ npm install -g bower
$ bower init
$ bower install --save webcom...
<li class="yt-shelf-grid-item yt-uix-shelfslider-item">

<div class="yt-lockup yt-lockup-grid yt-lockup-video vve-check cl...
Web Components canoo
<li class=" yt-uix-shelfslider-item">

<div class="yt-lockup yt-lockup-grid yt-lockup-video vve-check clearfix" data-conte...
<shelf
title="Popular on YouTube - Switzerland"
subscribers=“128,657">
<shelf-grid-item
title="iPhone 6 Plus Bend Test"
ur...
Web Components canoo
Web Components
C
ustom


E
lem
ents
H
TM
L


Im
ports
S
hadow

D
O
M
E
lem
ent

Tem
plate

Web Components canoo
Web Components
C
ustom
E
lem
ents
H
TM
L
Im
ports
S
hadow
D
O
M
E
lem
ent

Tem
plate

Web Components canoo
<div class="activity-stream">

<h2>Activities</h2>

<div class="activity">

<img class="icon" src="img/michael.jpeg" width...
<template>
Web Components canoo
<div class="activity-stream">

<h2>Activities</h2>



<div class="activity">

<img class="icon" src="img/hendrick.jpeg" wi...
<div>

<img class="icon" src="" width="40" height="40">

<div class="time"></div>

<div class="content"></div>

</div>
<te...
document.body.appendChild(clone);
Web Components canoo
<template id="activity-template">

<div>

<img class="icon" src="" ...
Web Components canoo
<template id="activity-template">

<div>

<img class="icon" ng-src="{{item.iconSrc}}" width="40" heig...
Web Components canoo
22+ 26+ and
Android 4.4+
7.1+ 15+
Web Components canoo
Web Components
C
ustom
E
lem
ents
H
TM
L
Im
ports
S
hadow
D
O
M
E
lem
ent

Tem
plate

Web Components canoo
Web Components
C
ustom
E
lem
ents
H
TM
L
Im
ports
S
hadow

D
O
M
E
lem
ent
Tem
plate
Web Components canoo
Web Component
Web Components canoo
".content"".content"
.content {
color: blue;
}
document.querySelector(".content")
Web Components canoo
".content"".content"
.content {
color: blue;
}
document.querySelector(".content")
Shadow DOM
Web Components canoo
Web Components canoo
Host
Root
Web Components canoo
visible to

the user
used during
rendering
document.querySelector(".content")
Web Components canoo
.content {
color: blue;
}
".content" ".content
var root = host.createShadowRoot();
Web Components canoo
Host
Root
root.appendChild(child1);
root.appendChild(child2);
var root = host.createShadowRoot();
Web Components canoo
Host
Root
var clone = document.importNode(
template.content, true...
Web Components canoo
25+ and
Android 4.4+
15+
Web Components canoo
Web Components
C
ustom
E
lem
ents
H
TM
L
Im
ports
S
hadow

D
O
M
E
lem
ent
Tem
plate
Web Components canoo
Web Components
C
ustom


E
lem
ents
H
TM
L
Im
ports
S
hadow
D
O
M
E
lem
ent
Tem
plate
Web Components canoo
<div class="activity">
<a>Michael</a> had fun coding.
</div>
How do we store the icon source and time...
Web Components canoo
<activity-card iconSrc="img/michael.jpg" time="Seconds ago">
<a>Michael</a> had fun coding.
</activit...
Custom Elements
Web Components canoo
document.registerElement("activity-card", options);
Web Components canoo
var activityCardPrototype = Object.create(HTMLEle...
document.registerElement("activity-card", options);
Web Components canoo
var activityCardPrototype = Object.create(HTMLEle...
Web Components canoo
create attach detach
change
createdCallback
attachedCallback
detachedCallback
attributeChangedCallbac...
Web Components canoo
var activityPrototype = Object.create(HTMLElement.prototype);
activityPrototype.createdCallback = fun...
Web Components canoo
35+ and
Android 4.4.4+
26+
Web Components canoo
Web Components
C
ustom


E
lem
ents
H
TM
L
Im
ports
S
hadow
D
O
M
E
lem
ent
Tem
plate
Web Components canoo
Web Components
C
ustom
E
lem
ents
H
TM
L


Im
ports
S
hadow
D
O
M
E
lem
ent
Tem
plate
<!DOCTYPE html>

<html>

<head lang="en">

<meta charset="UTF-8">

<title>Activity Stream - Standard Web Component</title>...
HTML Imports
Web Components canoo
<!DOCTYPE html>

<html>

<head lang="en">

<meta charset="UTF-8">

<title>Activity Stream - Standard Web Component</title>...
Web Components canoo
36+ and
Android Browser
37
26+
Web Components canoo
Web Components
C
ustom
E
lem
ents
H
TM
L


Im
ports
S
hadow
D
O
M
E
lem
ent
Tem
plate
Web Components canoo
Web Components
C
ustom


E
lem
ents
H
TM
L


Im
ports
S
hadow

D
O
M
E
lem
ent

Tem
plate

webcomponent.js
Web Components canoo
• Today not all browsers support the new standards
• The community provides a pollyfil...
webcomponent.js
Web Components canoo
• The polyfills are the junction of X-Tag and Polymer
basic libraries
• Mozilla create...
webcomponent.js
Web Components canoo
• X-Tag and Polymer depends on webcomponents-js
• Both libraries provide additional f...
Polymer
Web Components canoo
• Polymer is created & supported by Google
• Current version depends on webcomponents.js (sin...
ShadowDOM
PointerEvents
Mutation
Observers
Custom
Elements
HTMLImports
Template
Binding
Node.bind()
WebAnimator
webcompone...
Data Bindings
Web Components canoo
• two-way data binding is one of the additional features
of Polymer
<template repeat="{...
X-Tag
Web Components canoo
<X>
• X-Tag is created & supported by Mozilla
• Future version will depend on webcomponents.js
...
X-Tag
Web Components canoo
<X>
• X-Tag is supported by most modern browsers
5+ 4+ and
Android 2.1+
4+ 9+ 11+
X-Tag
Web Components canoo
<X>
ShadowDOM
PointerEvents
Mutation
Observers
Custom
Elements
HTMLImports
Template
Binding
Nod...
The next steps
• Web Components can be reused
• Web Components can be styled
• A logical consequence is to provide toolkit...
Google Web Components
Web Components canoo
<google-chart></google-chart>
<google-hangout-button></google-hangout-button>
•...
Twitter Boostrap
• provides predefined CSS rules
• Can be used for layout
• Provides its own style
• Provides an icon set
W...
Google Polymer Paper
• provides custom web components
• provides layouts
• provides icon sets
Web Components canoo
Boostrap
• Polymer is only released as developer preview
• Boostrap is final (Version 3.x)
• Polymer is based on modern web...
Why does Google provide it?
• Polymer is the web part of „Material Design“
• Provide the same user experience on any devic...
Important features
• Responsive Design
• Customizable - Create your cooperative design
• Easy to use
• Extendable
Web Comp...
• Layout containers
• Components
• Animations
• Icons
Polymer Paper
Web Components canoo
• All components (layouts, controls, icons) are build as
web components
• A single component or a set can be added by usin...
• The default Button
• shows ripple animation on click
Paper Button
Web Components canoo
<paper-button>flat button</paper-...
• A styled CheckBox
• State can be defined as attribute
Paper CheckBox
Web Components canoo
<paper-checkbox></paper-checkbo...
• A dialog
• Supports title, modality, actions, …
Paper Dialog
Web Components canoo
<paper-dialog heading="Title">
<p>Some...
Overview
Web Components canoo
Overview
Web Components canoo
Icons
Web Components canoo
Icons
Web Components canoo
• HeaderPanel
• Toolbar
• DrawerPanel
• Scaffold
Layout
Web Components canoo
• An application toolbar
• Toolbar content will be aligned
Toolbar
Web Components
<core-toolbar>
<paper-icon-button icon="...
• Declarative layout system
• use CSS Flexbox internally
• Layout params are defined as HTML attributes
Polymer layout attr...
• Wrapper around toolbar and
content
• Toolbar always on top
• Content scrollable
HeaderPanel
Web Components canoo
<core-h...
• Adds a responsive
menu
• Defines attributes to
open and close the
menu
• Normally wraps 2
core-header-panel
DrawerPanel
W...
DrawerPanel
Web Components canoo
<core-drawer-panel>
<core-header-panel drawer>
<core-toolbar></core-toolbar>
<core-menu>
...
• Basic skeleton
• Best practice to create
an application
• Contains all the shown
features
Scaffold
Web Components
<core-...
• Create a new folder
• Install needed modules with Bower
Polymer demo
Web Components
$ mkdir app
$ cd app
$ bower init
$ ...
• Create index.html
Polymer demo
Web Components
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<bo...
• add webcomponents.js
Polymer demo
Web Components
<head>
. . .
<script src=„bower_components/webcomponentsjs/webcomponent...
• add the default font
Polymer demo
Web Components
<head>
<link rel="import" href=„bower_components/font-roboto/
roboto.ht...
Polymer demo
Web Components canoo
• add a header panel with a toolbar
Polymer demo
Web Components
<body fullbleed layout vertical>
<core-header-panel flex>
...
Polymer demo
Web Components canoo
• Define a toolbar color
Polymer demo
Web Components
<style>
core-toolbar {
background-color: orange;
}
</style>
• Add some...
Polymer demo
Web Components canoo
• Add some content to the toolbar
Polymer demo
Web Components
<link rel="import"
href="bower_components/paper-icon-button/...
Polymer demo
Web Components canoo
• Add paper elements as content
Polymer demo
Web Components
<link rel="import"
href=„bower_components/paper-input/paper-in...
Polymer demo
Web Components canoo
• Add some padding
Polymer demo
Web Components
.content {
padding: 20px;
}
<div class=„content" layout vertical>
<paper-in...
Polymer demo
Web Components canoo
• The Polymer team offers a WYSIWYG designer for Polymer
• Good to have a look at all components and play with the
layout
...
Polymer Designer
Web Components canoo
Web Components canoo
Additional resources
Web Components canoo
• http://webcomponents.org
• http://component.kitchen
• http://customelements.io...
Web Components canoo
<questions></questions>
webcomponents (Jfokus 2015)
webcomponents (Jfokus 2015)
webcomponents (Jfokus 2015)
webcomponents (Jfokus 2015)
webcomponents (Jfokus 2015)
webcomponents (Jfokus 2015)
webcomponents (Jfokus 2015)
webcomponents (Jfokus 2015)
webcomponents (Jfokus 2015)
Nächste SlideShare
Wird geladen in …5
×

webcomponents (Jfokus 2015)

2.247 Aufrufe

Veröffentlicht am

An introduction to web components and polymer

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

webcomponents (Jfokus 2015)

  1. 1. Web Components canoo Webcomponents canoo Engineering AG 2015
  2. 2. Web Components canoo About us <speaker name=„Michael Heinrichs“ company=„Canoo Engineering AG“ web=„blog.netopyr.com“ twitter=„@net0pyr“ description=„UI Magician, Active writer and speaker“> </speaker> <speaker name=„Hendrik Ebbers“ company=„Canoo Engineering AG“ web=„www.guigarage.com“ twitter=„@hendrikEbbers“ description=„JUG lead, blogger, book author, JSR EC Member“> </speaker>
  3. 3. Content • The web component specification • Web component polyfills • Polymer • Perspectives Web Components canoo
  4. 4. Revolution of the web Web Components canoo HTML Ajax JS HTML5 mobile Angular ?
  5. 5. Bower • A package manager for the web • Search for dependencies and install them as packages • Created by Twitter • Open Source Web Components canoo www.bower.io
  6. 6. Bower requires npm, node.js and git Web Components canoo $ npm install -g bower $ bower init $ bower install --save webcomponentsjs in your project folder download & add module add dependency to bower file
  7. 7. <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 Components canoo Web Applications Today
  8. 8. Web Components canoo
  9. 9. <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
  10. 10. <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 Components canoo Web Applications Tomorrow
  11. 11. Web Components canoo Web Components C ustom 
 E lem ents H TM L 
 Im ports S hadow
 D O M E lem ent
 Tem plate

  12. 12. Web Components canoo Web Components C ustom E lem ents H TM L Im ports S hadow D O M E lem ent
 Tem plate

  13. 13. Web Components canoo
  14. 14. <div class="activity-stream">
 <h2>Activities</h2>
 <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>
 <div class="activity">
 <img class="icon" src="img/hendrick.jpeg" width="40" height="40">
 <div class="time">Minutes ago</div>
 <div class="content"><a>Hendrick</a> blogged on GuiGarage.</div>
 </div> 
 … </div>
 Web Components canoo
  15. 15. <template> Web Components canoo
  16. 16. <div class="activity-stream">
 <h2>Activities</h2>
 
 <div class="activity">
 <img class="icon" src="img/hendrick.jpeg" width="40" height="40">
 <div class="time">Minutes ago</div>
 <div class="content"><a>Hendrick</a> did this again.</div>
 </div> 
 … </div> Web Components canoo 
 <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. <div>
 <img class="icon" src="" width="40" height="40">
 <div class="time"></div>
 <div class="content"></div>
 </div> <template id="activity-template">
 </template> Web Components canoo <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>
  18. 18. document.body.appendChild(clone); Web Components canoo <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'); use content property var clone = document.importNode(template.content, true);
  19. 19. Web Components canoo <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
  20. 20. Web Components canoo 22+ 26+ and Android 4.4+ 7.1+ 15+
  21. 21. Web Components canoo Web Components C ustom E lem ents H TM L Im ports S hadow D O M E lem ent
 Tem plate

  22. 22. Web Components canoo Web Components C ustom E lem ents H TM L Im ports S hadow
 D O M E lem ent Tem plate
  23. 23. Web Components canoo Web Component
  24. 24. Web Components canoo ".content"".content" .content { color: blue; } document.querySelector(".content")
  25. 25. Web Components canoo ".content"".content" .content { color: blue; } document.querySelector(".content")
  26. 26. Shadow DOM Web Components canoo
  27. 27. Web Components canoo Host Root
  28. 28. Web Components canoo visible to
 the user used during rendering
  29. 29. document.querySelector(".content") Web Components canoo .content { color: blue; } ".content" ".content
  30. 30. var root = host.createShadowRoot(); Web Components canoo Host Root root.appendChild(child1); root.appendChild(child2);
  31. 31. var root = host.createShadowRoot(); Web Components canoo Host Root var clone = document.importNode( template.content, true); root.appendChild(clone); Clone
  32. 32. Web Components canoo 25+ and Android 4.4+ 15+
  33. 33. Web Components canoo Web Components C ustom E lem ents H TM L Im ports S hadow
 D O M E lem ent Tem plate
  34. 34. Web Components canoo Web Components C ustom 
 E lem ents H TM L Im ports S hadow D O M E lem ent Tem plate
  35. 35. Web Components canoo <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?
  36. 36. Web Components canoo <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>
  37. 37. Custom Elements Web Components canoo
  38. 38. document.registerElement("activity-card", options); Web Components canoo 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}
  39. 39. document.registerElement("activity-card", options); Web Components canoo 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>
  40. 40. Web Components canoo create attach detach change createdCallback attachedCallback detachedCallback attributeChangedCallback
 (attrName, oldVal, newVal)
  41. 41. Web Components canoo var 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});
  42. 42. Web Components canoo 35+ and Android 4.4.4+ 26+
  43. 43. Web Components canoo Web Components C ustom 
 E lem ents H TM L Im ports S hadow D O M E lem ent Tem plate
  44. 44. Web Components canoo Web Components C ustom E lem ents H TM L 
 Im ports S hadow D O M E lem ent Tem plate
  45. 45. <!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> Web Components canoo Component Code Application Code Application Code
  46. 46. HTML Imports Web Components canoo
  47. 47. <!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> Web Components canoo <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">
  48. 48. Web Components canoo 36+ and Android Browser 37 26+
  49. 49. Web Components canoo Web Components C ustom E lem ents H TM L 
 Im ports S hadow D O M E lem ent Tem plate
  50. 50. Web Components canoo Web Components C ustom 
 E lem ents H TM L 
 Im ports S hadow
 D O M E lem ent
 Tem plate

  51. 51. webcomponent.js Web Components canoo • 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
  52. 52. webcomponent.js Web Components canoo • 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
  53. 53. webcomponent.js Web Components canoo • X-Tag and Polymer depends on webcomponents-js • Both libraries provide additional features that are not part of the specification webcomponents.org
  54. 54. Polymer Web Components canoo • Polymer is created & supported by Google • Current version depends on webcomponents.js (since 0.5.1) • Adds some API sugar on top of webcomponents.js www.polymer-project.org
  55. 55. ShadowDOM PointerEvents Mutation Observers Custom Elements HTMLImports Template Binding Node.bind() WebAnimator webcomponents.js polymer.js Polymer Elements Polymer UI Elements Polymer Stack Web Components canoo similar to an UI Toolkit basicforweb components some additional useful features
  56. 56. Data Bindings Web Components canoo • two-way data binding is one of the additional features of Polymer <template repeat="{{s in salutations}}"> <li>{{s.what}}: <input type="text" value="{{s.who}}"></li> </template> this.salutations = [ {what: 'Hello', who: 'World'}, {what: 'Goodbye', who: 'DOM APIs’} ];
  57. 57. X-Tag Web Components canoo <X> • X-Tag is created & supported by Mozilla • Future version will depend on webcomponents.js (dependency added Jan 5, 2015) • Adds some API sugar on top of webcomponents.js x-tags.org
  58. 58. X-Tag Web Components canoo <X> • X-Tag is supported by most modern browsers 5+ 4+ and Android 2.1+ 4+ 9+ 11+
  59. 59. X-Tag Web Components canoo <X> ShadowDOM PointerEvents Mutation Observers Custom Elements HTMLImports Template Binding Node.bind() WebAnimator webcomponents.js X-Tag core library basicforweb components some additional useful features
  60. 60. The next steps • Web Components can be reused • Web Components can be styled • A logical consequence is to provide toolkits Web Components canoo
  61. 61. Google Web Components Web Components canoo <google-chart></google-chart> <google-hangout-button></google-hangout-button> • Google is build a lot of components (maps, youtube…) http://googlewebcomponents.github.io
  62. 62. Twitter Boostrap • provides predefined CSS rules • Can be used for layout • Provides its own style • Provides an icon set Web Components canoo
  63. 63. Google Polymer Paper • provides custom web components • provides layouts • provides icon sets Web Components canoo
  64. 64. Boostrap • Polymer is only released as developer preview • Boostrap is final (Version 3.x) • Polymer is based on modern web technology • Boostrap is based on CSS (and some JavaScript) • Polymer provides custom web components • Boostrap provides CSS rules Web Components canoo Paper
  65. 65. Why does Google provide it? • Polymer is the web part of „Material Design“ • Provide the same user experience on any device • Provide the same user experience over many applications Web Components canoo „We challenged ourselves to create a visual language for our users that synthesizes the classic principles of good design with the innovation and possibility of technology and science.“
  66. 66. Important features • Responsive Design • Customizable - Create your cooperative design • Easy to use • Extendable Web Components canoo
  67. 67. • Layout containers • Components • Animations • Icons Polymer Paper Web Components canoo
  68. 68. • All components (layouts, controls, icons) are build as web components • A single component or a set can be added by using bower How to use Components Web Components canoo $ bower install --save Polymer/paper-slider <link rel="import" href="bower_components/paper-slider/paper-slider.html"> import it in HTML
  69. 69. • The default Button • shows ripple animation on click Paper Button Web Components canoo <paper-button>flat button</paper-button> <paper-button raised>raised button</paper-button> <paper-button noink>No ripple effect</paper-button>
  70. 70. • A styled CheckBox • State can be defined as attribute Paper CheckBox Web Components canoo <paper-checkbox></paper-checkbox> <paper-checkbox checked></paper-checkbox>
  71. 71. • A dialog • Supports title, modality, actions, … Paper Dialog Web Components canoo <paper-dialog heading="Title"> <p>Some content</p> </paper-dialog>
  72. 72. Overview Web Components canoo
  73. 73. Overview Web Components canoo
  74. 74. Icons Web Components canoo
  75. 75. Icons Web Components canoo
  76. 76. • HeaderPanel • Toolbar • DrawerPanel • Scaffold Layout Web Components canoo
  77. 77. • An application toolbar • Toolbar content will be aligned Toolbar Web Components <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> canoo
  78. 78. • Declarative layout system • use CSS Flexbox internally • Layout params are defined as HTML attributes Polymer layout attributes Web Components <span flex></span> canoo <body fullbleed layout vertical>Hello World</body> <div layout vertical><div>
  79. 79. • Wrapper around toolbar and content • Toolbar always on top • Content scrollable HeaderPanel Web Components canoo <core-header-panel flex> <core-toolbar>Title</core-toolbar> <div>content</div> </core-header-panel>
  80. 80. • Adds a responsive menu • Defines attributes to open and close the menu • Normally wraps 2 core-header-panel DrawerPanel Web Components canoo
  81. 81. DrawerPanel Web Components canoo <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
  82. 82. • Basic skeleton • Best practice to create an application • Contains all the shown features Scaffold Web Components <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 canoo
  83. 83. • Create a new folder • Install needed modules with Bower Polymer demo Web Components $ mkdir app $ cd app $ bower init $ bower install --save Polymer/paper-elements canoo
  84. 84. • Create index.html Polymer demo Web Components <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> </head> <body>Hello World</body> </html> canoo
  85. 85. • add webcomponents.js Polymer demo Web Components <head> . . . <script src=„bower_components/webcomponentsjs/webcomponents.js"> </script> </head> • define initial layout for body <body fullbleed layout vertical>Hello World</body> canoo
  86. 86. • add the default font Polymer demo Web Components <head> <link rel="import" href=„bower_components/font-roboto/ roboto.html"> <style> html,body { font-family: 'RobotoDraft', sans-serif; } </style> </head> canoo
  87. 87. Polymer demo Web Components canoo
  88. 88. • add a header panel with a toolbar Polymer demo Web Components <body fullbleed layout vertical> <core-header-panel flex> <core-toolbar>Title</core-toolbar> </core-header-panel> </body> <link rel="import" href="bower_components/core-header-panel/core-header-panel.html"> <link rel="import" href="bower_components/core-toolbar/core-toolbar.html"> canoo
  89. 89. Polymer demo Web Components canoo
  90. 90. • Define a toolbar color Polymer demo Web Components <style> core-toolbar { background-color: orange; } </style> • Add some content <div>content<div> canoo
  91. 91. Polymer demo Web Components canoo
  92. 92. • Add some content to the toolbar Polymer demo Web Components <link rel="import" href="bower_components/paper-icon-button/paper-icon-button.html"> <core-toolbar> <paper-icon-button icon=„menu"></paper-icon-button> <span flex>Title</span> <paper-icon-button icon=„add"></paper-icon-button> <paper-icon-button icon=„remove"></paper-icon-button> </core-toolbar> canoo
  93. 93. Polymer demo Web Components canoo
  94. 94. • Add paper elements as content Polymer demo Web Components <link rel="import" href=„bower_components/paper-input/paper-input.html"> <link rel="import" href="bower_components/paper-button/paper-button.html"> <div layout vertical> <paper-input floatingLabel label="Name"></paper-input> <paper-input floatingLabel label="Description"></paper-input> <paper-button raised>save</paper-button> </div> canoo
  95. 95. Polymer demo Web Components canoo
  96. 96. • Add some padding Polymer demo Web Components .content { padding: 20px; } <div class=„content" layout vertical> <paper-input floatingLabel label="Name"></paper-input> <paper-input floatingLabel label="Description"></paper-input> <paper-button raised>save</paper-button> </div> canoo
  97. 97. Polymer demo Web Components canoo
  98. 98. • The Polymer team offers a WYSIWYG designer for Polymer • Good to have a look at all components and play with the layout Polymer Designer Web Components canoo https://polymer-designer.appspot.com
  99. 99. Polymer Designer Web Components canoo
  100. 100. Web Components canoo
  101. 101. Additional resources Web Components canoo • http://webcomponents.org • http://component.kitchen • http://customelements.io most important entry point custom web components catalogs
  102. 102. Web Components canoo <questions></questions>

×