Web Components - usando o melhor do navegador

The Developer Conference - POA - 2018. Pareando com Sarah Caixeta.

Existem diversos frameworks e bibliotecas para a criação de aplicações frontend, tanto que muitas vezes utilizamos sem pensar se realmente precisamos de todos os recursos que eles oferecem. As funcionalidades já entregues pelo navegador podem ser mais que suficientes para distintos contextos. Nessa palestra falamos como WebComponents podem fazer parte da solução para seu próximo, ou atual, projeto. Apresentamos as especificações envolvidas (Custom Elements, Shadow DOM, HTML Template), formas de uso, como compartilhamento de componentes, interoperabilidade entre distintos frameworks, aplicação em Micro Frontends e o que vem por aí na área.

Transcript

1. Web Components Usando o melhor do navegador por Sarah Caixeta e Roberto Soares 1 / 27
2. Agenda O que são Web Components? Para que servem? Trabalhando com Web Components O que vem por aí? Web Components 2 / 27
3. O que são Web Components? 3 / 27
4. Elementos nativos <p></p> <input /> <audio>...</audio> <video>...</video> Seus elementos <profile-avatar></profile-avatar> <like-button></like-button> Web Components 4 / 27
5. Exemplo <div class="profile-avatar"> <a href="..."> <img src="..." alt="..." /> <span class="name">...</span> </a> </div> <script> <!-- ainda tendo que indicar as informações a serem apresentadas --> </script> Web Components 5 / 27
6. class ProfileAvatar extends HTMLElement { connectedCallback() { this.innerHTML = ` <div class="profile-avatar"> <a href="..."> <img src="..." alt="..." /> <span class="name">...</span> </a> </div>` } } customElements.define('profile-avatar', ProfileAvatar) <profile-avatar></profile-avatar> Web Components 6 / 27
7. HTML Templates <template id="profile-avatar"> <style> a { color: blue } </style> <a> <img src="..." alt="..." /> <span class="name">...</span> </a> </template> Web Components 7 / 27
8. Usando o template class ProfileAvatar extends HTMLElement { constructor() { const template = document.getElementById('profile-avatar').content this.appendChild(template.cloneNode(true)); } connectedCallback() { this.querySelector('a').href = '/my-profile' // ... } } Web Components 8 / 27
9. h1 { color: red; } Web Components 9 / 27
10. Shadow DOM class ProfileAvatar extends HTMLElement { connectedCallback() { const content = ... const shadow = this.attachShadow({mode: 'open'}) shadow.appendChild(content) } } Web Components 10 / 27
11. Web Components Conjunto de especificações da W3C Custom Element Shadow DOM Templates Web Components 11 / 27
12. Para que servem? 12 / 27
13. Compartilhar componentes Web Components 13 / 27
14. Criar aplicações <ytd-app style="--ytd-masthead-height:56px;"> <yt-activity-manager class="style-scope ytd-app"> </yt-activity-manager> <yt-guide-manager id="guide-service" class="style-scope ytd-app"> </yt-guide-manager> <yt-gfeedback-manager class="style-scope ytd-app"> </yt-gfeedback-manager> </ytd-app> Web Components 14 / 27
15. Micro frontends Compor aplicações micro-frontends.org Ferramentas: OpenComponents plastic-bag Web Components 15 / 27
16. Trabalhando com WebComponents 16 / 27
17. Vanilla Ecossistema JS Webpack Babel TypeScript Lifecycle constructor connectedCallback attributeChangedCallback (observedAttributes) disconnectedCallback Polyfills Web Components 17 / 27
18. Web Components 18 / 27
19. Web Components 19 / 27
20. Web Components 20 / 27
21. Web Components 21 / 27
22. O que vem por aí? 22 / 27
23. Outra versão? Sem previsão Custom Elements: 2 versões v0, v1 Angular: 136 versões React: 173 versões 0.0.1, 0.0.2, 0.0.3, 0.2.0, ... 0.14.7, 15.0.0, ..., 16.7.0-alpha.2 Web Components 23 / 27
24. Aumento do suporte Polymer lit-element lit-html Vue Wrapper Build target Svelte Componentes com opção tag Web Components 24 / 27
25. Empacotar WebAssembly Web Components 25 / 27
26. Obrigada(o)! Perguntas? 26 / 27
27. Referências caniuse.com https://www.webcomponents.org/ https://cli.vuejs.org/guide/build-targets.html#web-component https://svelte.technology/guide#custom-elements https://micro-frontends.org/ https://medium.com/coinmonks/develop-w3c-web-components-with-webassembly- d65938284255 https://itnext.io/the-promise-of-webcomponents-webassembly-ad26af56fcf1 Web Components 27 / 27