Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Web Components: é o Futuro?

Web Components: é o Futuro?

Descubra como esse conceito formado por quatro novas especificações (Templates, Shadow DOM, Custom Elements, Imports) irá revolucionar o modo como desenvolvemos e interagimos na web e como frameworks como Polymer da Google e X-Tag da Mozilla pode torná-lo ainda mais fácil trabalhar com esta nova tecnologia.

Mateus Ortiz

May 14, 2015
Tweet

More Decks by Mateus Ortiz

Other Decks in Programming

Transcript

  1.                    

             Templates     são  pedaços                                inertes  de  DOM     que  podem  ser                            reu>lizados.  
  2. vanilla <template> ... </template> polymer <polymer-element name="" noscript> <template> <ul>

    <template repeat="{{user,i in users"> <li>{{user.name}}</li> </template> </ul> </template> </polymer-element>
  3. vanilla polymer var shadow = el.createShadowRoot(); shadow.innerHTML = "<b>I'm a

    profile-card</b>"; <polymer-element name="profile-card" noscript> <template> <b>I'm a profile-card</b> </template> </polymer-element>
  4. vanilla polymer var content = "<style>h3 { color: red; }</style>\

    <b>I'm a profile-card</b>"; el.createShadowRoot().innerHTML = content;
  5. vanilla polymer var content = "<style>h3 { color: red; }</style>\

    <b>I'm a profile-card</b>"; el.createShadowRoot().innerHTML = content; <polymer-element name="profile-card" noscript> <template> <style>h3 { color: red; }</style> <b>I'm a profile-card</b> </template> </polymer-element>
  6. Shadow  Dom  exemplo Mateus  Or*z Front-­‐end  Developer @mteusor*z <profile-card></profile-card> <polymer-element

    name="profile-card" noscript> <template> <style> img { width: 200px; height: 200px; } </style> <img src="e51_w.jpg"> <h1>Mateus Ortiz</h1> <h2>Front-end Developer</h2> <a href="https://twitter.com/mteusortiz">@mteusortiz</a> </template> </polymer-element>
  7. Exemplo:  Bootstrap <link rel="stylesheet" href="bootstrap.css"> <link rel="stylesheet" href="fonts.css"> <script src="jquery.js"></script>

    <script src="bootstrap.js"></script> <script src="bootstrap-tooltip.js"></script> <script src="bootstrap-dropdown.js"></script>
  8. "   é  fácil  escrever  o  código  que  um  navegador

      entende.  Bons  desenvolvedores  escrevem   código  que  as  pessoas  possam  entender. " Addy
  9. 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>   ....
  10. <dom-module id="profile-card"> <style> /* CSS rules for your element */

    </style> <template> <!-- local DOM for your element --> <div>{{greeting}}</div> <!-- data bindings in local DOM --> </template> </dom-module> <script> // element registration Polymer({ is: "profile-card", // add properties and methods on the element's prototype properties: { // declare properties for the element's public API greeting: { type: String, value: "Hello!" } } }); </script>
  11. Leve  calço  no  Shadow  Dom   chamado  Shady Dom,  que

      permite  evitar  a  complexidade,   o  tamanho  e  a  perca  de   performance
  12. Os  elementos  de  um  template   pode  ser  repe?dos  

    automa?camente  com  o   elemento  personalizado   chamado  x-­‐repeat.
  13. <dom-module id="profile-list"> <template> <div> Profiles list: </div> <template is="x-repeat" items="{{profiles}}">

    <div>First name: <span>{{item.first}}</span></div> <div>Last name: <span>{{item.last}}</span></div> </template> </template> </dom-module> <script> Polymer({ is: 'profile-list', ready: function() { this.profiles = [ {first: 'Bob', last: 'Smith'}, {first: 'Sally', last: 'Johnson'}, ... ]; } }); </script>
  14. Encapsulamento isolamento  de  marcação,  es?lo  e  lógica   de  comportamento

     para  que  eles  não   vazem  para  o  resto  da  página.
  15. class CustomElement extends HTMLElement { // Fires when an instance

    of the element is created. createdCallback() {}; // Fires when an was inserted into the document. attachedCallback() {}; // Fires when an instance was removed from the document. detachedCallback() {}; // Fires when an attribute was added, removed, or updated. attributeChangedCallback(attr, oldVal, newVal) {}; } document.registerElement('custom-element', CustomElement); Boilerplate  básico hPps:/ /github.com/mateusorCz/element-­‐es6/
  16. Time Mateus   Or>z Addy   Osmani Rob   Dodson

    Erik   Isaksen Ciro   Nunes