Introdução aos componentes da Web e como começar a usá-los

Embora uma plataforma de inovação aberta como a web incentive uma ampla variedade de usos, as desvantagens do caos estão na cacofonia de vozes que definem o que a web é atualmente. Normalmente, neste ponto da evolução da tecnologia, os líderes da indústria reúnem-se para criar regras e regulamentos que (convenientemente) solidifiquem as suas próprias vantagens, mas também tornem as coisas mais claras para o consumidor. É por isso que quase qualquer pessoa pode definir os componentes importantes que compõem um carro, mas pode achar isso mais difícil de fazer em um site.

Coisas simples como desenhar um círculo ou colocar palavras em uma caixa podem ser feitas de diversas maneiras. Isso ocorre porque, por exemplo, formas simples não são objetos de primeira classe da web. Por exemplo, este é um círculo definido em CSS:

.circle 
{ 
  height: 150px; 
  width: 150px;  
  border: solid 1px; 
  border-radius: 50%; 
  display: inline-block; 
}

Seguido na página por:

<span class="circle"/>

Agora, isso produz um círculo fino. Embora a palavra “círculo” em si não faça parte da definição, ela funciona como uma síntese de HTML e CSS para criar o objeto que preciso. Se você perguntasse “que cor é essa?”, isso dependeria em grande parte do contexto herdado e do que contém o quê. Posso usar uma caixa de areia como playcode.io para confirmar se funciona.

Também posso usar playcode.io com o Tailwind CSS Framework e desenhar um círculo com este código dentro do Aplicativo.jsx arquivo:

<div class="w-20 h-20 rounded-full border-2 
            border-black flex justify-center 
            items-center">

O resultado é outro círculo fino:

Tailwind é uma boa estrutura. No entanto, terei que continuar efetivamente usando essa biblioteca para todo o resto. E há pouca garantia de quão bem isso funcionaria nos navegadores. Além disso, como seu antecessor Bootstrap, o Tailwind está sujeito aos caprichos do destino. O que realmente queremos é uma forma “oficial” de expressar um componente.

Insira os componentes da web

Um componente da web é uma forma de “criar um bloco de código encapsulado e de responsabilidade única que pode ser reutilizado em qualquer página”. Eles são feitos de padrões existentes expressos como APIs da Web, com os quais os fornecedores concordaram e implementaram ao longo dos anos. Eles já têm uso e maturidade suficientes para desafiar as estruturas populares existentes. Todos os navegadores modernos suportam as especificações há algum tempo.

Os componentes da Web permitem que você defina elementos personalizados (por exemplo “meu-círculo”) e depois registrá-los.

Isso é ótimo, mas como sugeri, controlá-los requer controle de CSS em todos os outros lugares. Para resolver isso, um componente web pode conter seu próprio conjunto de regras em um sombra DOM. Esta é apenas uma árvore de objetos separada que não entra em conflito com a árvore principal.

Finalmente, modelos e slots permitem definir fragmentos inertes que não são exibidos quando renderizados, mas podem ser reutilizados posteriormente. Então posso definir isso:

<template id="my-paragraph"> 
 <p>My paragraph</p> 
</template>

Isso não será renderizado, mas pode ser referido indiretamente mais tarde e usado como um bloco de construção comum.

Os componentes da Web são construídos com JavaScript; e sim, percebo que algumas pessoas querem usar menos JS em seus sites. Mas agora, este é o caminho.

Como definir seus próprios componentes da Web

Componentes da Web são elementos HTML personalizados, como <my-circle />. O nome deve conter um travessão para que nunca entre em conflito com elementos suportados oficialmente na especificação HTML. Então já iniciamos um relacionamento: o navegador sempre conhecerá as tags HTML, mas respeitará as novas. Como eles sabem sobre os novos?

Após definir os componentes como uma classe, você os registra no CustomElementRegistry, assim:

customElements.define( 'my-circle', MyCircle );

O componente então precisa ser construído com JavaScript. Sabemos o nome da turma porque acabamos de registrá-la. Eu juntei isso, depois de observar o exemplo da documentação:

class MyCicrle extends HTMLElement {
  constructor() {
    // Always call super first in constructor
    super();
  }

  connectedCallback() {
    // Create a shadow root
    const shadow = this.attachShadow({ mode: "open" });

    // Create spans
    const wrapper = document.createElement("span");
    wrapper.setAttribute("class", "smallcircle");

    // Create some CSS to apply to the shadow dom
    const style = document.createElement("style");
    console.log(style.isConnected);

    style.textContent = `

      .smallcircle {
        height: 150px;  
        width: 150px; 
        border: solid 1px;  
        border-radius: 50%;  
        display: inline-block;
        color: #ffffff;
      }
    `;

    // Attach the created elements to the shadow dom
    shadow.appendChild(style);
    console.log(style.isConnected);
    shadow.appendChild(wrapper);
  }
}

Eu consegui rodar isso, como você pode ver, no Playcode sem nenhum pacote. É apenas uma construção manual do nosso exemplo de círculo anterior, mas em JavaScript. Isso prova que os componentes da web estão operacionais, mesmo nesta caixa de areia. Essas duas mensagens de log registram as alterações no shadow DOM antes e depois de anexarmos o elemento de estilo. O método conectadoCallback faz parte da especificação do ciclo de vida usada para fazer os componentes da web funcionarem. Este método é a inevitável chamada de “configuração” quando um elemento é adicionado pela primeira vez ao documento principal.

Então, trabalhei muito para desenhar um círculo. Para provar a sua natureza componente, deixe-me fazer um pouco mais. Ao ler um atributo, posso pelo menos mudar a cor:

Não há dúvida de que a limpeza da definição de um elemento personalizado torna o uso de componentes da web na página um processo agradável. E a mudança de código é bastante simples:

... 
let clr; 
if (this.hasAttribute("color")) 
{ 
  clr = this.getAttribute("color"); 
} 
else 
{ 
  clr = "white"; 
} 
style.textContent = ` 
 .smallcircle { 
   height: 150px; 
   width: 150px; 
   border: solid 1px; 
   border-radius: 50%; 
   display: inline-block; 
   color: ${clr}; 
 } 
`; 
...

Não usei um exemplo com modelos, mas usando técnicas semelhantes você pode capturá-los e cloná-los e, em seguida, inseri-los em seu shadow DOM. É mais fácil definir HTML em Afinal, HTML.

Da mesma forma eu estendi Elemento HTMLeu poderia ter estendido um elemento HTML existente e começado a partir daí.

Componentes da Web em estado selvagem

Mas será que os componentes da web chegaram tarde demais para expulsar as estruturas populares? Na maioria dos casos, os componentes da web podem funcionar próximos aos componentes da estrutura, embora uma questão separada sobre renderização do lado do servidor é definitivamente uma mosca na sopa (que não vou abordar aqui).

A força dos componentes web realmente surge quando uma pequena equipe de UX deseja desenvolver uma biblioteca que eles sabem que sobreviverá ao teste do tempo. As ideias cruzadas entre a equipe de negócios e de desenvolvimento não precisam mais ser traduzidas em Angular ou React. Componentes complexos que correspondem à identidade de uma marca podem ser usados ​​como uma etiqueta normal. Em vez de uma tag “meu círculo”, pense em uma tag “cabeçalho da minha empresa” que pode ser usada em toda a organização – a equipe de UX controla o desenvolvimento, mas sem o risco de aprisionamento da estrutura. Isso aproxima designers e construtores muito mais.

Assim, com os componentes web, a biblioteca de componentes de uma organização não só é mais estável e menos dependente de outra camada definida em outro lugar, mas a linguagem que eles usam será muito mais explicável além da equipe de desenvolvimento. Traz um pouco de harmonia ao Velho Oeste da web.

A postagem Introdução aos componentes da Web e como começar a usá-los apareceu pela primeira vez em The New Stack.