Web components - The component model for the Web

Web$Components Web$Components Il$modello$a$componenti$per$il$Web Il$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$problema Analizziamo$il$problema

Il$Web$è$composto$da$ ELEMENTI

Elementi$ INCAPSULATI Small <select> <option>Small</option> <option>Medium</option> <option>Large</option> <option>X-Large</option> <option>XX-Large</option> </select>

Elementi$ CONFIGURABILI Small Medium Large X-Large XX-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$ COMPONIBILI Small <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$ PROGRAMMABILI var foo = mySelect.selectedIndex;

Ma$cosa$succede$se$vogliamo$costruire$nuovi$elementi?

Carousel$/$Slideshow Carousel$/$Slideshow

Carousel$/$Slideshow Carousel$/$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$Web Le$pecche$delle$tecnologie$Web Riuso Estendibilità Incapsulamento Modularità Manutenibilità

Carousel$/$Slideshow Carousel$/$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$Components Web$Components Hurray!

Una$collezione$di$ standard9emergenti che$permettono$agli$sviluppatori$di$ estendere9HTML

Il$mondo$delle$Web$Components$comprende: Template Template Custom$Elements Custom$Elements Shadow$DOM Shadow$DOM HTML$Imports HTML$Imports

Template Template

...not$a$new$concept

Come$definire$un$clientPside$templating$DOMPbased? <template> <template>

Come$si$definisce Come$si$definisce <template id="my-template"> <img src="" alt="great image"> <div class="comment"></div>
</template>

Proprietà$del$template$content Proprietà$del$template$content non$viene$renderizzato non$ha$side$effects non$figura$direttamente$nel$DOM

Come$si$usa Come$si$usa var 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);

Esempio Esempio <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$Elements Custom$Elements

Permettono$di$definire$nuovi$tipi$di$elementi$HTML

Come$si$definisce Come$si$definisce var 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$usa Come$si$usa <x-foo></x-foo> oppure <button is="mega-button">

Metodi$di$lifecycle Metodi$di$lifecycle var 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$DOM Shadow$DOM

Risolve$il$problema$dell’incapsulamento$del$DOM

Come$si$usa Come$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 & </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$Imports HTML$Imports

Un$modo$di$includere$documenti$HTML in$altri$documenti$HTML

Come$si$usa Come$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 & </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>

Conclusioni Conclusioni

Le$pecche$delle$tecnologie$Web Le$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$cents My$two$cents Web$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

Riferimenti Riferimenti hyperakt.com w3.org html5rocks.com cssPtrick.com webcomponents.org polymerPproject.org xPtags.org

Web components - The component model for the Web

Web components - The component model for the Web

More Decks by Nicola Sanitate

Other Decks in Programming

Featured

Transcript