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
Web$ComponentsWeb$ComponentsIl$modello$a$componenti$per$il$WebIl$modello$a$componenti$per$il$Web
$ $
#dotbari#dotbari
In$principio$il$Web$era$semplice
Le$nostre$pagine$erano$semplici
Col$passare$tempo$il$Web$è$diventato$più$complesso
WebApp
Il$Web$è$la$piattaforma$giusta$per$ESEGUIRE$applicazioni?
Il$Web$è$la$piattaforma$giusta$per$DISTRIBUIRE$applicazioni?
Il$Web$è$la$piattaforma$giusta$per$REALIZZARE$applicazioni?
Analizziamo$il$problemaAnalizziamo$il$problema
Il$Web$è$composto$da$ELEMENTI
Elementi$INCAPSULATISmall
<select> <option>Small</option> <option>Medium</option> <option>Large</option> <option>X-Large</option> <option>XX-Large</option></select>
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>
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>
Elementi$PROGRAMMABILIvar foo = mySelect.selectedIndex;
Ma$cosa$succede$se$vogliamo$costruire$nuovi$elementi?
Carousel$/$SlideshowCarousel$/$Slideshow
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>
Le$pecche$delle$tecnologie$WebLe$pecche$delle$tecnologie$Web
Riuso
Estendibilità
Incapsulamento
Modularità
Manutenibilità
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>
Da$oggi$questo$è$possibile$grazie$a
Web$ComponentsWeb$Components
Hurray!
Una$collezione$di$standard9emergentiche$permettono$agli$sviluppatori$di$estendere9HTML
Il$mondo$delle$Web$Components$comprende:
TemplateTemplate
Custom$ElementsCustom$Elements
Shadow$DOMShadow$DOM
HTML$ImportsHTML$Imports
TemplateTemplate
...not$a$new$concept
Come$definire$un$clientPside$templating$DOMPbased?
<template><template>
Come$si$definisceCome$si$definisce<template id="my-template"> <img src="" alt="great image"> <div class="comment"></div></template>
Proprietà$del$template$contentProprietà$del$template$content
non$viene$renderizzato
non$ha$side$effects
non$figura$direttamente$nel$DOM
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);
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);}
Custom$ElementsCustom$Elements
Permettono$di$definire$nuovi$tipi$di$elementi$HTML
Come$si$definisceCome$si$definiscevar XFoo = document.registerElement('x-foo');
oppure
var XFoo = document.registerElement('mega-button', { prototype: Object.create(HTMLButtonElement.prototype), extends: 'button'});
Unica$regola$dei$Custom$Elements
Usare$nomi$con$Usare$nomi$con$?@??@?
Come$si$usaCome$si$usa<x-foo></x-foo>
oppure
<button is="mega-button">
Metodi$di$lifecycleMetodi$di$lifecyclevar MyElement = document.registerElement('my-element', { prototype: Object.create(HTMLElement.prototype),
// createdCallback, attachedCallback, detachedCallback attributeChangedCallback: { value: function(attr, oldVal, newVal) { ... } }});
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 });
Shadow$DOMShadow$DOM
Risolve$il$problema$dell’incapsulamento$del$DOM
Come$si$usaCome$si$usa<button>Hello, world!</button>
var host = document.querySelector('button');var root = host.createShadowRoot();root.textContent = 'Ciao, mondo!';
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!';
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; }
HTML$ImportsHTML$Imports
Un$modo$di$includere$documenti$HTML
in$altri$documenti$HTML
Come$si$usaCome$si$usa<head> <link rel="import" href="/path/to/import/stuff.html"></head>
var content = document.querySelector('link[rel="import"]').import;
Attenti$agli$<script>:
Vengono$eseguiti$allVimport
Non$bloccano$il$parsing$della$main$page
Fanno$riferimento$a$?document?$del$documento$importatore
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>
ConclusioniConclusioni
Le$pecche$delle$tecnologie$WebLe$pecche$delle$tecnologie$Web
Riuso$✓$Template
Estendibilità$✓$Custom$Elements
Incapsulamento$✓$Shadow$DOM
Modularità$✓$HTML$Imports
Manutenibilità$✓$Conseguenza$degli$altri
Questo$significa$che$abbiamo$risolto$tutti$i$nostri$problemi?
Polymer$|$XPTag$$$$$
$
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!
<thankPyou$/><thankPyou$/>!"+$
it.linkedin.com/in/nsanitate
@n_sanitate
plus.google.com/+NicolaSanitate
github.com/nsanitate
RiferimentiRiferimentihyperakt.com
w3.org
html5rocks.com
cssPtrick.com
webcomponents.org
polymerPproject.org
xPtags.org