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. Guia prático para
    Componentes
    Perfeitos

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

    View Slide

  47. index.html










    View Slide

  48. View Slide

  49. Utilizando propriedades

    View Slide

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

    View Slide

  51. index.html










    View Slide

  52. View Slide

  53. Ciclo de vida

    View Slide

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

    View Slide

  55. Com o Polymer

    View Slide

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

    View Slide

  57. 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`
    Front in [[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 (semantic)
    Aria states (behavior)
    Focus
    Controle via teclado
    Testes de acessibilidade

    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
    “Do less, be lazy”

    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. https://larissaabreu.github.io/web-components-good-practices/

    View Slide

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

    View Slide

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

    View Slide