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

Web Components: fazendo do futuro uma realidade...

Web Components: fazendo do futuro uma realidade através do JS - Brasília

Já se perguntou se é possível criar componentes que não dependem de frameworks mas que podem ser usados em qualquer um deles? Já ouviu alguém falando que no futuro poderíamos criar novas tags HTML do jeito que quiséssemos? Esse futuro chegou! Nessa apresentação desbravamos essas “terras novas” e agora podemos ser um dos primeiros a abandonar o passado com a ajuda do Polymer, Atomic Design e um pouquinho de amor.

Links:
Artigos sobre Polymer 3 - https://medium.com/larissaabreu

Larissa Abreu

November 17, 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=“brazil-js.html”> <brazil-js></brazil-js> 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 BrazilJs extends HTMLElement { } constructor() { super(); }

    customElements.define('brazil-js', BrazilJs); shadowroot.appendChild(h1); const shadowroot = this.attachShadow({mode: ‘open'}); const h1 = document.createElement('h1'); h1.innerText = 'BrazilJS on the Road'; brazil-js.js
  5. index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> </head> <body>

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

    shadowroot = this.attachShadow({mode: 'open'}); const h1 = document.createElement('h1'); const local = this.getAttribute('local'); h1.innerText = 'BrazilJS on the Road ' + local; shadowroot.appendChild(h1); } } customElements.define('brazil-js', BrazilJs);
  7. index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> </head> <body>

    <brazil-js local=“Brasília"></brazil-js> <script type="module" src="brazil-js.js"></script> </body> </html>
  8. brazil-js.js class BrazilJs extends HTMLElement { constructor() { super(); const

    shadowroot = this.attachShadow({mode: 'open'}); const h1 = document.createElement('h1'); const local = this.getAttribute('local'); h1.innerText = 'BrazilJS on the Road ' + local; shadowroot.appendChild(h1); } connectedCallback() { // Conectado ao DOM } } customElements.define('brazil-js', BrazilJs);
  9. brazil-js.js class BrazilJs extends PolymerElement { }; customElements.define('brazil-js', BrazilJs); import

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

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