Download - Web components - the component model for the Web

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"  <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>

 <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); } }});


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); } }});


<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

Download - Web components - the component model for the Web

Top Related