logo-loader: como foi minha primeira experiêcia com web components · ArthurBorba

Talvez você já saiba ou talvez não, então deixe-me primeiro introduzir web components:

...é uma suíte de diferentes tecnologias que permite a criação de elementos customizados reutilizáveis — com a funcionalidade separada do resto do seu código — e que podem ser utilizados em suas aplicações web

referência: mdn web docs

Eu já atuo na área de desenvolvimento web tem 10 anos...e desde o início com frameworks para o frontend. Meu primeiro foi o AngularJs. Depois vieram React, Vue e Svelte.

Independente da escolha, qualquer um que adentrar nesse mundo vai se deparar com o conceito de "componente", não é mesmo? Cada ferramenta com suas próprias peculiaridades, porém sempre com o mesmo intuito: "...a criação de elementos customizados reutilizáveis"

Um pouquinho de história

De forma bem resumida, a trajetória dos web components se deu assim:

2011: Primeiras discussões e experimentos sobre Web Components, especialmente por desenvolvedores do Google.

2014: A W3C formaliza os padrões iniciais, incluindo Custom Elements, Shadow DOM e HTML Templates.

2018: Adoção mais ampla e suporte robusto em navegadores como Firefox e Safari, tornando a tecnologia prática para produção

referência: southleft

Veja só, lá em 2014 quando comecei com o AngularJs, esse conceito já existia! Porém eu fui apenas tomar conhecimento disso esse ano. Fazer o que né? Nesse mundo tech é tanta coisa pra aprender. Enfim, confere ai em baixo como foi.

Meu projeto

Foi em um dia qualquer no trabalho que eu abri o aplicativo desktop Microsoft Teams e reparei que o "loader" dele é o logo do app com uma animação parecida a um efeito que eu havia criado, há mais de 3 anos atrás, no primeiro pacote que publiquei no npm: animated-highlight.js.

Assim me surgiu a ideia do logo-loader, meu objeto de estudos para a API de web components:

<body>
  <logo-loader src="teams-logo.png"></logo-loader>
</body>

Exibe (o glitch é na geração do .gif, não do componente):

Principais conceitos

Levei poucos dias para desenvolver esse componente. Se você já tem familiaridade com qualquer framework de frontend e ainda não conhece a API dos web components, tenho certeza que também vai ter facilidade em aprender.

Caso você seja novo no desenvolvimento com JavaScript e UI, também posso te tranquilizar que a documentação dessa API é bem curta, clara e objetiva! A minha experiência de aprendizagem foi bem fluída e divertida.

Os principais conceitos a se compreender são:

Definição de uma classe JavaScript que vai descrever os comportamentos do web component. Nesta classe você vai implementar alguns callbacks de ciclo de vida, além de criar seus elementos HTML com seus respectivos comportamentos e estilos.
Criação de uma shadow DOM para anexar os elementos (nodes) de seu componente. É isso que vai garantir o encapsulamento dos elementos e estilos para com o restante da página. Se liga como fica a renderização disso:
Registro do componente na página web através do método CustomElementRegistry.define() e está pronto para uso!

No meu caso a definicação da classe foi:

class LogoLoader extends HTMLElement {
    ...

E o registro:

if (!customElements.get('logo-loader')) {
  customElements.define('logo-loader', LogoLoader)
}

Conclusão

Eu particularmente gostei muito de trabalhar com esse tipo de implementação! Fiquei com vontade de desenvolver mais...só não tive outra ideia ~~ainda~~.

A grande vantagem aqui em comparação com os frameworks é a compatibilidade nativa com o navegador e reutilização independente da escolha de tecnologias: sem preocupação com migrações ou incompatibilidades futuras. O que achou? Me conta ai sua experiência com web components.