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

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

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

251c46a689557c394ceb553775e7ad3a?s=128

Larissa Abreu

November 17, 2018
Tweet

Transcript

  1. Web components Fazendo do futuro uma realidade através do JavaScript

  2. @TheSweet_Lari Gamer, future Suicide Girl and Front-end Dev Larissa Abreu

    @LarissaAbreu larissaabreu.github.io
  3. Por onde começar?

  4. None
  5. Componentes? No Front-end

  6. None
  7. Web Components?

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

    rel="import" href=“brazil-js.html”> <brazil-js></brazil-js> Nativo!
  9. Como? Especificações W3C

  10. <link rel="import" href=“brazil-js.html”> <brazil-js></brazil-js> Custom Elements Shadow DOM Imports Template

  11. Shadow DOM Escopo nativo do CSS

  12. None
  13. O que é Polymer? Pelo time do Polymer

  14. None
  15. ???????

  16. 2013

  17. youtube.com/watch?v=7Q0-E_rZ_Cc&t


  18. Dezembro 2013 Web Components Hype ? ? ? ?

  19. O que aconteceu? Por que ninguém conhece?

  20. 2014

  21. Novembro 2014 Polymer 0.5 Experiments ? ? ? ?

  22. caniuse.com/#feat=template

  23. 2015

  24. Maio 2015 Polymer 1.0 Ready to production ?

  25. Shadow DOM v0 Custom Elements v0 Os Problemas

  26. https://caniuse.com/#feat=custom-elements

  27. https://caniuse.com/#feat=shadowdom

  28. Como resolver? Melhorando a plataforma

  29. Shadow DOM v1 Custom Elements v1

  30. https://caniuse.com/#feat=custom-elementsv1

  31. https://caniuse.com/#feat=shadowdomv1

  32. 2017

  33. Maio 2017 Polymer 2.0 Do less magic ? ES6 Classes

    Modo Híbrido
  34. https://caniuse.com/#feat=imports

  35. Como resolver? Olhando para a plataforma

  36. ES Modules import myComponent from ‘./my-component.js' jakearchibald.com/2017/es-modules-in-browsers

  37. ES https://caniuse.com/#feat=es6-module

  38. Último problema! Gerenciamento de dependências

  39. 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
  40. github.com/bower/bower/issues/2298

  41. Hoje em dia VS Management dependencies Solve version conflicts Flat

    dependencies tree Active Community Management dependencies Solve version conflicts Flat dependencies tree Active Community
  42. Hoje

  43. Polymer 3.0 Is here! ES

  44. Google IO - 09/05/2018

  45. Na prática Criando web component (vanilla)

  46. 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
  47. 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>
  48. None
  49. Utilizando propriedades

  50. 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);
  51. 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>
  52. None
  53. Ciclo de vida

  54. 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);
  55. Com o Polymer

  56. yarn add @polymer/polymer //12k

  57. 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> `; };
  58. Focando na Plataforma

  59. boas práticas? web components Como te ajuda com

  60. A11y Aria roles Aria states Focus Controle via teclado

  61. A11y

  62. Testes Unitários Regressão visual Lint

  63. Testes

  64. boas práticas? Polymer Como te ajuda com

  65. Performance Ready () AfterNextRender() LitHTML

  66. API estilo Custom properties

  67. API JS ReflectToAttribute Observer

  68. muito E MAIS!

  69. Cross Stack?

  70. None
  71. Custom Elements Everywhere custom-elements-everywhere.com/

  72. Design system Valle

  73. Suporte?

  74. None
  75. None
  76. Quem usa?

  77. +6000 Components

  78. youtube.com/new

  79. twitter.com/AJStacy06/status/857628546507968512


  80. "Ter componentes acessíveis, testados e performáticos é o primeiro passo

    para que sua aplicação também seja!" - Larissa Abreu
  81. Thanks! #UseThePlatform @TheSweet_Lari @LarissaAbreu larissaabreu.github.io