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

Guia prático para criação de componentes perfeitos

Guia prático para criação de componentes perfeitos

Venha comigo falar sobre os passos fundamentais para criar componentes que sejam fáceis de customizar, tenham uma boa performance, sejam impecáveis na questão acessibilidade, ainda por cima não sejam impossíveis de fazer manutenções que com certeza aparecerão e muito mais.

Ps.: E tudo isso sem depender de nenhum framework ;)

Larissa Abreu

December 01, 2018
Tweet

More Decks by Larissa Abreu

Other Decks in Programming

Transcript

  1. index.html <!doctype html> <html> <head> </head> <body> </body> </html> <link

    rel="import" href=“front-in.html”> <front-in></front-in> Nativo!
  2. De volta para 2013 VS Management dependencies Solve version conflicts

    Flat dependencies tree Active Community Management dependencies Solve version conflicts Flat dependencies tree Active Community
  3. Hoje em dia VS Management dependencies Solve version conflicts Flat

    dependencies tree Active Community Management dependencies Solve version conflicts Flat dependencies tree Active Community
  4. class FrontIn extends HTMLElement { } constructor() { super(); }

    customElements.define('front-in', FrontIn); shadowroot.appendChild(h1); const shadowroot = this.attachShadow({mode: ‘open'}); const h1 = document.createElement('h1'); h1.innerText = ‘Front in’; front-in.js
  5. index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> </head> <body>

    </body> </html> <front-in></front-in> <script type="module" src=“front-in.js"></script>
  6. front-in.js class FrontIn extends HTMLElement { constructor() { super(); const

    shadowroot = this.attachShadow({mode: 'open'}); const h1 = document.createElement('h1'); const local = this.getAttribute('local'); h1.innerText = ‘Front in ' + local; shadowroot.appendChild(h1); } } customElements.define('front-in', FrontIn);
  7. index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> </head> <body>

    <front-in local=“Floripa"></front-in> <script type="module" src=“front-in.js"></script> </body> </html>
  8. front-in.js class FrontIn extends HTMLElement { constructor() { super(); const

    shadowroot = this.attachShadow({mode: 'open'}); const h1 = document.createElement('h1'); const local = this.getAttribute('local'); h1.innerText = 'Front in ' + local; shadowroot.appendChild(h1); } connectedCallback() { // Conectado ao DOM } } customElements.define('front-in', FrontIn);
  9. front-in.js class FrontIn extends PolymerElement { }; customElements.define('front-in', FrontIn); import

    { html, PolymerElement } from '@polymer/polymer/polymer-element.js'; static get properties() { return { local: String }; }; static get template() { return html` <h1>Front in [[local]]</h1> `; };
  10. "Ter componentes acessíveis, testados e performáticos é o primeiro passo

    para que sua aplicação também seja!" - Larissa Abreu