Desbravando Web Components
75
Desbravando Web Components @mteusor)z
-
Upload
mateus-ortiz -
Category
Technology
-
view
282 -
download
0
description
Apresentada no GDG Recife - itshackademic Desbravamos Web Components e Polymer, mostrando as especificação, com muito live code e toda a mágica de Web Components.
Transcript of Desbravando Web Components
Desbravando Web Components
@mteusor)z
@mteusor3z
mateusor3z
Como "criar" um componente hoje
Google! plugin jQuery
Copie e cole o código do plugin
Funcionou? Beleza
Web Components
<gdg-‐recife>
h"ps://github.com/mateusor3z/gdg-‐light
googlewebcomponents.github.io
Live demo
<google-‐map>
h"ps://github.com/GoogleWebComponents/google-‐map
<google-‐chart>
h"ps://github.com/GoogleWebComponents/google-‐chart
Web Components
Shadow DOM
TemplateCustom Elements
HTML Imports
Decorators*
Custom ElementsDefine novos elementos HTML/DOM
Criar Novos Elementos
<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>
<!-- 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>
<menu-tabs></menu-tabs>
Usando o elemento
Estendendo elementos existes
<!-- 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>
Lifecycle Callbacks Polymer
created();
detached();a"ributeChanged();
a"ached();
TemplateTemplate client-‐side na3vo
HTML Templates
parseado, não é renderizadoconteúdo inerteUsa Dom como scaffold
<template> ... </template>
<polymer-element name="menu-tabs" noscript attributes="selected"> <template> ... </template> </polymer-element>
Shadow DomEsconder Detalhes de implementação
<video src="video.mp4" controls></video>
Encapsula style, marcação e script
HTML ImportsCarregar Web Components
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>
exemplo
<link rel="import" href="bootstrap.html">
Suporte a Web Components
tjonrimmer.github.io/are-‐we-‐componen4zed-‐yet/
tpolymer-‐project.org
core-‐elements
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>
....
hbp://goo.gl/5Tiy9U
paper-‐elements
Polymer Paper Elements
bubons inputs tabs cards panels ....
Quem está
Usando
Açúcar Sintá3co Custom Elements
document.registerElement('paper-tabs', { prototype: Object.create( HTMLElement.prototype ) });
vanilla
<polymer-element name="paper-tabs"> ... </polymer-element>
polymer
<paper-tabs></paper-tabs> // document.createElement('paper-tabs');
Usando
Açúcar Sintá3co Template
<template> ... </template>
vanilla
<polymer-element name="list-users" noscript> <template> <ul> <template repeat="{{user, i in users}}"> <li>{{user.name}}</li> </template> </ul> </template> </polymer-element>
polymer
Açúcar Sintá3co Shadow Dom
var shadow = el.createShadowRoot();
shadow.innerHTML = '<h2>I`m a profile-card</h2>';
vanilla
<polymer-element name="profile-card" noscript> <template> <link rel="stylesheet" href="styles.css"> <h2>I'm a profile-card</h2> </template> </polymer-element>
polymer
Você ainda pode Estender elementos já existentes
<polymer-element name="x-button" extends="button"> <template> </template> <script> Polymer('x-button', { }); </script> </polymer-element>
polymer
como não se tornar um zumbi
algumas coisas que podem Ajudar
th,p://webcomponents.org/
th,p://customelements.io/
th,ps://github.com/mateusor)z/webcomponents-‐the-‐right-‐way
como começar um component
tgithub.com/webcomponents/polymer-‐boilerplate
th,ps://github.com/webcomponents/generator-‐element
Em poucas palavras...
encapsulamento e reaproveitamento de código de verdade
Inventa o Futuro
Obrigado
TWITTER.COM/MTEUSORTIZGITHUB.COM/MATEUSORTIZ
