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

Larissa Abreu

November 17, 2018
Tweet

More Decks by Larissa Abreu

Other Decks in Programming

Transcript

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

    View Slide

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

    View Slide

  3. Por onde começar?

    View Slide

  4. View Slide

  5. Componentes?
    No Front-end

    View Slide

  6. View Slide

  7. Web Components?

    View Slide

  8. index.html









    Nativo!

    View Slide

  9. Como?
    Especificações W3C

    View Slide



  10. Custom Elements
    Shadow DOM
    Imports
    Template

    View Slide

  11. Shadow DOM
    Escopo nativo do CSS

    View Slide

  12. View Slide

  13. O que é Polymer?
    Pelo time do Polymer

    View Slide

  14. View Slide

  15. ???????

    View Slide

  16. 2013

    View Slide

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


    View Slide

  18. Dezembro 2013
    Web Components
    Hype
    ? ? ? ?

    View Slide

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

    View Slide

  20. 2014

    View Slide

  21. Novembro 2014
    Polymer 0.5
    Experiments
    ? ? ? ?

    View Slide

  22. caniuse.com/#feat=template

    View Slide

  23. 2015

    View Slide

  24. Maio 2015
    Polymer 1.0
    Ready to production
    ?

    View Slide

  25. Shadow DOM v0
    Custom Elements v0
    Os
    Problemas

    View Slide

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

    View Slide

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

    View Slide

  28. Como resolver?
    Melhorando a plataforma

    View Slide

  29. Shadow DOM v1
    Custom Elements v1

    View Slide

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

    View Slide

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

    View Slide

  32. 2017

    View Slide

  33. Maio 2017
    Polymer 2.0
    Do less magic
    ?
    ES6
    Classes
    Modo
    Híbrido

    View Slide

  34. https://caniuse.com/#feat=imports

    View Slide

  35. Como resolver?
    Olhando para a plataforma

    View Slide

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

    View Slide

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

    View Slide

  38. Último problema!
    Gerenciamento de dependências

    View Slide

  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

    View Slide

  40. github.com/bower/bower/issues/2298

    View Slide

  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

    View Slide

  42. Hoje

    View Slide

  43. Polymer 3.0
    Is here!
    ES

    View Slide

  44. Google IO - 09/05/2018

    View Slide

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

    View Slide

  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

    View Slide

  47. index.html










    View Slide

  48. View Slide

  49. Utilizando propriedades

    View Slide

  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);

    View Slide

  51. index.html










    View Slide

  52. View Slide

  53. Ciclo de vida

    View Slide

  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);

    View Slide

  55. Com o Polymer

    View Slide

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

    View Slide

  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`
    BrazilJS on the Road [[local]]
    `;
    };

    View Slide

  58. Focando na Plataforma

    View Slide

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

    View Slide

  60. A11y Aria roles
    Aria states
    Focus
    Controle via teclado

    View Slide

  61. A11y

    View Slide

  62. Testes Unitários
    Regressão visual
    Lint

    View Slide

  63. Testes

    View Slide

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

    View Slide

  65. Performance Ready ()
    AfterNextRender()
    LitHTML

    View Slide

  66. API estilo
    Custom properties

    View Slide

  67. API JS
    ReflectToAttribute
    Observer

    View Slide

  68. muito
    E
    MAIS!

    View Slide

  69. Cross Stack?

    View Slide

  70. View Slide

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

    View Slide

  72. Design system Valle

    View Slide

  73. Suporte?

    View Slide

  74. View Slide

  75. View Slide

  76. Quem usa?

    View Slide

  77. +6000 Components

    View Slide

  78. youtube.com/new

    View Slide

  79. twitter.com/AJStacy06/status/857628546507968512


    View Slide

  80. "Ter componentes acessíveis, testados e
    performáticos é o primeiro passo para
    que sua aplicação também seja!"
    - Larissa Abreu

    View Slide

  81. Thanks!
    #UseThePlatform
    @TheSweet_Lari
    @LarissaAbreu
    larissaabreu.github.io

    View Slide