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

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