web components - the component model for the web
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