webcomponents (Jfokus 2015)
-
Upload
hendrik-ebbers -
Category
Technology
-
view
404 -
download
2
Transcript of webcomponents (Jfokus 2015)
![Page 1: webcomponents (Jfokus 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032616/55a6ace41a28abe6018b48bf/html5/thumbnails/1.jpg)
Web Components canoo
Webcomponents
canoo Engineering AG 2015
![Page 2: webcomponents (Jfokus 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032616/55a6ace41a28abe6018b48bf/html5/thumbnails/2.jpg)
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>
![Page 3: webcomponents (Jfokus 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032616/55a6ace41a28abe6018b48bf/html5/thumbnails/3.jpg)
Content• The web component specification
• Web component polyfills
• Polymer
• Perspectives
Web Components canoo
![Page 4: webcomponents (Jfokus 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032616/55a6ace41a28abe6018b48bf/html5/thumbnails/4.jpg)
Revolution of the webWeb Components canoo
HTML Ajax JS HTML5 mobile Angular ?
![Page 5: webcomponents (Jfokus 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032616/55a6ace41a28abe6018b48bf/html5/thumbnails/5.jpg)
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
![Page 6: webcomponents (Jfokus 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032616/55a6ace41a28abe6018b48bf/html5/thumbnails/6.jpg)
Bowerrequires 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
![Page 7: webcomponents (Jfokus 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032616/55a6ace41a28abe6018b48bf/html5/thumbnails/7.jpg)
![Page 8: webcomponents (Jfokus 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032616/55a6ace41a28abe6018b48bf/html5/thumbnails/8.jpg)
<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
![Page 9: webcomponents (Jfokus 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032616/55a6ace41a28abe6018b48bf/html5/thumbnails/9.jpg)
Web Components canoo
![Page 10: webcomponents (Jfokus 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032616/55a6ace41a28abe6018b48bf/html5/thumbnails/10.jpg)
<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
![Page 11: webcomponents (Jfokus 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032616/55a6ace41a28abe6018b48bf/html5/thumbnails/11.jpg)
<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
![Page 12: webcomponents (Jfokus 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032616/55a6ace41a28abe6018b48bf/html5/thumbnails/12.jpg)
Web Components canoo
Web Components
Custom
Elements
HTM
L
Imports
Shadow
DOMEl
ement
Template
![Page 13: webcomponents (Jfokus 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032616/55a6ace41a28abe6018b48bf/html5/thumbnails/13.jpg)
Web Components canoo
Web Components
Custom
Elements
HTM
L
Imports
Shadow
DOMEl
ement
Template
![Page 14: webcomponents (Jfokus 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032616/55a6ace41a28abe6018b48bf/html5/thumbnails/14.jpg)
Web Components canoo
![Page 15: webcomponents (Jfokus 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032616/55a6ace41a28abe6018b48bf/html5/thumbnails/15.jpg)
<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
![Page 16: webcomponents (Jfokus 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032616/55a6ace41a28abe6018b48bf/html5/thumbnails/16.jpg)
<template>
Web Components canoo
![Page 17: webcomponents (Jfokus 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032616/55a6ace41a28abe6018b48bf/html5/thumbnails/17.jpg)
<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>
![Page 18: webcomponents (Jfokus 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032616/55a6ace41a28abe6018b48bf/html5/thumbnails/18.jpg)
<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>
![Page 19: webcomponents (Jfokus 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032616/55a6ace41a28abe6018b48bf/html5/thumbnails/19.jpg)
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);
![Page 20: webcomponents (Jfokus 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032616/55a6ace41a28abe6018b48bf/html5/thumbnails/20.jpg)
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
![Page 21: webcomponents (Jfokus 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032616/55a6ace41a28abe6018b48bf/html5/thumbnails/21.jpg)
Web Components canoo
22+ 26+ and
Android 4.4+7.1+ 15+
![Page 22: webcomponents (Jfokus 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032616/55a6ace41a28abe6018b48bf/html5/thumbnails/22.jpg)
Web Components canoo
Web Components
Custom
Elements
HTM
L
Imports
Shadow
DOMEl
ement
Template
![Page 23: webcomponents (Jfokus 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032616/55a6ace41a28abe6018b48bf/html5/thumbnails/23.jpg)
Web Components canoo
Web Components
Custom
Elements
HTM
L
Imports
Shadow
DOMEl
ement
Template
![Page 24: webcomponents (Jfokus 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032616/55a6ace41a28abe6018b48bf/html5/thumbnails/24.jpg)
Web Components canoo
Web Component
![Page 25: webcomponents (Jfokus 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032616/55a6ace41a28abe6018b48bf/html5/thumbnails/25.jpg)
Web Components canoo
".content"".content"
.content { color: blue; }
document.querySelector(".content")
![Page 26: webcomponents (Jfokus 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032616/55a6ace41a28abe6018b48bf/html5/thumbnails/26.jpg)
Web Components canoo
".content"".content"
.content { color: blue; }
document.querySelector(".content")
![Page 27: webcomponents (Jfokus 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032616/55a6ace41a28abe6018b48bf/html5/thumbnails/27.jpg)
Shadow DOM
Web Components canoo
![Page 28: webcomponents (Jfokus 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032616/55a6ace41a28abe6018b48bf/html5/thumbnails/28.jpg)
Web Components canoo
Host
Root
![Page 29: webcomponents (Jfokus 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032616/55a6ace41a28abe6018b48bf/html5/thumbnails/29.jpg)
Web Components canoo
visible to the user
used during rendering
![Page 30: webcomponents (Jfokus 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032616/55a6ace41a28abe6018b48bf/html5/thumbnails/30.jpg)
document.querySelector(".content")
Web Components canoo
.content { color: blue; }
".content" ".content
![Page 31: webcomponents (Jfokus 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032616/55a6ace41a28abe6018b48bf/html5/thumbnails/31.jpg)
var root = host.createShadowRoot();
Web Components canoo
Host
Root
root.appendChild(child1); root.appendChild(child2);
![Page 32: webcomponents (Jfokus 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032616/55a6ace41a28abe6018b48bf/html5/thumbnails/32.jpg)
var root = host.createShadowRoot();
Web Components canoo
Host
Root
var clone = document.importNode( template.content, true);root.appendChild(clone);
Clone
![Page 33: webcomponents (Jfokus 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032616/55a6ace41a28abe6018b48bf/html5/thumbnails/33.jpg)
Web Components canoo
25+ and
Android 4.4+15+
![Page 34: webcomponents (Jfokus 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032616/55a6ace41a28abe6018b48bf/html5/thumbnails/34.jpg)
Web Components canoo
Web Components
Custom
Elements
HTM
L
Imports
Shadow
DOMEl
ement
Template
![Page 35: webcomponents (Jfokus 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032616/55a6ace41a28abe6018b48bf/html5/thumbnails/35.jpg)
Web Components canoo
Web Components
Custom
Elements
HTM
L
Imports
Shadow
DOMEl
ement
Template
![Page 36: webcomponents (Jfokus 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032616/55a6ace41a28abe6018b48bf/html5/thumbnails/36.jpg)
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?
![Page 37: webcomponents (Jfokus 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032616/55a6ace41a28abe6018b48bf/html5/thumbnails/37.jpg)
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>
![Page 38: webcomponents (Jfokus 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032616/55a6ace41a28abe6018b48bf/html5/thumbnails/38.jpg)
Custom Elements
Web Components canoo
![Page 39: webcomponents (Jfokus 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032616/55a6ace41a28abe6018b48bf/html5/thumbnails/39.jpg)
document.registerElement("activity-card", options);
Web Components canoo
var activityCardPrototype = Object.create(HTMLElement.prototype);
document.registerElement("activity-card", options);
Rough translationto Java
class ActivityCard extends HTMLElement {}; Class<ActivityCard> activityCardClass = ActivityCard.class;
ElementRegistrationOptions options = new ElementRegistrationOptions(activityCardClass);
var options = {prototype: activityPrototype}
![Page 40: webcomponents (Jfokus 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032616/55a6ace41a28abe6018b48bf/html5/thumbnails/40.jpg)
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>
![Page 41: webcomponents (Jfokus 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032616/55a6ace41a28abe6018b48bf/html5/thumbnails/41.jpg)
Web Components canoo
create attach detach
change
createdCallback
attachedCallback
detachedCallback
attributeChangedCallback (attrName, oldVal, newVal)
![Page 42: webcomponents (Jfokus 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032616/55a6ace41a28abe6018b48bf/html5/thumbnails/42.jpg)
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});
![Page 43: webcomponents (Jfokus 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032616/55a6ace41a28abe6018b48bf/html5/thumbnails/43.jpg)
Web Components canoo
35+ and
Android 4.4.4+26+
![Page 44: webcomponents (Jfokus 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032616/55a6ace41a28abe6018b48bf/html5/thumbnails/44.jpg)
Web Components canoo
Web Components
Custom
Elements
HTM
L
Imports
Shadow
DOMEl
ement
Template
![Page 45: webcomponents (Jfokus 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032616/55a6ace41a28abe6018b48bf/html5/thumbnails/45.jpg)
Web Components canoo
Web Components
Custom
Elements
HTM
L
Imports
Shadow
DOMEl
ement
Template
![Page 46: webcomponents (Jfokus 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032616/55a6ace41a28abe6018b48bf/html5/thumbnails/46.jpg)
<!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
![Page 47: webcomponents (Jfokus 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032616/55a6ace41a28abe6018b48bf/html5/thumbnails/47.jpg)
HTML Imports
Web Components canoo
![Page 48: webcomponents (Jfokus 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032616/55a6ace41a28abe6018b48bf/html5/thumbnails/48.jpg)
<!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">
![Page 49: webcomponents (Jfokus 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032616/55a6ace41a28abe6018b48bf/html5/thumbnails/49.jpg)
Web Components canoo
36+ and
Android Browser
37
26+
![Page 50: webcomponents (Jfokus 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032616/55a6ace41a28abe6018b48bf/html5/thumbnails/50.jpg)
Web Components canoo
Web Components
Custom
Elements
HTM
L
Imports
Shadow
DOMEl
ement
Template
![Page 51: webcomponents (Jfokus 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032616/55a6ace41a28abe6018b48bf/html5/thumbnails/51.jpg)
Web Components canoo
Web Components
Custom
Elements
HTM
L
Imports
Shadow
DOMEl
ement
Template
![Page 52: webcomponents (Jfokus 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032616/55a6ace41a28abe6018b48bf/html5/thumbnails/52.jpg)
webcomponent.jsWeb 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
![Page 53: webcomponents (Jfokus 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032616/55a6ace41a28abe6018b48bf/html5/thumbnails/53.jpg)
webcomponent.jsWeb 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
![Page 54: webcomponents (Jfokus 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032616/55a6ace41a28abe6018b48bf/html5/thumbnails/54.jpg)
webcomponent.jsWeb Components canoo
• X-Tag and Polymer depends on webcomponents-js
• Both libraries provide additional features that are not part of the specification
webcomponents.org
![Page 55: webcomponents (Jfokus 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032616/55a6ace41a28abe6018b48bf/html5/thumbnails/55.jpg)
PolymerWeb 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
![Page 56: webcomponents (Jfokus 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032616/55a6ace41a28abe6018b48bf/html5/thumbnails/56.jpg)
Shadow
DOM
Pointe
r Eve
nts
Muta
tion
Observ
ers
Custom
Elements
HTM
L Impo
rts
Template
Binding
Nod
e.bind()
Web A
nim
ator
webcomponents.js
polymer.js
Polymer Elements
Polymer UI Elements
Polymer StackWeb Components canoo
similar to an UI Toolkit
basic for w
eb
compo
nents
some additional useful features
![Page 57: webcomponents (Jfokus 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032616/55a6ace41a28abe6018b48bf/html5/thumbnails/57.jpg)
Data BindingsWeb 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’} ];
![Page 58: webcomponents (Jfokus 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032616/55a6ace41a28abe6018b48bf/html5/thumbnails/58.jpg)
X-TagWeb 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
![Page 59: webcomponents (Jfokus 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032616/55a6ace41a28abe6018b48bf/html5/thumbnails/59.jpg)
X-TagWeb Components canoo
<X>• X-Tag is supported by most modern browsers
5+ 4+ and
Android 2.1+4+ 9+ 11+
![Page 60: webcomponents (Jfokus 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032616/55a6ace41a28abe6018b48bf/html5/thumbnails/60.jpg)
X-TagWeb Components canoo
<X>
Shadow
DOM
Pointe
r Eve
nts
Muta
tion
Observ
ers
Custom
Elements
HTM
L Impo
rts
Template
Binding
Nod
e.bind()
Web A
nim
ator
webcomponents.js
X-Tag core library
basic for w
eb
compo
nents
some additional useful features
![Page 61: webcomponents (Jfokus 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032616/55a6ace41a28abe6018b48bf/html5/thumbnails/61.jpg)
The next steps• Web Components can be reused
• Web Components can be styled
• A logical consequence is to provide toolkits
Web Components canoo
![Page 62: webcomponents (Jfokus 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032616/55a6ace41a28abe6018b48bf/html5/thumbnails/62.jpg)
Google Web ComponentsWeb 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
![Page 63: webcomponents (Jfokus 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032616/55a6ace41a28abe6018b48bf/html5/thumbnails/63.jpg)
Twitter Boostrap• provides predefined CSS rules
• Can be used for layout
• Provides its own style
• Provides an icon set
Web Components canoo
![Page 64: webcomponents (Jfokus 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032616/55a6ace41a28abe6018b48bf/html5/thumbnails/64.jpg)
Google Polymer Paper• provides custom web components
• provides layouts
• provides icon sets
Web Components canoo
![Page 65: webcomponents (Jfokus 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032616/55a6ace41a28abe6018b48bf/html5/thumbnails/65.jpg)
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
![Page 66: webcomponents (Jfokus 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032616/55a6ace41a28abe6018b48bf/html5/thumbnails/66.jpg)
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.“
![Page 67: webcomponents (Jfokus 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032616/55a6ace41a28abe6018b48bf/html5/thumbnails/67.jpg)
![Page 68: webcomponents (Jfokus 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032616/55a6ace41a28abe6018b48bf/html5/thumbnails/68.jpg)
![Page 69: webcomponents (Jfokus 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032616/55a6ace41a28abe6018b48bf/html5/thumbnails/69.jpg)
![Page 70: webcomponents (Jfokus 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032616/55a6ace41a28abe6018b48bf/html5/thumbnails/70.jpg)
![Page 71: webcomponents (Jfokus 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032616/55a6ace41a28abe6018b48bf/html5/thumbnails/71.jpg)
Important features• Responsive Design
• Customizable - Create your cooperative design
• Easy to use
• Extendable
Web Components canoo
![Page 72: webcomponents (Jfokus 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032616/55a6ace41a28abe6018b48bf/html5/thumbnails/72.jpg)
![Page 73: webcomponents (Jfokus 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032616/55a6ace41a28abe6018b48bf/html5/thumbnails/73.jpg)
![Page 74: webcomponents (Jfokus 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032616/55a6ace41a28abe6018b48bf/html5/thumbnails/74.jpg)
![Page 75: webcomponents (Jfokus 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032616/55a6ace41a28abe6018b48bf/html5/thumbnails/75.jpg)
![Page 76: webcomponents (Jfokus 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032616/55a6ace41a28abe6018b48bf/html5/thumbnails/76.jpg)
• Layout containers
• Components
• Animations
• Icons
Polymer PaperWeb Components canoo
![Page 77: webcomponents (Jfokus 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032616/55a6ace41a28abe6018b48bf/html5/thumbnails/77.jpg)
• 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 ComponentsWeb Components canoo
$ bower install --save Polymer/paper-slider
<link rel="import" href="bower_components/paper-slider/paper-slider.html">
import it in HTML
![Page 78: webcomponents (Jfokus 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032616/55a6ace41a28abe6018b48bf/html5/thumbnails/78.jpg)
• The default Button
• shows ripple animation on click
Paper ButtonWeb Components canoo
<paper-button>flat button</paper-button> <paper-button raised>raised button</paper-button> <paper-button noink>No ripple effect</paper-button>
![Page 79: webcomponents (Jfokus 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032616/55a6ace41a28abe6018b48bf/html5/thumbnails/79.jpg)
• A styled CheckBox
• State can be defined as attribute
Paper CheckBoxWeb Components canoo
<paper-checkbox></paper-checkbox>
<paper-checkbox checked></paper-checkbox>
![Page 80: webcomponents (Jfokus 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032616/55a6ace41a28abe6018b48bf/html5/thumbnails/80.jpg)
• A dialog
• Supports title, modality, actions, …
Paper DialogWeb Components canoo
<paper-dialog heading="Title"> <p>Some content</p> </paper-dialog>
![Page 81: webcomponents (Jfokus 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032616/55a6ace41a28abe6018b48bf/html5/thumbnails/81.jpg)
OverviewWeb Components canoo
![Page 82: webcomponents (Jfokus 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032616/55a6ace41a28abe6018b48bf/html5/thumbnails/82.jpg)
OverviewWeb Components canoo
![Page 83: webcomponents (Jfokus 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032616/55a6ace41a28abe6018b48bf/html5/thumbnails/83.jpg)
IconsWeb Components canoo
![Page 84: webcomponents (Jfokus 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032616/55a6ace41a28abe6018b48bf/html5/thumbnails/84.jpg)
IconsWeb Components canoo
![Page 85: webcomponents (Jfokus 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032616/55a6ace41a28abe6018b48bf/html5/thumbnails/85.jpg)
• HeaderPanel
• Toolbar
• DrawerPanel
• Scaffold
LayoutWeb Components canoo
![Page 86: webcomponents (Jfokus 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032616/55a6ace41a28abe6018b48bf/html5/thumbnails/86.jpg)
• An application toolbar
• Toolbar content will be aligned
ToolbarWeb 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
![Page 87: webcomponents (Jfokus 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032616/55a6ace41a28abe6018b48bf/html5/thumbnails/87.jpg)
• Declarative layout system
• use CSS Flexbox internally
• Layout params are defined as HTML attributes
Polymer layout attributesWeb Components
<span flex></span>
canoo
<body fullbleed layout vertical>Hello World</body>
<div layout vertical><div>
![Page 88: webcomponents (Jfokus 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032616/55a6ace41a28abe6018b48bf/html5/thumbnails/88.jpg)
• Wrapper around toolbar and content
• Toolbar always on top
• Content scrollable
HeaderPanelWeb Components canoo
<core-header-panel flex> <core-toolbar>Title</core-toolbar> <div>content</div> </core-header-panel>
![Page 89: webcomponents (Jfokus 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032616/55a6ace41a28abe6018b48bf/html5/thumbnails/89.jpg)
• Adds a responsive menu
• Defines attributes to open and close the menu
• Normally wraps 2 core-header-panel
DrawerPanelWeb Components canoo
![Page 90: webcomponents (Jfokus 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032616/55a6ace41a28abe6018b48bf/html5/thumbnails/90.jpg)
DrawerPanelWeb 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
![Page 91: webcomponents (Jfokus 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032616/55a6ace41a28abe6018b48bf/html5/thumbnails/91.jpg)
• Basic skeleton
• Best practice to create an application
• Contains all the shown features
ScaffoldWeb 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
![Page 92: webcomponents (Jfokus 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032616/55a6ace41a28abe6018b48bf/html5/thumbnails/92.jpg)
• Create a new folder
• Install needed modules with Bower
Polymer demoWeb Components
$ mkdir app $ cd app $ bower init $ bower install --save Polymer/paper-elements
canoo
![Page 93: webcomponents (Jfokus 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032616/55a6ace41a28abe6018b48bf/html5/thumbnails/93.jpg)
• Create index.html
Polymer demoWeb Components
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> </head>
<body>Hello World</body>
</html>
canoo
![Page 94: webcomponents (Jfokus 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032616/55a6ace41a28abe6018b48bf/html5/thumbnails/94.jpg)
• add webcomponents.js
Polymer demoWeb Components
<head> . . .
<script src=„bower_components/webcomponentsjs/webcomponents.js"> </script>
</head>
• define initial layout for body<body fullbleed layout vertical>Hello World</body>
canoo
![Page 95: webcomponents (Jfokus 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032616/55a6ace41a28abe6018b48bf/html5/thumbnails/95.jpg)
• add the default font
Polymer demoWeb Components
<head> <link rel="import" href=„bower_components/font-roboto/roboto.html">
<style> html,body { font-family: 'RobotoDraft', sans-serif; } </style>
</head>
canoo
![Page 96: webcomponents (Jfokus 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032616/55a6ace41a28abe6018b48bf/html5/thumbnails/96.jpg)
Polymer demoWeb Components canoo
![Page 97: webcomponents (Jfokus 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032616/55a6ace41a28abe6018b48bf/html5/thumbnails/97.jpg)
• add a header panel with a toolbar
Polymer demoWeb 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
![Page 98: webcomponents (Jfokus 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032616/55a6ace41a28abe6018b48bf/html5/thumbnails/98.jpg)
Polymer demoWeb Components canoo
![Page 99: webcomponents (Jfokus 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032616/55a6ace41a28abe6018b48bf/html5/thumbnails/99.jpg)
• Define a toolbar color
Polymer demoWeb Components
<style> core-toolbar { background-color: orange; } </style>
• Add some content<div>content<div>
canoo
![Page 100: webcomponents (Jfokus 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032616/55a6ace41a28abe6018b48bf/html5/thumbnails/100.jpg)
Polymer demoWeb Components canoo
![Page 101: webcomponents (Jfokus 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032616/55a6ace41a28abe6018b48bf/html5/thumbnails/101.jpg)
• Add some content to the toolbar
Polymer demoWeb 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
![Page 102: webcomponents (Jfokus 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032616/55a6ace41a28abe6018b48bf/html5/thumbnails/102.jpg)
Polymer demoWeb Components canoo
![Page 103: webcomponents (Jfokus 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032616/55a6ace41a28abe6018b48bf/html5/thumbnails/103.jpg)
• Add paper elements as content
Polymer demoWeb 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
![Page 104: webcomponents (Jfokus 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032616/55a6ace41a28abe6018b48bf/html5/thumbnails/104.jpg)
Polymer demoWeb Components canoo
![Page 105: webcomponents (Jfokus 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032616/55a6ace41a28abe6018b48bf/html5/thumbnails/105.jpg)
• Add some padding
Polymer demoWeb 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
![Page 106: webcomponents (Jfokus 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032616/55a6ace41a28abe6018b48bf/html5/thumbnails/106.jpg)
Polymer demoWeb Components canoo
![Page 107: webcomponents (Jfokus 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032616/55a6ace41a28abe6018b48bf/html5/thumbnails/107.jpg)
• The Polymer team offers a WYSIWYG designer for Polymer
• Good to have a look at all components and play with the layout
Polymer DesignerWeb Components canoo
https://polymer-designer.appspot.com
![Page 108: webcomponents (Jfokus 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032616/55a6ace41a28abe6018b48bf/html5/thumbnails/108.jpg)
Polymer DesignerWeb Components canoo
![Page 109: webcomponents (Jfokus 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032616/55a6ace41a28abe6018b48bf/html5/thumbnails/109.jpg)
Web Components canoo
![Page 110: webcomponents (Jfokus 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032616/55a6ace41a28abe6018b48bf/html5/thumbnails/110.jpg)
Additional resourcesWeb Components canoo
• http://webcomponents.org
• http://component.kitchen
• http://customelements.io
most important entry point
custom web components catalogs
![Page 111: webcomponents (Jfokus 2015)](https://reader030.fdocuments.in/reader030/viewer/2022032616/55a6ace41a28abe6018b48bf/html5/thumbnails/111.jpg)
Web Components canoo
<questions></questions>