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

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. 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. View Slide

21. Novembro 2014
    Polymer 0.5
    Experiments
    ? ? ? ?
    

    View Slide

22. caniuse.com/#feat=template
    

    View Slide

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