Web Components: Um futuro cada vez mais presente

WEB COMPONENTS UM FUTURO CADA VEZ MAIS PRESENTE

2 ,QPCVC9GDGT Software Engineer • Becker (becker.com/health) • Mederi Saúde
Domiciliar • Trabalha com PHP desde 2009 • Bacharel em Sistemas de Informação (UNIFACS) • Pós-graduando em Engenharia de Software (UNIFACS) [email protected] github.com/jonataa

Agenda • Manipulando o DOM • Web Components: Overview •
Polymer • Exemplo • Links Interessantes 3

Como você cria utiliza um "componente" hoje? 4

1. Usando um componente 2.Criando um componente Image: bit.ly/1sNZnLc

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>

Date Picker jQuery UI <link rel="stylesheet" href=“/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script
src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script> <link rel="stylesheet" href="/resources/demos/style.css"> $(function() { $( "#datepicker" ).datepicker(); }); <input type="text" id="datepicker">

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>

Demora, mas faz!

Que tal você criar seus próprios componentes? :-)

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

DOM Document Object Model 23 Image: bit.ly/1mSMhJP

HTML DOM 24

var el = document.getElementById('elemento'); getElementById() 25

var d = document.getElementsByClassName('destaque'); getElementsByClassName() 26

var logo = document.querySelector('.logomarca'); querySelector() var itens = document.querySelectorAll('.itens'); 27

var caixa = document.querySelector(‘#caixa'); caixa.innerHTML = '<h1>Hello!</h1>'; innerHTML 28

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title></title> 5
</head> 6 <body> 7 8 <h1>Hello, World!</h1> 9 10 </body> 11 </html> Exemplo Manipulando o DOM 29

<h1></h1> Manipulando o HTML via Javascript var h1 = document.querySelector('h1');
h1.textContent = 'Hello, World!'; 30

var h1 = document.createElement('h1'); h1.textContent = 'Hello, World!'; document.body.appendChild(h1); Criando
um elemento via Javascript 31

Web Components Custom Elements Shadow DOM HTML Templates HTML Imports

Custom Elements possibilita criar seus próprios elementos DOM 33

Custom Elements 34 <gdg-salvador></gdg-salvador> var GDG = document.registerElement(‘gdg-salvador');

Custom Elements 35 <gdg-salvador></gdg-salvador> var Proto = Object.create(HTMLElement.prototype); proto.createdCallback =
function() { this.textContent = 'Google Developers Group'; }; var GDG = document.registerElement(‘gdg-salvador', { prototype: Proto });

Extending Native Elements var MegaButton = document.registerElement('mega-button', { prototype: Object.create(HTMLButtonElement.prototype),
extends: 'button' }); <button is="mega-button">

Extending a Custom Element var XFooProto = Object.create(HTMLElement.prototype); ... var
XFooExtended = document.registerElement('x-foo-extended', { prototype: XFooProto, extends: 'x-foo' });

Shadow DOM possibilita encapsular as implementações 38

Shadow DOM <video> 39

Shadow DOM 40 <h1>My Page</h1> <div></div> var div = document.querySelector('div');
var shadow = div.createShadowRoot(); var h1 = document.createElement('h1'); h1.innerHTML = 'Hello, GDG!' + '<style> h1 { color: red; } </style>'; shadow.appendChild(h1);

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 43 <template> <img src="success.jpg" alt=""> </template> <button onclick="exibirFoto()">Exibir
Foto</button> var t = document.querySelector('template').content; function exibirFoto() { document.body.appendChild(t.cloneNode(true)); }

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

<!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="component.html"> var importDoc = document.querySelector('link[rel="import"').import; var
style = importDoc.querySelector('style'); var content = importDoc.querySelector('.content'); document.head.appendChild(style.cloneNode(true)); document.body.appendChild(content.cloneNode(true)); index.html <div class="content"> <h1>Olá, GDG Salvador!</h1> <img src="success.jpg" alt=""> </div> <style> h1 { color: red; } </style> component.html

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

bit.ly/1qAKOCZ

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

http://bit.ly/1ojTcak

Elements Polymer Platform (Polyﬁlls) Native Camadas do Polymer

Install Polymer $ bower install polymer

my-element.html Criando um Polymer element 1. Carregar o Polymer core
(polymer.html) 2. Declarar seu elemento usando <polymer-element> <link rel="import" href="../bower_components/polymer/polymer.html"> <polymer-element name="my-element" noscript> <template> <span>Hello from <b>my-element</b>. This is my Shadow DOM.</span> </template> </polymer-element>

<script
src="components/platform/platform.js"></script>  <link rel="import" href="google-map.html">  <google-map lat="37.790" long="-122.390"></google-map> google-map bit.ly/1v774uw

src="components/platform/platform.js"></script>  <link rel="import" href="google-chart.html">  <google-chart type='pie' height='300px' width='400px' options='{"title": "Distribuição de pessoas em 2014"}' cols='[{"label":"Mês", "type":"string"}, {"label":"Dias", "type":"number"}]' rows='[["Jan", 31],["Fev", 28],["Mar", 31]]'> </google-chart> google-chart bit.ly/1ytx5rV

bit.ly/1BeBJ9d

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

src="bower_components/platform/platform.js"></script>  <link rel="import" href="components/gdg/gdg-salvador.html">  <gdg-salvador size="small" type="full" cliques="10"></gdg-salvador> gdg-salvador github.com/jonataa/custom-elements

bit.ly/1qALkB3

bit.ly/1xoKZKr

bit.ly/1wLQn8K

bit.ly/1CrbBdE

bit.ly/1wKORSm

bit.ly/1xzL7qv

github.com

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

x-tags

bit.ly/1vtuetm

bit.ly/1qU0PUL

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

Obrigado! [email protected] @JonataWeber

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