web components - the component model for the web
DESCRIPTION
Presentation about Web Components used during the DOT 2014. You can find information about Templates, Custom Elements, Shadow DOM and HTML imports the technologies behind the Web Components.TRANSCRIPT
![Page 1: Web components - the component model for the Web](https://reader033.vdocumenti.com/reader033/viewer/2022052307/54c545104a795994328b45d0/html5/thumbnails/1.jpg)
Web$ComponentsWeb$ComponentsIl$modello$a$componenti$per$il$WebIl$modello$a$componenti$per$il$Web
$ $
#dotbari#dotbari
![Page 2: Web components - the component model for the Web](https://reader033.vdocumenti.com/reader033/viewer/2022052307/54c545104a795994328b45d0/html5/thumbnails/2.jpg)
In$principio$il$Web$era$semplice
![Page 3: Web components - the component model for the Web](https://reader033.vdocumenti.com/reader033/viewer/2022052307/54c545104a795994328b45d0/html5/thumbnails/3.jpg)
![Page 4: Web components - the component model for the Web](https://reader033.vdocumenti.com/reader033/viewer/2022052307/54c545104a795994328b45d0/html5/thumbnails/4.jpg)
Le$nostre$pagine$erano$semplici
![Page 5: Web components - the component model for the Web](https://reader033.vdocumenti.com/reader033/viewer/2022052307/54c545104a795994328b45d0/html5/thumbnails/5.jpg)
![Page 6: Web components - the component model for the Web](https://reader033.vdocumenti.com/reader033/viewer/2022052307/54c545104a795994328b45d0/html5/thumbnails/6.jpg)
Col$passare$tempo$il$Web$è$diventato$più$complesso
![Page 7: Web components - the component model for the Web](https://reader033.vdocumenti.com/reader033/viewer/2022052307/54c545104a795994328b45d0/html5/thumbnails/7.jpg)
![Page 8: Web components - the component model for the Web](https://reader033.vdocumenti.com/reader033/viewer/2022052307/54c545104a795994328b45d0/html5/thumbnails/8.jpg)
WebApp
![Page 9: Web components - the component model for the Web](https://reader033.vdocumenti.com/reader033/viewer/2022052307/54c545104a795994328b45d0/html5/thumbnails/9.jpg)
![Page 10: Web components - the component model for the Web](https://reader033.vdocumenti.com/reader033/viewer/2022052307/54c545104a795994328b45d0/html5/thumbnails/10.jpg)
Il$Web$è$la$piattaforma$giusta$per$ESEGUIRE$applicazioni?
![Page 11: Web components - the component model for the Web](https://reader033.vdocumenti.com/reader033/viewer/2022052307/54c545104a795994328b45d0/html5/thumbnails/11.jpg)
Il$Web$è$la$piattaforma$giusta$per$DISTRIBUIRE$applicazioni?
![Page 12: Web components - the component model for the Web](https://reader033.vdocumenti.com/reader033/viewer/2022052307/54c545104a795994328b45d0/html5/thumbnails/12.jpg)
Il$Web$è$la$piattaforma$giusta$per$REALIZZARE$applicazioni?
![Page 13: Web components - the component model for the Web](https://reader033.vdocumenti.com/reader033/viewer/2022052307/54c545104a795994328b45d0/html5/thumbnails/13.jpg)
Analizziamo$il$problemaAnalizziamo$il$problema
![Page 14: Web components - the component model for the Web](https://reader033.vdocumenti.com/reader033/viewer/2022052307/54c545104a795994328b45d0/html5/thumbnails/14.jpg)
Il$Web$è$composto$da$ELEMENTI
![Page 15: Web components - the component model for the Web](https://reader033.vdocumenti.com/reader033/viewer/2022052307/54c545104a795994328b45d0/html5/thumbnails/15.jpg)
Elementi$INCAPSULATISmall
<select> <option>Small</option> <option>Medium</option> <option>Large</option> <option>X-Large</option> <option>XX-Large</option></select>
![Page 16: Web components - the component model for the Web](https://reader033.vdocumenti.com/reader033/viewer/2022052307/54c545104a795994328b45d0/html5/thumbnails/16.jpg)
Elementi$CONFIGURABILISmallMediumLargeX-LargeXX-Large
<select id="size" size="6" multiple> <option disabled>Small</option> <option disabled>Medium</option> <option selected>Large</option> <option>X-Large</option> <option>XX-Large</option></select>
![Page 17: Web components - the component model for the Web](https://reader033.vdocumenti.com/reader033/viewer/2022052307/54c545104a795994328b45d0/html5/thumbnails/17.jpg)
Elementi$COMPONIBILISmall
<select> <optgroup label="Small"> <option>Small</option> </optgroup> <optgroup label="Medium"> <option>Medium</option> </optgroup> <optgroup label="Large"> <option>Large</option> <option>X-Large</option> <option>XX-Large</option> </optgroup></select>
![Page 18: Web components - the component model for the Web](https://reader033.vdocumenti.com/reader033/viewer/2022052307/54c545104a795994328b45d0/html5/thumbnails/18.jpg)
Elementi$PROGRAMMABILIvar foo = mySelect.selectedIndex;
![Page 19: Web components - the component model for the Web](https://reader033.vdocumenti.com/reader033/viewer/2022052307/54c545104a795994328b45d0/html5/thumbnails/19.jpg)
Ma$cosa$succede$se$vogliamo$costruire$nuovi$elementi?
![Page 20: Web components - the component model for the Web](https://reader033.vdocumenti.com/reader033/viewer/2022052307/54c545104a795994328b45d0/html5/thumbnails/20.jpg)
Carousel$/$SlideshowCarousel$/$Slideshow
![Page 21: Web components - the component model for the Web](https://reader033.vdocumenti.com/reader033/viewer/2022052307/54c545104a795994328b45d0/html5/thumbnails/21.jpg)
Carousel$/$SlideshowCarousel$/$Slideshow<head> <link href="styles/bootstrap.min.css" rel="stylesheet"> <_script_ src="lib/bootstrap/carousel.js"></_script_></head><body> <div id="carousel-example-generic" class="carousel slide" data-ride="carousel" <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="0" class="active" <li data-target="#carousel-example-generic" data-slide-to="1"></li> <li data-target="#carousel-example-generic" data-slide-to="2"></li> </ol>
<!-- Wrapper for slides --> <div class="carousel-inner"> <div class="item active"> <img src="..." alt="..."> </div> <div class="item"> <img src="..." alt="..."> </div> <div class="item"> <img src="..." alt="..."> </div> </div>
![Page 22: Web components - the component model for the Web](https://reader033.vdocumenti.com/reader033/viewer/2022052307/54c545104a795994328b45d0/html5/thumbnails/22.jpg)
Le$pecche$delle$tecnologie$WebLe$pecche$delle$tecnologie$Web
Riuso
Estendibilità
Incapsulamento
Modularità
Manutenibilità
![Page 23: Web components - the component model for the Web](https://reader033.vdocumenti.com/reader033/viewer/2022052307/54c545104a795994328b45d0/html5/thumbnails/23.jpg)
![Page 24: Web components - the component model for the Web](https://reader033.vdocumenti.com/reader033/viewer/2022052307/54c545104a795994328b45d0/html5/thumbnails/24.jpg)
Carousel$/$SlideshowCarousel$/$Slideshow<head> <link href="lib/bootstrap/carousel.html" rel="import"></head><body> <carousel> <img src="..." alt="..."> <img src="..." alt="..."> <img src="..." alt="..."> </carousel></body>
![Page 25: Web components - the component model for the Web](https://reader033.vdocumenti.com/reader033/viewer/2022052307/54c545104a795994328b45d0/html5/thumbnails/25.jpg)
Da$oggi$questo$è$possibile$grazie$a
Web$ComponentsWeb$Components
Hurray!
![Page 26: Web components - the component model for the Web](https://reader033.vdocumenti.com/reader033/viewer/2022052307/54c545104a795994328b45d0/html5/thumbnails/26.jpg)
Una$collezione$di$standard9emergentiche$permettono$agli$sviluppatori$di$estendere9HTML
![Page 27: Web components - the component model for the Web](https://reader033.vdocumenti.com/reader033/viewer/2022052307/54c545104a795994328b45d0/html5/thumbnails/27.jpg)
Il$mondo$delle$Web$Components$comprende:
TemplateTemplate
Custom$ElementsCustom$Elements
Shadow$DOMShadow$DOM
HTML$ImportsHTML$Imports
![Page 28: Web components - the component model for the Web](https://reader033.vdocumenti.com/reader033/viewer/2022052307/54c545104a795994328b45d0/html5/thumbnails/28.jpg)
TemplateTemplate
![Page 29: Web components - the component model for the Web](https://reader033.vdocumenti.com/reader033/viewer/2022052307/54c545104a795994328b45d0/html5/thumbnails/29.jpg)
...not$a$new$concept
![Page 30: Web components - the component model for the Web](https://reader033.vdocumenti.com/reader033/viewer/2022052307/54c545104a795994328b45d0/html5/thumbnails/30.jpg)
Come$definire$un$clientPside$templating$DOMPbased?
<template><template>
![Page 31: Web components - the component model for the Web](https://reader033.vdocumenti.com/reader033/viewer/2022052307/54c545104a795994328b45d0/html5/thumbnails/31.jpg)
Come$si$definisceCome$si$definisce<template id="my-template"> <img src="" alt="great image"> <div class="comment"></div></template>
![Page 32: Web components - the component model for the Web](https://reader033.vdocumenti.com/reader033/viewer/2022052307/54c545104a795994328b45d0/html5/thumbnails/32.jpg)
Proprietà$del$template$contentProprietà$del$template$content
non$viene$renderizzato
non$ha$side$effects
non$figura$direttamente$nel$DOM
![Page 33: Web components - the component model for the Web](https://reader033.vdocumenti.com/reader033/viewer/2022052307/54c545104a795994328b45d0/html5/thumbnails/33.jpg)
Come$si$usaCome$si$usavar t = document.querySelector('#my-template');var clone = document.importNode(t.content, true);
// Populate the src at runtime.clone.querySelector('img').src = 'logo.png';document.body.appendChild(clone);
![Page 34: Web components - the component model for the Web](https://reader033.vdocumenti.com/reader033/viewer/2022052307/54c545104a795994328b45d0/html5/thumbnails/34.jpg)
EsempioEsempio<button onclick="useIt()">Cliccami</button><div id="container"></div>
<template id="my-template"> <div>Provengo da una <template>.</div> <_script_>alert('Grazie!')</_script_></template>
function useIt() { var t = document.querySelector('#my-template'); var clone = document.importNode(t.content, true);
document.querySelector('#container').appendChild(clone);}
![Page 35: Web components - the component model for the Web](https://reader033.vdocumenti.com/reader033/viewer/2022052307/54c545104a795994328b45d0/html5/thumbnails/35.jpg)
Custom$ElementsCustom$Elements
![Page 36: Web components - the component model for the Web](https://reader033.vdocumenti.com/reader033/viewer/2022052307/54c545104a795994328b45d0/html5/thumbnails/36.jpg)
Permettono$di$definire$nuovi$tipi$di$elementi$HTML
![Page 37: Web components - the component model for the Web](https://reader033.vdocumenti.com/reader033/viewer/2022052307/54c545104a795994328b45d0/html5/thumbnails/37.jpg)
Come$si$definisceCome$si$definiscevar XFoo = document.registerElement('x-foo');
oppure
var XFoo = document.registerElement('mega-button', { prototype: Object.create(HTMLButtonElement.prototype), extends: 'button'});
![Page 38: Web components - the component model for the Web](https://reader033.vdocumenti.com/reader033/viewer/2022052307/54c545104a795994328b45d0/html5/thumbnails/38.jpg)
Unica$regola$dei$Custom$Elements
Usare$nomi$con$Usare$nomi$con$?@??@?
![Page 39: Web components - the component model for the Web](https://reader033.vdocumenti.com/reader033/viewer/2022052307/54c545104a795994328b45d0/html5/thumbnails/39.jpg)
Come$si$usaCome$si$usa<x-foo></x-foo>
oppure
<button is="mega-button">
![Page 40: Web components - the component model for the Web](https://reader033.vdocumenti.com/reader033/viewer/2022052307/54c545104a795994328b45d0/html5/thumbnails/40.jpg)
Metodi$di$lifecycleMetodi$di$lifecyclevar MyElement = document.registerElement('my-element', { prototype: Object.create(HTMLElement.prototype),
// createdCallback, attachedCallback, detachedCallback attributeChangedCallback: { value: function(attr, oldVal, newVal) { ... } }});
![Page 41: Web components - the component model for the Web](https://reader033.vdocumenti.com/reader033/viewer/2022052307/54c545104a795994328b45d0/html5/thumbnails/41.jpg)
Custom9Elements$+$Template<my-tag></my-tag>
<template id="my-template"> <p>Sono in <my-tag> e provengo da una <template>.</p></template>
var proto = Object.create(HTMLElement.prototype, { createdCallback: { value: function() { var t = document.querySelector('#my-template'); var clone = document.importNode(t.content, true); this.appendChild(clone); } }});
document.registerElement('my-tag', { prototype: proto });
![Page 42: Web components - the component model for the Web](https://reader033.vdocumenti.com/reader033/viewer/2022052307/54c545104a795994328b45d0/html5/thumbnails/42.jpg)
Shadow$DOMShadow$DOM
![Page 43: Web components - the component model for the Web](https://reader033.vdocumenti.com/reader033/viewer/2022052307/54c545104a795994328b45d0/html5/thumbnails/43.jpg)
Risolve$il$problema$dell’incapsulamento$del$DOM
![Page 44: Web components - the component model for the Web](https://reader033.vdocumenti.com/reader033/viewer/2022052307/54c545104a795994328b45d0/html5/thumbnails/44.jpg)
![Page 45: Web components - the component model for the Web](https://reader033.vdocumenti.com/reader033/viewer/2022052307/54c545104a795994328b45d0/html5/thumbnails/45.jpg)
Come$si$usaCome$si$usa<button>Hello, world!</button>
var host = document.querySelector('button');var root = host.createShadowRoot();root.textContent = 'Ciao, mondo!';
![Page 46: Web components - the component model for the Web](https://reader033.vdocumenti.com/reader033/viewer/2022052307/54c545104a795994328b45d0/html5/thumbnails/46.jpg)
E$il$contenuto$dellVhost?E$il$contenuto$dellVhost?<button>Nicola</button>
var host = document.querySelector('button');var root = host.createShadowRoot();root.innerHTML = 'Ciao <content></content>. Sei il benvenuto!';
![Page 47: Web components - the component model for the Web](https://reader033.vdocumenti.com/reader033/viewer/2022052307/54c545104a795994328b45d0/html5/thumbnails/47.jpg)
Shadow9DOM$+$Custom9Elements$+$Template<p>Non sono nello Shadow DOM</p><my-tag>Nicola</my-tag>
<template id="my-template"> <p>Ciao <content></content>. Sono nello Shadow DOM di <my-tag> e provengo da una <tem</template>
var proto = Object.create(HTMLElement.prototype, { createdCallback: { value: function() { var t = document.querySelector('#my-template'); var clone = document.importNode(t.content, true); this.createShadowRoot().appendChild(clone); } }});
document.registerElement('my-tag', { prototype: proto });
p { color: orange; }
![Page 48: Web components - the component model for the Web](https://reader033.vdocumenti.com/reader033/viewer/2022052307/54c545104a795994328b45d0/html5/thumbnails/48.jpg)
HTML$ImportsHTML$Imports
![Page 49: Web components - the component model for the Web](https://reader033.vdocumenti.com/reader033/viewer/2022052307/54c545104a795994328b45d0/html5/thumbnails/49.jpg)
Un$modo$di$includere$documenti$HTML
in$altri$documenti$HTML
![Page 50: Web components - the component model for the Web](https://reader033.vdocumenti.com/reader033/viewer/2022052307/54c545104a795994328b45d0/html5/thumbnails/50.jpg)
Come$si$usaCome$si$usa<head> <link rel="import" href="/path/to/import/stuff.html"></head>
var content = document.querySelector('link[rel="import"]').import;
![Page 51: Web components - the component model for the Web](https://reader033.vdocumenti.com/reader033/viewer/2022052307/54c545104a795994328b45d0/html5/thumbnails/51.jpg)
Attenti$agli$<script>:
Vengono$eseguiti$allVimport
Non$bloccano$il$parsing$della$main$page
Fanno$riferimento$a$?document?$del$documento$importatore
![Page 52: Web components - the component model for the Web](https://reader033.vdocumenti.com/reader033/viewer/2022052307/54c545104a795994328b45d0/html5/thumbnails/52.jpg)
All9together9now<template id="my-template"> <p>Ciao <content></content>. Sono nello Shadow DOM di <my-tag> e provengo da una <tem</template>
var importDoc = document.currentScript.ownerDocument;
var proto = Object.create(HTMLElement.prototype, { createdCallback: { value: function() { var t = importDoc.querySelector('#my-template'); var clone = document.importNode(t.content, true); this.createShadowRoot().appendChild(clone); } }});
document.registerElement('my-tag', { prototype: proto });
<head> <link rel="import" href="shadow-dom-for-import.html"></head><body> <my-tag>Nicola</my-tag></body>
![Page 53: Web components - the component model for the Web](https://reader033.vdocumenti.com/reader033/viewer/2022052307/54c545104a795994328b45d0/html5/thumbnails/53.jpg)
ConclusioniConclusioni
![Page 54: Web components - the component model for the Web](https://reader033.vdocumenti.com/reader033/viewer/2022052307/54c545104a795994328b45d0/html5/thumbnails/54.jpg)
Le$pecche$delle$tecnologie$WebLe$pecche$delle$tecnologie$Web
Riuso$✓$Template
Estendibilità$✓$Custom$Elements
Incapsulamento$✓$Shadow$DOM
Modularità$✓$HTML$Imports
Manutenibilità$✓$Conseguenza$degli$altri
![Page 55: Web components - the component model for the Web](https://reader033.vdocumenti.com/reader033/viewer/2022052307/54c545104a795994328b45d0/html5/thumbnails/55.jpg)
Questo$significa$che$abbiamo$risolto$tutti$i$nostri$problemi?
![Page 56: Web components - the component model for the Web](https://reader033.vdocumenti.com/reader033/viewer/2022052307/54c545104a795994328b45d0/html5/thumbnails/56.jpg)
![Page 57: Web components - the component model for the Web](https://reader033.vdocumenti.com/reader033/viewer/2022052307/54c545104a795994328b45d0/html5/thumbnails/57.jpg)
Polymer$|$XPTag$$$$$
$
![Page 58: Web components - the component model for the Web](https://reader033.vdocumenti.com/reader033/viewer/2022052307/54c545104a795994328b45d0/html5/thumbnails/58.jpg)
My$two$centsMy$two$centsWeb$Components$+$EcmaScript$6
svincolano$il$progettista$di$UX$dai$limiti$del$browser
Il$futuro$del$Web$passa$da$loro
Stay$tuned!Stay$tuned!
![Page 59: Web components - the component model for the Web](https://reader033.vdocumenti.com/reader033/viewer/2022052307/54c545104a795994328b45d0/html5/thumbnails/59.jpg)
<thankPyou$/><thankPyou$/>!"+$
it.linkedin.com/in/nsanitate
@n_sanitate
plus.google.com/+NicolaSanitate
github.com/nsanitate
![Page 60: Web components - the component model for the Web](https://reader033.vdocumenti.com/reader033/viewer/2022052307/54c545104a795994328b45d0/html5/thumbnails/60.jpg)
RiferimentiRiferimentihyperakt.com
w3.org
html5rocks.com
cssPtrick.com
webcomponents.org
polymerPproject.org
xPtags.org