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 1.0
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 ?
<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...
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+
Polymer
Web Components canoo
• Polymer is created & supported by Google
• Adds some API sugar on top of webcomponents.js
•...
Polymer Stack
Web Components canoo
Polymer Version
Web Components canoo
27. März 2015 29. Mai 201512. Nov 2014
0.8 1.00.5
Data Bindings
Web Components canoo
• two-way data binding is one of the additional features
of Polymer
<dom-module id="hos...
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>
•...
Google Polymer Paper
• provides custom web components
• provides layouts
• provides icon sets
Web Components canoo
Bootstrap
• Polymer is only released as developer preview
• Bootstrap is final (Version 3.x)
• Polymer is based on modern w...
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...
Polymer Catalog
Web Components canoo
• Layout containers
• Components
• Animations
• Icons
Polymer Paper Elements
Web Components canoo
• All components (layouts, controls, icons) are build as
web components
• A single component or a set can be added by usin...
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...
• 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>
<h2>Title</h2>
<paper-d...
Overview
Web Components canoo
Overview
Web Components canoo
Icons
Web Components canoo
Icons
Web Components canoo
• HeaderPanel
• Toolbar
• DrawerPanel
Layout
Web Components canoo
• An application toolbar
• Toolbar content will be aligned
Toolbar
Web Components
<paper-toolbar>
<paper-icon-button icon=...
• Wrapper around toolbar and
content
• Toolbar always on top
• Content scrollable
HeaderPanel
Web Components canoo
<paper-...
• Adds a responsive
menu
• Defines attributes to
open and close the
menu
• Normally wraps 2
core-header-panel
DrawerPanel
W...
• You can create your own components
• API is more easy then the web components standard
Polymer Custom Elements
Web Compo...
Polymer Element
Web Components
<dom-module id="hello-world">
<template>
Hello <span>{{name}}</span>
</template>
</dom-modu...
Polymer Element
Web Components canoo
bidirectional binding
tag attributes
custom tag name
<dom-module id="hello-world">
<t...
Polymer Element
Web Components
<body>
<hello-world name="Webinale">
</hello-world>
</body>
canoo
• Boilerplate for custom elements
Polymer Custom Elements
Web Components canoo
https://www.polymer-project.org/1.0/docs/st...
Polymer Custom Elements
Web Components canoo
bower install
• seed-element.html
is the custom element
• Use it in index.htm...
Additional resources
Web Components canoo
• http://webcomponents.org
• http://component.kitchen
• http://customelements.io...
Web Components canoo
<questions></questions>
Web Components & Polymer 1.0 (Webinale Berlin)
Web Components & Polymer 1.0 (Webinale Berlin)
Web Components & Polymer 1.0 (Webinale Berlin)
Web Components & Polymer 1.0 (Webinale Berlin)
Web Components & Polymer 1.0 (Webinale Berlin)
Web Components & Polymer 1.0 (Webinale Berlin)
Web Components & Polymer 1.0 (Webinale Berlin)
Web Components & Polymer 1.0 (Webinale Berlin)
Web Components & Polymer 1.0 (Webinale Berlin)
Nächste SlideShare
Wird geladen in …5
×

Web Components & Polymer 1.0 (Webinale Berlin)

1.958 Aufrufe

Veröffentlicht am

Web Components & Polymer 1.0 (Webinale Berlin)

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

Web Components & Polymer 1.0 (Webinale Berlin)

  1. 1. Web Components & Polymer 1.0 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, JavaOne Rockstar, book author, JSR EG 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. <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
  6. 6. Web Components canoo
  7. 7. <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
  8. 8. <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
  9. 9. 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

  10. 10. 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

  11. 11. Web Components canoo
  12. 12. <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
  13. 13. <template> Web Components canoo
  14. 14. <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>
  15. 15. <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>
  16. 16. 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);
  17. 17. 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
  18. 18. Web Components canoo 22+ 26+ and Android 4.4+ 7.1+ 15+
  19. 19. 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

  20. 20. 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
  21. 21. Web Components canoo Web Component
  22. 22. Web Components canoo ".content"".content" .content { color: blue; } document.querySelector(".content")
  23. 23. Web Components canoo ".content"".content" .content { color: blue; } document.querySelector(".content")
  24. 24. Shadow DOM Web Components canoo
  25. 25. Web Components canoo Host Root
  26. 26. Web Components canoo visible to
 the user used during rendering
  27. 27. document.querySelector(".content") Web Components canoo .content { color: blue; } ".content" ".content
  28. 28. var root = host.createShadowRoot(); Web Components canoo Host Root root.appendChild(child1); root.appendChild(child2);
  29. 29. var root = host.createShadowRoot(); Web Components canoo Host Root var clone = document.importNode( template.content, true); root.appendChild(clone); Clone
  30. 30. Web Components canoo 25+ and Android 4.4+ 15+
  31. 31. 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
  32. 32. 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
  33. 33. 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?
  34. 34. 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>
  35. 35. Custom Elements Web Components canoo
  36. 36. document.registerElement("activity-card", options); Web Components canoo var activityCardPrototype = Object.create(HTMLElement.prototype); var options = {prototype: activityPrototype}
  37. 37. 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>
  38. 38. Web Components canoo create attach detach change createdCallback attachedCallback detachedCallback attributeChangedCallback
 (attrName, oldVal, newVal)
  39. 39. 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});
  40. 40. Web Components canoo 35+ and Android 4.4.4+ 26+
  41. 41. 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
  42. 42. 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
  43. 43. <!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
  44. 44. HTML Imports Web Components canoo
  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>
 <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">
  46. 46. Web Components canoo 36+ and Android Browser 37 26+
  47. 47. 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
  48. 48. 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

  49. 49. 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
  50. 50. 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
  51. 51. 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
  52. 52. 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
  53. 53. X-Tag Web Components canoo <X> • X-Tag is supported by most modern browsers 5+ 4+ and Android 2.1+ 4+ 9+ 11+
  54. 54. Polymer Web Components canoo • Polymer is created & supported by Google • Adds some API sugar on top of webcomponents.js • Provides elements for Material Design based applications www.polymer-project.org
  55. 55. Polymer Stack Web Components canoo
  56. 56. Polymer Version Web Components canoo 27. März 2015 29. Mai 201512. Nov 2014 0.8 1.00.5
  57. 57. Data Bindings Web Components canoo • two-way data binding is one of the additional features of Polymer <dom-module id="host-element"> <template> <child-element name="{{myName}}"></child-element> </template> </dom-module>
  58. 58. The next steps • Web Components can be reused • Web Components can be styled • A logical consequence is to provide toolkits Web Components canoo
  59. 59. Google Web Components Web Components canoo <google-chart></google-chart> <google-hangout-button></google-hangout-button> • Google is building a lot of components (maps, youtube…)
  60. 60. Google Polymer Paper • provides custom web components • provides layouts • provides icon sets Web Components canoo
  61. 61. Bootstrap • Polymer is only released as developer preview • Bootstrap is final (Version 3.x) • Polymer is based on modern web technology • Bootstrap is based on CSS (and some JavaScript) • Polymer provides custom web components • Bootstrap provides CSS rules Web Components canoo Paper
  62. 62. 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.“
  63. 63. Important features • Responsive Design • Customizable - Create your cooperative design • Easy to use • Extendable Web Components canoo
  64. 64. Polymer Catalog Web Components canoo
  65. 65. • Layout containers • Components • Animations • Icons Polymer Paper Elements Web Components canoo
  66. 66. • 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 PolymerElements/paper-elements <link rel="import" href="bower_components/paper-slider/paper-slider.html"> import it in HTML
  67. 67. 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
  68. 68. 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
  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> <h2>Title</h2> <paper-dialog-scrollable> Lorem ipsum... </paper-dialog-scrollable> <div class="buttons"> ... </div> </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 Layout Web Components canoo
  77. 77. • An application toolbar • Toolbar content will be aligned Toolbar Web Components <paper-toolbar> <paper-icon-button icon="menu"></paper-icon-button> <div title>Title</div> <paper-icon-button icon="more"></paper-icon-button> </paper-toolbar> canoo
  78. 78. • Wrapper around toolbar and content • Toolbar always on top • Content scrollable HeaderPanel Web Components canoo <paper-header-panel> <paper-toolbar>Header</paper-toolbar> <div>Content goes here...</div> </paper-header-panel>
  79. 79. • Adds a responsive menu • Defines attributes to open and close the menu • Normally wraps 2 core-header-panel DrawerPanel Web Components canoo
  80. 80. • You can create your own components • API is more easy then the web components standard Polymer Custom Elements Web Components canoo
  81. 81. Polymer Element Web Components <dom-module id="hello-world"> <template> Hello <span>{{name}}</span> </template> </dom-module> <script> Polymer({ is: 'hello-world', properties: { name: String } }); </script> canoo
  82. 82. Polymer Element Web Components canoo bidirectional binding tag attributes custom tag name <dom-module id="hello-world"> <template> Hello <span>{{name}}</span> </template> </dom-module> <script> Polymer({ is: 'hello-world', properties: { name: String } }); </script>
  83. 83. Polymer Element Web Components <body> <hello-world name="Webinale"> </hello-world> </body> canoo
  84. 84. • Boilerplate for custom elements Polymer Custom Elements Web Components canoo https://www.polymer-project.org/1.0/docs/start/reusableelements.html https://goo.gl/nu9Rkx
  85. 85. Polymer Custom Elements Web Components canoo bower install • seed-element.html is the custom element • Use it in index.html • Tests can be defined by using Polymer webcomponent-tester (see test folder for example)
  86. 86. Additional resources Web Components canoo • http://webcomponents.org • http://component.kitchen • http://customelements.io most important entry point custom web components catalogs
  87. 87. Web Components canoo <questions></questions>

×