){kind=small}
Introdução aos Componentes da Web
Tempo de leitura: 10 minutos
Frameworks e bibliotecas de JavaScript: todos concordamos que existem muitos deles. Angular, React, Vue, Svelte — a lista parece crescer a cada ano. Mas o que todos eles têm em comum? A resposta é que são usados para desenvolver Applications na web e oferecem a capacidade de criar componentes reutilizáveis.
E se você pudesse criar componentes com base em padrões da web já existentes, componentes que não dependessem da estrutura ou biblioteca usada para integrar tudo em uma Application? É aí que entram os Web Components.
Aqui estão algumas empresas das quais você talvez já tenha ouvido falar e que utilizam Web Components:
Logos of companies using Web Components. Google, Salesforce, Electronic Arts, Twitter, YouTube and GitHub
Google: diversas funcionalidades, incluindo a estrutura de componentes da web AMP (fonte)
Salesforce: Lightning Web Components (fonte)
Twitter: Tweets incorporados (fonte)
GitHub: O “Atualizado há” (fonte)
YouTube: O site foi desenvolvido utilizando Web Components (fonte)
Vamos nos aprofundar em como a Electronic Arts (EA) utiliza os Web Components. (fonte)
A EA é uma das maiores empresas de videogames, com mais de 22 estúdios e 10.000 funcionários em 30 locais espalhados pelo mundo. Nem é preciso dizer que ela lança muitos jogos (NBA Live, Star Wars, The Sims, Battlefield, etc.).
No início, a equipe da web adotou a abordagem de projetar e desenvolver o site de cada jogo de forma independente, um site por vez. Como você pode imaginar, isso resultou na falta de uma experiência coerente para os usuários que navegavam por todos os jogos oferecidos pela EA. Isso também dificultava o trabalho dos designers e desenvolvedores responsáveis pelos sites. Eles dedicavam 80% do tempo à “Web padrão” (ou seja, navegação, rodapés e galerias de mídia), em vez de criar experiências personalizadas para cada título de jogo.
Para inverter essa proporção, foi criado o Sistema de Design de Rede (NDS). Com o NDS, foi possível utilizar os componentes da Commodity Web e adicionar:
Recursos de personalização de temas
Capacidade de integração com qualquer linguagem e framework
Suporte à arquitetura de seus microsites
Fornecimento de Interface do Usuário como Serviço (UIaaS)
E você sabe quem mais provavelmente já usou Web Components?
Você. Já se perguntou como é possível que você possa simplesmente definir o atributo “src” em um <video> ou <audio> e ter um reprodutor totalmente funcional com botões, controle de volume, barra de progresso, cronômetro e outras opções? Componentes da Web.
Vamos dar uma olhada em um exemplo que é igualmente fácil de usar, mas que envolve muito mais processos nos bastidores — o model-viewer desenvolvido pelo Google.
Aqui está o código necessário para exibir um modelo 3D:
<!-- Import the component -->
<a href="https://unpkg.com/@google/model-viewer/dist/model-viewer.js">https://unpkg.com/@google/model-viewer/dist/model-viewer.js</a>
<a href="https://unpkg.com/@google/model-viewer/dist/model-viewer-legacy.js">https://unpkg.com/@google/model-viewer/dist/model-viewer-legacy.js</a>
<!-- Use it like any other HTML element -->
<model-viewer src="shared-assets/models/Astronaut.glb" alt="A 3D model of an astronaut" auto-rotate camera-controls></model-viewer>Com uma simples tag HTML, você pode incorporar um modelo 3D sem precisar ter conhecimento de WebGL e da API WebXR Device.
Aqui está o componente Web “model-viewer” implementado com e sem o uso de um framework ou biblioteca:
Espero que, ao ver quem está usando os Web Components e o que pode ser criado com eles, você agora esteja com vontade de saber como criar os seus próprios.
Conforme mencionado anteriormente, os Web Components são baseados em padrões da Web. Essas APIs de baixo nível consistem em:
Elementos personalizados
Shadow DOM
Modelos HTML
API de Elementos Personalizados: Permite registrar um elemento personalizado na página.
Deve incluir um hífen/traço (no formato “kebab-case”), por exemplo, my-custom-element. Não são permitidos elementos compostos por uma única palavra, para evitar conflitos de nomes.
É um objeto de classe que define seu comportamento.
Também determina quais elementos embutidos — se houver — os elementos personalizados estendem, ou seja, input (HTMLInputElement), button (HTMLButtonElement), etc.
API do Shadow DOM: Oferece um método para associar um DOM separado a um elemento
Ele oferece encapsulamento para manter o estilo, a estrutura e o comportamento separados do código externo. Ajuda a “...conter o que é desagradável” — Paul Lewis (fonte)
Permite remapear eventos, ou seja, transformar um evento de clique em algo mais significativo.
API de modelos HTML: Cria um modelo flexível que será inserido no shadow DOM dos elementos personalizados.
o
<template>conteúdo do elemento não é renderizado imediatamente. Definimos a estrutura HTML antecipadamente e a clonamos quando necessário por meio do JavaScript.Utilizado para renderizar HTML de forma eficiente e atualizá-lo quando o usuário interage com nosso componente web.
Para modelos mais complexos, pode ser mais fácil usar uma biblioteca, um framework ou uma ferramenta.
Aqui está um exemplo de Web Component que criei, com comentários para ajudar a explicar o que está acontecendo.
Se você está se perguntando sobre a compatibilidade com navegadores, os Web Components são compatíveis com os navegadores modernos.
Table showing browser support for Web Components.
Para navegadores mais antigos, você pode usar polyfills: https://www.webcomponents.org/polyfills
Na Vonage, estamos criando Web Components para desenvolver um Sistema de Design semelhante ao mencionado anteriormente pela Electronic Arts. Nosso objetivo é que os usuários possam montar facilmente esses componentes para criar, por exemplo, aplicativos de bate-papo, sem precisar se preocupar com o que está acontecendo nos bastidores.
Aqui estão alguns recursos para obter mais informações sobre Web Components:
O exemplo de Web Component que criei foi bem simples. À medida que a complexidade de um componente aumenta, o uso de uma ferramenta pode facilitar o desenvolvimento. Na próxima postagem do blog, compararemos diferentes frameworks e ferramentas para a criação de Web Components.