Download - Desbravando Web Components
![Page 1: Desbravando Web Components](https://reader033.vdocuments.pub/reader033/viewer/2022052209/559813d91a28ab370a8b45b0/html5/thumbnails/1.jpg)
Desbravando Web Components
@mteusor)z
![Page 2: Desbravando Web Components](https://reader033.vdocuments.pub/reader033/viewer/2022052209/559813d91a28ab370a8b45b0/html5/thumbnails/2.jpg)
@mteusor3z
mateusor3z
![Page 3: Desbravando Web Components](https://reader033.vdocuments.pub/reader033/viewer/2022052209/559813d91a28ab370a8b45b0/html5/thumbnails/3.jpg)
![Page 4: Desbravando Web Components](https://reader033.vdocuments.pub/reader033/viewer/2022052209/559813d91a28ab370a8b45b0/html5/thumbnails/4.jpg)
![Page 5: Desbravando Web Components](https://reader033.vdocuments.pub/reader033/viewer/2022052209/559813d91a28ab370a8b45b0/html5/thumbnails/5.jpg)
Como "criar" um componente hoje
![Page 6: Desbravando Web Components](https://reader033.vdocuments.pub/reader033/viewer/2022052209/559813d91a28ab370a8b45b0/html5/thumbnails/6.jpg)
Google! plugin jQuery
![Page 7: Desbravando Web Components](https://reader033.vdocuments.pub/reader033/viewer/2022052209/559813d91a28ab370a8b45b0/html5/thumbnails/7.jpg)
Copie e cole o código do plugin
![Page 8: Desbravando Web Components](https://reader033.vdocuments.pub/reader033/viewer/2022052209/559813d91a28ab370a8b45b0/html5/thumbnails/8.jpg)
Funcionou? Beleza
![Page 9: Desbravando Web Components](https://reader033.vdocuments.pub/reader033/viewer/2022052209/559813d91a28ab370a8b45b0/html5/thumbnails/9.jpg)
Web Components
![Page 10: Desbravando Web Components](https://reader033.vdocuments.pub/reader033/viewer/2022052209/559813d91a28ab370a8b45b0/html5/thumbnails/10.jpg)
<gdg-‐recife>
h"ps://github.com/mateusor3z/gdg-‐light
![Page 11: Desbravando Web Components](https://reader033.vdocuments.pub/reader033/viewer/2022052209/559813d91a28ab370a8b45b0/html5/thumbnails/11.jpg)
![Page 12: Desbravando Web Components](https://reader033.vdocuments.pub/reader033/viewer/2022052209/559813d91a28ab370a8b45b0/html5/thumbnails/12.jpg)
googlewebcomponents.github.io
![Page 13: Desbravando Web Components](https://reader033.vdocuments.pub/reader033/viewer/2022052209/559813d91a28ab370a8b45b0/html5/thumbnails/13.jpg)
Live demo
![Page 14: Desbravando Web Components](https://reader033.vdocuments.pub/reader033/viewer/2022052209/559813d91a28ab370a8b45b0/html5/thumbnails/14.jpg)
![Page 15: Desbravando Web Components](https://reader033.vdocuments.pub/reader033/viewer/2022052209/559813d91a28ab370a8b45b0/html5/thumbnails/15.jpg)
<google-‐map>
h"ps://github.com/GoogleWebComponents/google-‐map
![Page 16: Desbravando Web Components](https://reader033.vdocuments.pub/reader033/viewer/2022052209/559813d91a28ab370a8b45b0/html5/thumbnails/16.jpg)
<google-‐chart>
h"ps://github.com/GoogleWebComponents/google-‐chart
![Page 17: Desbravando Web Components](https://reader033.vdocuments.pub/reader033/viewer/2022052209/559813d91a28ab370a8b45b0/html5/thumbnails/17.jpg)
![Page 18: Desbravando Web Components](https://reader033.vdocuments.pub/reader033/viewer/2022052209/559813d91a28ab370a8b45b0/html5/thumbnails/18.jpg)
Web Components
Shadow DOM
TemplateCustom Elements
HTML Imports
Decorators*
![Page 19: Desbravando Web Components](https://reader033.vdocuments.pub/reader033/viewer/2022052209/559813d91a28ab370a8b45b0/html5/thumbnails/19.jpg)
Custom ElementsDefine novos elementos HTML/DOM
![Page 20: Desbravando Web Components](https://reader033.vdocuments.pub/reader033/viewer/2022052209/559813d91a28ab370a8b45b0/html5/thumbnails/20.jpg)
Criar Novos Elementos
![Page 21: Desbravando Web Components](https://reader033.vdocuments.pub/reader033/viewer/2022052209/559813d91a28ab370a8b45b0/html5/thumbnails/21.jpg)
<script> (function() { // Creates an object based in the HTML Element prototype var element = Object.create(HTMLElement.prototype); // Fires when an instance of the element is created element.createdCallback = function() {}; // Fires when an instance was inserted into the document element.attachedCallback = function() {}; // Fires when an instance was removed from the document element.detachedCallback = function() {}; // Fires when an attribute was added, removed, or updated element.attributeChangedCallback = function(attr, oldVal, newVal) {}; document.registerElement('menu-tabs', { prototype: element }); }()); </script>
![Page 22: Desbravando Web Components](https://reader033.vdocuments.pub/reader033/viewer/2022052209/559813d91a28ab370a8b45b0/html5/thumbnails/22.jpg)
<!-- Define your custom element --> <polymer-element name="menu-tabs">
<script> Polymer('menu-tabs', { // Fires when an instance of the element is created created: function() {}, // Fires when the "<polymer-element>" has been fully prepared ready: function() {}, // Fires when the element was inserted into the document attached: function() {}, // Fires when the element was removed from the document detached: function() {}, // Fires when an attribute was added, removed, or updated attributeChanged: function(attr, oldVal, newVal) {} }); </script> </polymer-element>
![Page 23: Desbravando Web Components](https://reader033.vdocuments.pub/reader033/viewer/2022052209/559813d91a28ab370a8b45b0/html5/thumbnails/23.jpg)
<menu-tabs></menu-tabs>
Usando o elemento
![Page 24: Desbravando Web Components](https://reader033.vdocuments.pub/reader033/viewer/2022052209/559813d91a28ab370a8b45b0/html5/thumbnails/24.jpg)
Estendendo elementos existes
![Page 25: Desbravando Web Components](https://reader033.vdocuments.pub/reader033/viewer/2022052209/559813d91a28ab370a8b45b0/html5/thumbnails/25.jpg)
<!-- Define your custom element --> <polymer-element name="menu-tabs" extends="nav"> <script> Polymer('menu-tabs', { // Fires when an instance of the element is created created: function() {}, // Fires when the "<polymer-element>" has been fully prepared ready: function() {}, // Fires when the element was inserted into the document attached: function() {}, // Fires when the element was removed from the document detached: function() {}, // Fires when an attribute was added, removed, or updated attributeChanged: function(attr, oldVal, newVal) {} }); </script> </polymer-element>
![Page 26: Desbravando Web Components](https://reader033.vdocuments.pub/reader033/viewer/2022052209/559813d91a28ab370a8b45b0/html5/thumbnails/26.jpg)
Lifecycle Callbacks Polymer
created();
detached();a"ributeChanged();
a"ached();
![Page 27: Desbravando Web Components](https://reader033.vdocuments.pub/reader033/viewer/2022052209/559813d91a28ab370a8b45b0/html5/thumbnails/27.jpg)
TemplateTemplate client-‐side na3vo
![Page 28: Desbravando Web Components](https://reader033.vdocuments.pub/reader033/viewer/2022052209/559813d91a28ab370a8b45b0/html5/thumbnails/28.jpg)
HTML Templates
parseado, não é renderizadoconteúdo inerteUsa Dom como scaffold
![Page 29: Desbravando Web Components](https://reader033.vdocuments.pub/reader033/viewer/2022052209/559813d91a28ab370a8b45b0/html5/thumbnails/29.jpg)
<template> ... </template>
![Page 30: Desbravando Web Components](https://reader033.vdocuments.pub/reader033/viewer/2022052209/559813d91a28ab370a8b45b0/html5/thumbnails/30.jpg)
<polymer-element name="menu-tabs" noscript attributes="selected"> <template> ... </template> </polymer-element>
![Page 31: Desbravando Web Components](https://reader033.vdocuments.pub/reader033/viewer/2022052209/559813d91a28ab370a8b45b0/html5/thumbnails/31.jpg)
Shadow DomEsconder Detalhes de implementação
![Page 32: Desbravando Web Components](https://reader033.vdocuments.pub/reader033/viewer/2022052209/559813d91a28ab370a8b45b0/html5/thumbnails/32.jpg)
<video src="video.mp4" controls></video>
![Page 33: Desbravando Web Components](https://reader033.vdocuments.pub/reader033/viewer/2022052209/559813d91a28ab370a8b45b0/html5/thumbnails/33.jpg)
Encapsula style, marcação e script
![Page 34: Desbravando Web Components](https://reader033.vdocuments.pub/reader033/viewer/2022052209/559813d91a28ab370a8b45b0/html5/thumbnails/34.jpg)
HTML ImportsCarregar Web Components
![Page 35: Desbravando Web Components](https://reader033.vdocuments.pub/reader033/viewer/2022052209/559813d91a28ab370a8b45b0/html5/thumbnails/35.jpg)
exemplo
<link rel="stylesheet" href="bootstrap.css"> <link rel="stylesheet" href="font.css"> <script src="jquery.js"></script> <script src="bootstrap.js"></script> <script src="bootstrap-tooltip.js"></script> <script src="bootstrap-dropdown.js"></script>
![Page 36: Desbravando Web Components](https://reader033.vdocuments.pub/reader033/viewer/2022052209/559813d91a28ab370a8b45b0/html5/thumbnails/36.jpg)
exemplo
<link rel="import" href="bootstrap.html">
![Page 37: Desbravando Web Components](https://reader033.vdocuments.pub/reader033/viewer/2022052209/559813d91a28ab370a8b45b0/html5/thumbnails/37.jpg)
Suporte a Web Components
![Page 38: Desbravando Web Components](https://reader033.vdocuments.pub/reader033/viewer/2022052209/559813d91a28ab370a8b45b0/html5/thumbnails/38.jpg)
tjonrimmer.github.io/are-‐we-‐componen4zed-‐yet/
![Page 39: Desbravando Web Components](https://reader033.vdocuments.pub/reader033/viewer/2022052209/559813d91a28ab370a8b45b0/html5/thumbnails/39.jpg)
![Page 40: Desbravando Web Components](https://reader033.vdocuments.pub/reader033/viewer/2022052209/559813d91a28ab370a8b45b0/html5/thumbnails/40.jpg)
![Page 41: Desbravando Web Components](https://reader033.vdocuments.pub/reader033/viewer/2022052209/559813d91a28ab370a8b45b0/html5/thumbnails/41.jpg)
tpolymer-‐project.org
![Page 42: Desbravando Web Components](https://reader033.vdocuments.pub/reader033/viewer/2022052209/559813d91a28ab370a8b45b0/html5/thumbnails/42.jpg)
![Page 43: Desbravando Web Components](https://reader033.vdocuments.pub/reader033/viewer/2022052209/559813d91a28ab370a8b45b0/html5/thumbnails/43.jpg)
![Page 44: Desbravando Web Components](https://reader033.vdocuments.pub/reader033/viewer/2022052209/559813d91a28ab370a8b45b0/html5/thumbnails/44.jpg)
core-‐elements
![Page 45: Desbravando Web Components](https://reader033.vdocuments.pub/reader033/viewer/2022052209/559813d91a28ab370a8b45b0/html5/thumbnails/45.jpg)
Visual<core-‐toolbar>
<core-‐header-‐panel> <core-‐drawer-‐panel>
<core-‐menu> <core-‐icon>
<core-‐overlay>
....
não Visual<core-‐ajax>
<core-‐localstorage> <core-‐range>
<core-‐shared-‐lib> <core-‐media-‐query>
<core-‐iconset>
....
![Page 46: Desbravando Web Components](https://reader033.vdocuments.pub/reader033/viewer/2022052209/559813d91a28ab370a8b45b0/html5/thumbnails/46.jpg)
hbp://goo.gl/5Tiy9U
![Page 47: Desbravando Web Components](https://reader033.vdocuments.pub/reader033/viewer/2022052209/559813d91a28ab370a8b45b0/html5/thumbnails/47.jpg)
paper-‐elements
![Page 48: Desbravando Web Components](https://reader033.vdocuments.pub/reader033/viewer/2022052209/559813d91a28ab370a8b45b0/html5/thumbnails/48.jpg)
Polymer Paper Elements
bubons inputs tabs cards panels ....
![Page 49: Desbravando Web Components](https://reader033.vdocuments.pub/reader033/viewer/2022052209/559813d91a28ab370a8b45b0/html5/thumbnails/49.jpg)
Quem está
Usando
![Page 50: Desbravando Web Components](https://reader033.vdocuments.pub/reader033/viewer/2022052209/559813d91a28ab370a8b45b0/html5/thumbnails/50.jpg)
![Page 51: Desbravando Web Components](https://reader033.vdocuments.pub/reader033/viewer/2022052209/559813d91a28ab370a8b45b0/html5/thumbnails/51.jpg)
Açúcar Sintá3co Custom Elements
![Page 52: Desbravando Web Components](https://reader033.vdocuments.pub/reader033/viewer/2022052209/559813d91a28ab370a8b45b0/html5/thumbnails/52.jpg)
document.registerElement('paper-tabs', { prototype: Object.create( HTMLElement.prototype ) });
vanilla
![Page 53: Desbravando Web Components](https://reader033.vdocuments.pub/reader033/viewer/2022052209/559813d91a28ab370a8b45b0/html5/thumbnails/53.jpg)
<polymer-element name="paper-tabs"> ... </polymer-element>
polymer
![Page 54: Desbravando Web Components](https://reader033.vdocuments.pub/reader033/viewer/2022052209/559813d91a28ab370a8b45b0/html5/thumbnails/54.jpg)
<paper-tabs></paper-tabs> // document.createElement('paper-tabs');
Usando
![Page 55: Desbravando Web Components](https://reader033.vdocuments.pub/reader033/viewer/2022052209/559813d91a28ab370a8b45b0/html5/thumbnails/55.jpg)
Açúcar Sintá3co Template
![Page 56: Desbravando Web Components](https://reader033.vdocuments.pub/reader033/viewer/2022052209/559813d91a28ab370a8b45b0/html5/thumbnails/56.jpg)
<template> ... </template>
vanilla
![Page 57: Desbravando Web Components](https://reader033.vdocuments.pub/reader033/viewer/2022052209/559813d91a28ab370a8b45b0/html5/thumbnails/57.jpg)
<polymer-element name="list-users" noscript> <template> <ul> <template repeat="{{user, i in users}}"> <li>{{user.name}}</li> </template> </ul> </template> </polymer-element>
polymer
![Page 58: Desbravando Web Components](https://reader033.vdocuments.pub/reader033/viewer/2022052209/559813d91a28ab370a8b45b0/html5/thumbnails/58.jpg)
Açúcar Sintá3co Shadow Dom
![Page 59: Desbravando Web Components](https://reader033.vdocuments.pub/reader033/viewer/2022052209/559813d91a28ab370a8b45b0/html5/thumbnails/59.jpg)
var shadow = el.createShadowRoot();
shadow.innerHTML = '<h2>I`m a profile-card</h2>';
vanilla
![Page 60: Desbravando Web Components](https://reader033.vdocuments.pub/reader033/viewer/2022052209/559813d91a28ab370a8b45b0/html5/thumbnails/60.jpg)
<polymer-element name="profile-card" noscript> <template> <link rel="stylesheet" href="styles.css"> <h2>I'm a profile-card</h2> </template> </polymer-element>
polymer
![Page 61: Desbravando Web Components](https://reader033.vdocuments.pub/reader033/viewer/2022052209/559813d91a28ab370a8b45b0/html5/thumbnails/61.jpg)
Você ainda pode Estender elementos já existentes
![Page 62: Desbravando Web Components](https://reader033.vdocuments.pub/reader033/viewer/2022052209/559813d91a28ab370a8b45b0/html5/thumbnails/62.jpg)
<polymer-element name="x-button" extends="button"> <template> </template> <script> Polymer('x-button', { }); </script> </polymer-element>
polymer
![Page 63: Desbravando Web Components](https://reader033.vdocuments.pub/reader033/viewer/2022052209/559813d91a28ab370a8b45b0/html5/thumbnails/63.jpg)
como não se tornar um zumbi
![Page 64: Desbravando Web Components](https://reader033.vdocuments.pub/reader033/viewer/2022052209/559813d91a28ab370a8b45b0/html5/thumbnails/64.jpg)
algumas coisas que podem Ajudar
![Page 65: Desbravando Web Components](https://reader033.vdocuments.pub/reader033/viewer/2022052209/559813d91a28ab370a8b45b0/html5/thumbnails/65.jpg)
th,p://webcomponents.org/
![Page 66: Desbravando Web Components](https://reader033.vdocuments.pub/reader033/viewer/2022052209/559813d91a28ab370a8b45b0/html5/thumbnails/66.jpg)
th,p://customelements.io/
![Page 67: Desbravando Web Components](https://reader033.vdocuments.pub/reader033/viewer/2022052209/559813d91a28ab370a8b45b0/html5/thumbnails/67.jpg)
th,ps://github.com/mateusor)z/webcomponents-‐the-‐right-‐way
![Page 68: Desbravando Web Components](https://reader033.vdocuments.pub/reader033/viewer/2022052209/559813d91a28ab370a8b45b0/html5/thumbnails/68.jpg)
como começar um component
![Page 69: Desbravando Web Components](https://reader033.vdocuments.pub/reader033/viewer/2022052209/559813d91a28ab370a8b45b0/html5/thumbnails/69.jpg)
tgithub.com/webcomponents/polymer-‐boilerplate
![Page 70: Desbravando Web Components](https://reader033.vdocuments.pub/reader033/viewer/2022052209/559813d91a28ab370a8b45b0/html5/thumbnails/70.jpg)
th,ps://github.com/webcomponents/generator-‐element
![Page 71: Desbravando Web Components](https://reader033.vdocuments.pub/reader033/viewer/2022052209/559813d91a28ab370a8b45b0/html5/thumbnails/71.jpg)
Em poucas palavras...
![Page 72: Desbravando Web Components](https://reader033.vdocuments.pub/reader033/viewer/2022052209/559813d91a28ab370a8b45b0/html5/thumbnails/72.jpg)
encapsulamento e reaproveitamento de código de verdade
![Page 73: Desbravando Web Components](https://reader033.vdocuments.pub/reader033/viewer/2022052209/559813d91a28ab370a8b45b0/html5/thumbnails/73.jpg)
Inventa o Futuro
![Page 74: Desbravando Web Components](https://reader033.vdocuments.pub/reader033/viewer/2022052209/559813d91a28ab370a8b45b0/html5/thumbnails/74.jpg)
![Page 75: Desbravando Web Components](https://reader033.vdocuments.pub/reader033/viewer/2022052209/559813d91a28ab370a8b45b0/html5/thumbnails/75.jpg)
Obrigado
TWITTER.COM/MTEUSORTIZGITHUB.COM/MATEUSORTIZ