Web Components: Um futuro cada vez mais presente!

Web Components UM FUTURO CADA VEZ MAIS PRESENTE

@jonataweber

O que é Web Components

Custom Elements HTML Templates Shadow DOM HTML Imports

Por que investir em Web Components?

–Michael Bleigh @ Founder of Divshot “Web Components represent the
most important advancement in browser technology since AJAX”

No início…

<button>I'm a button!</button>

User Experience

Hoje as coisas estão beeem diferentes…

Date Picker (HTML5) <input type="date">

var map; function initialize() { var mapOptions = { zoom:
8, center: new google.maps.LatLng(-34.397, 150.644) }; map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); } google.maps.event.addDomListener(window, 'load', initialize); Simple Google Map <body> <div id="map-canvas"></div> </body> <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>

Quais as características de um componente?

Componentes são encapsulados

<select> <option>Small</option> <option>Medium</option> <option>Large</option> </select>

Componentes são conﬁguráveis

<select id="size"> <option disabled>Small</option> <option disabled>Medium</option> <option selected>Large</option> </select>

Componentes são combináveis

<select> <optgroup label="German Cars"> <option>Mercedes</option> <option>Audi</option> </optgroup> ... </select>

<google-map></google-map>

<google-map latitude="-12.258940" longitude="-38.933655" zoom="10"></google-map>

<google-map latitude="-12.258940" longitude="-38.933655" zoom="10"> <google-map-marker latitude="-12.258940" longitude="-38.933655" title="We are here!"></google-map-marker>
</google-map>

Como criar seus Web Components

Web Components Custom Elements Shadow DOM HTML Templates HTML Imports

Custom Elements possibilita criar seus próprios elementos 28

Custom Elements 29 document.registerElement(‘jsday-fsa‘); <jsday-fsa></jsday-fsa> Depois utilize seu elemento HTML

30 LifeCycle • createdCallback() • attachedCallback() • detachedCallback() • attributeChangedCallback()

Custom Elements 31 <jsday-fsa></jsday-fsa> var JsDay = Object.create(HTMLElement.prototype); JsDay.createdCallback =
function() { this.textContent = 'JS Day - Feira de Santana'; }; document.registerElement('jsday-fsa', { prototype: JsDay });

32 Boas práticas! Custom Elements • Good • x-component •
x-web-component • Bad • web_components • xelement • XElement

Herança Elemento Nativo <button is="mega-button"> var MegaBtn = Object.create(HTMLElement.prototype); document.registerElement('mega-button',
{ prototype: MegaBtn, extends: 'button' }); …

Herança Custom Element var XFooChild = Object.create(HTMLElement.prototype); document.registerElement(‘x-foo-child', { prototype:
XFooChild, extends: ‘x-foo' }); … <x-foo is=“x-foo-child”></x-foo>

Shadow DOM possibilita encapsular as implementações 35

Shadow DOM <video> 36

Shadow DOM <video> 37

Shadow DOM 38 <h1>My Light DOM</h1> <div id="meu-elemento"></div> var el
= document.querySelector('#meu-elemento'); var shadow = el.createShadowRoot(); var h1 = document.createElement(‘h1'); var style = document.createElement('style'); h1.textContent = 'Olá, JS DAY!'; style.innerHTML = 'h1 { color: red; }'; shadow.appendChild(h1); shadow.appendChild(style);

Shadow DOM 39 <h1>My Light DOM</h1> <div id="meu-elemento"></div> var el
= document.querySelector('#meu-elemento'); var shadow = el.createShadowRoot(); var h1 = document.createElement(‘h1'); var style = document.createElement('style'); h1.textContent = 'Olá, JS DAY!'; style.innerHTML = 'h1 { color: red; }'; shadow.appendChild(h1); shadow.appendChild(style);

Estrutura de um Shadow DOM

HTML Templates possibilita criar fragmento de código manipulável e não
visível. 41

<div id="template" style="display: none;"> <img src="logo.png" alt="Minha Logo"> </div> Templates
(bad)

HTML Template (good) 44 <template> <img src="success.jpg" alt="uma foto qualquer">
</template> <button onclick="exibirFoto()">Exibir Foto</button> var t = document.querySelector('template').content; function exibirFoto() { document.body.appendChild(t.cloneNode(true)); }

45 var t = document.querySelector('template').content; function exibirFoto() { document.body.appendChild(t.cloneNode(true)); }
<template> <img src="success.jpg" alt="uma foto qualquer"> </template> <button onclick="exibirFoto()">Exibir Foto</button> HTML Template (good)

HTML Template nativo não tem data binding 46 // placeholders
<template bind="{{items}}"></template> // repeaters <template repeat="{{item in items}}"></template> // conditionals <template if="{{item.active}}"></templat

HTML Imports possibilita incluir e reutilizar documentos HTML em outros
documentos HTML 47

<!DOCTYPE html> <html> <head> <title>PHP Includes</title> </head> <body> <?php include
'header.php' ?> <div>Meu Conteúdo</div> <?php include 'footer.php' ?> </body> </html> PHP Includes

HTML Imports <link rel="import" href="cabecalho.html">

HTML Imports <link rel="import" href="cabecalho.html"> index.html <div id="template"> <h1>Olá, JS
DAY!</h1> <h2>Esse é o cabeçalho do site!</h2> </div> <style> h1 { color: red; } </style> cabecalho.html var link = document.querySelector('link[rel=import]'); var importDoc = link.import; var template = importDoc.querySelector('#template'); var style = importDoc.querySelector('style'); document.body.appendChild(template.cloneNode(true)); document.head.appendChild(style.cloneNode(true));

Custom Elements Permite criar novas elementos HTML e extender os
componentes nativos HTML Templates Possibilita criar fragmento de código manipulável e não visível pelo browser Shadow DOM Encapsulamento e escopo CSS HTML Imports Ajuda a “empacotar" e carrega o componente

http://jonrimmer.github.io/are-we-componentized-yet/

http://status.modern.ie Suporte no IE

Polyﬁll Implementa a tecnologia que um desenvolvedor espera que o
navegador forneça nativamente

Polyﬁll Implementa a tecnologia que um desenvolvedor espera que o
navegador forneça nativamente webcomponents.js

Usando Polyﬁlls

www.polymer-project.org Polymer 1.0

Polymer Elements Polymer Polyﬁll (webcomponents.js) Native Camadas do Polymer

Installing Polymer $ bower install polymer

https://developers.google.com/web/tools/polymer-starter-kit/ Polymer Boilerplate

Criando um Polymer element 1. Importar o Polymer core (polymer.html)
2. Declarar seu elemento usando <dom-module> 3. Inicializar o seu elemento usando Polymer({is: "my-element"}); <link rel="import" href="../bower_components/polymer/polymer.html"> <dom-module id="my-element"> <template> <span>Hello from <b>my-element</b>. This is my Shadow DOM.</span> </template> </dom-module> <script> Polymer({is: "my-element"}); </script>

PROCURAR $ bower install Polymer/core-toolbar $ bower install Polymer/core-icon-button #jsdayfsa

IMPORTAR <head> <link rel="import" href="core-toolbar.html"> <link rel="import" href="core-icon-button.html"> </head> #jsdayfsa

USE <core-toolbar> <core-icon-button icon="menu"></core-icon-button> <span flex>Toolbar</span> <core-icon-button icon="refresh"></core-icon-button> <core-icon-button icon="add"></core-icon-button>
</core-toolbar> #jsdayfsa

“There's an element for that!”

elements.polymer-project.org Polymer Catalog

customelements.io

bit.ly/1BeBJ9d

bower.io

webcomponents.org

<script
src="bower_components/webcomponentsjs/ webcomponents.js"></script>  <link rel="import" href="meu-contador/meu-contador.html">  <meu-contador pontos="50"></meu-contador> meu-contador github.com/jonataa/custom-elements

github.com

<script
src=“/bower_components/webcomponentsjs/webcomponents.js"></ script>  <script src="/bower_components/time-elements/time-elements.js"></ time <time is="time-ago" datetime="2014-07-04T16:30:00-08:00"></time>

x-tags

bit.ly/1vtuetm

React.js NÃO utiliza as especiﬁcações!

Mederi Saúde Domiciliar

https://translate.google.com/community

https://play.google.com/music

buitwithpolymer.org

Image: bit.ly/1rUNnpd Vamos componentizar a Web!

Obrigado! [email protected] @jonataweber github.com/jonataa

Web Components: Um futuro cada vez mais presente!

Web Components: Um futuro cada vez mais presente!

More Decks by Jonata Weber

Other Decks in Programming

Featured

Transcript