Chega de frameworks! Vamos ao natural com Web Components!
Esse texto foi baseado na minha palestra sobre WebComponents na RoadSec. Caso vocês tenham visto lá e ficado alguma dúvida, aqui deve estar melhor explicado as coisas.
Os códigos estão no meu CodeSandbox e a palestra está no meu google slides. Mas chega de conversa, vamos para o que interessa!
Uma conversa muito difundida no mundo do Frontend é “Qual framework é melhor, X, Y ou Z?”. Pessoas se xingam, famílias são destruídas, vidas são perdidas por causa dessa discussão, mas, e se tivesse uma alternativa? E se essa discussão não precisasse mais acontecer? Parece doideira né? Mas isso realmente pode acontecer!
Web Components to the rescue!
Web Components é um conjunto de specs cujo o objetivo é trazer ao JavaScript a possibilidade de fazer components SEM PRECISAR DE FRAMEWORK! Isso mesmo! Sem mais frameworks pra componentização! (Ou pelo menos, reduzir bastante a responsabilidade deles).
Esse conjunto é composto por 4 specs:
- Html Templates — Possilidade de criar fragmentos de HTML que podem ser instanciados quando forem necessários
- Custom Elements — Como o nome já diz, é a capacidade de criar componentes customizados
- Shadow Dom — Sabe o css do seu componente? Agora ele fica completamente encapsulado, ou seja, com Shadow Dom, estilos globais não podem alterar o estilo do seu componente, e nem o estilo do seu componente alterar algo externo
- ES Modules — Pra quem é familiar com module loaders, é exatamente isso! É uma spec criada para o JavaScript ter a possibilidade de carregar módulos nativamente!
Isso é um resumo de cada spec, aconselho a vocês lerem mais sobre cada uma delas.
Bem, vamos voltar ao que interessa: WebComponents! A API pra criação de custom elements é bem simples
Então temos alguns passos nesse código:
1- Criamos uma classe que extende de HTMLElement
2- Usamos um dos métodos de liefcycle dos componentes: “connectedCallback”, esse método é ativado quando o componente é inserido no DOM. Nesse método, definimos a estrutura de estilo e marcação dele
3- No final, definimos um customElement como “my-title”. Perceba que o custom element tem o nome separado por hífen, isso é obrigatório, caso não tenha, um erro seja dado.
Após definirmos, colocamos a nossa tag no nosso html e tcharam! está funcionando.
Bem, esse é um exemplo beem simples, vamos tentar dar um exemplo mais funcional: Vamos montar um contador de clicks com Web Components!
Entããão, vamos que com um pouco mais de lógica o código fica mais complicado de ser lido, imagina isso em aplicações comerciais com esse código! Totalmente inviável.
Então não dá para usar Web Components? LÓGICO QUE DÁ. Explicarei com uma imagem!
Exatamente! Atualmente temos várias libs que geram Web Components, algumas pessoas chamam de “Component Compilers”, ou seja, compiladores de componentes. O que muda delas para Frameworks como Angular? Ou Libs como React e Vue? É que quando você builda os componentes dos Component Compilers, eles todos viram Web Components, então basta pegar o bundle que eles geram, chamar em uma página html, usar a tag que você precisa e você tem um elemento totalmente renderizado na tela!
Web Components não trazem apenas a facilidade de gerar components reutilizáveis através de qualquer tecnologias, como também
- Component Compilers tendem a ter um ambiente mais simples de configuração para desenvolvimento
- Liberdade de criação do projeto, já que você usa uma lib para criação de componentes, você pode usar qualquer outra lib que quiser para coisas como: navegação entre rotas, animações, etc…
- Caso você tenha uma arquitetura de Micro Frontend, Web Components ajudam a facilitar a criação dessa arquitetura
- Interoperabilidade com projetos que estão em produção atualmente
- A grande maioria dos browsers suporta todas as especificações, porém, caso tenha algum browser que você precise suportar que não aceite Web Components, não tem problema! Existem polyfills para todas as specs!
- SSR com Web Components é a coisa mais fácil do mundo
Muito legal né? Parece mil maravilhas, porém, existem algumas ressalvas
- Nem toda lib de Web Component tem uma documentação legal sobre testes unitários
- Testes E2E ainda não são possíveis (Dizem que WebDriver suporta com a ajuda de um plugin, mas não testei ainda)
Web Components estão aí para ficar, o que está faltando é apenas a comunidade realmente abraçar isso e ver que mesmo com coisas faltando (como esses dois pontos que citei), eles acabam nos ajudando MUUUITO. Ficar sem testes unitários me da um certo nervosismo, mas acho que vale a pena pela facilidade de modularização e inteoperabilidade que a gente ganha com eles.
Esse foi um texto bem introdutório, apenas para apresentar a comunidade algo que não é muito difundido ainda. Caso nos comentários queiram ver como trabalhar com algum projeto usando alguma lib de Web Component, deixem nos comentários (podem até comentar a lib que querem que eu use)