Desbravando Web Components

Post on 05-Jul-2015

282 views 0 download

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

Google

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