){kind=small}
Ferramentas para componentes da Web: uma comparação
Tempo de leitura: 12 minutos
No post anterior, aprendemos os conceitos básicos dos Web Components. Terminamos com o código necessário para criar um exemplo básico. No desenvolvimento, as coisas raramente são “simples”. A criação de Web Components pode envolver muito código repetitivo. Se você planeja criar vários componentes, isso pode se tornar bastante trabalhoso.
As ferramentas de Web Components são a solução perfeita para esse problema. Elas podem ajudar a abstrair parte desse código repetitivo, transformando-o em um código mais limpo, e proporcionar um fluxo de trabalho mais eficiente. Mais uma vez, assim como no desenvolvimento, há muitas ferramentas à escolha, todas baseadas em diferentes visões sobre a melhor maneira de criar Web Components.
Nesta postagem, vamos analisar algumas dessas ferramentas e compará-las. O mesmo componente será desenvolvido para que as diferenças no código possam ser destacadas. Além do código, outros critérios que compararemos são:
Características: O que vem na embalagem?
Documentação: Exemplos? Instruções claras? Projetos iniciais?
Facilidade de configuração: São necessárias muitas etapas para colocar um componente web em funcionamento?
Suporte: Fóruns, Discord, Slack, Comunidade, Blogs/artigos, YouTube, GitHub
Suporte: Quem está fazendo a manutenção da ferramenta? Quem está usando-a?
Ao pesquisar, me deparei com um site que é um verdadeiro playground para desenvolvedores que estão criando Web Components, https://WebComponents.dev. O site lista todos os seus diversos recursos, mas o que vamos utilizar é a criação do mesmo Web Component inicial, um contador, com um único clique. O site oferece uma ampla variedade de ferramentas para uso.
Ao começar a desenvolver no WebComponents.dev ou em suas pesquisas, você encontrará os termos “biblioteca” ou “compilador” na descrição de uma ferramenta. A diferença está no momento em que o Web Component é utilizado. No caso das bibliotecas, o componente depende da ferramenta utilizada para lidar com a renderização e a atualização. Já os compiladores possuem uma etapa de compilação na criação de um componente, que gera o código necessário para que ele funcione sem a necessidade de recorrer à ferramenta posteriormente.
Agora vamos começar a comparar!
Como ponto de partida, vamos ver o que é preciso para criar o componente Counter usando JavaScript puro.
Primeiro, estamos estendendo a classe base HTMLElement como ponto de partida para o nosso Componente Web.
O valor da contagem é definido como 0.
O modelo do componente é então definido como html e seu estilo como style.
O modelo e o estilo são então anexados ao Shadow DOM, para que possamos vê-los na página.
Depois que a renderização for concluída, podemos obter referências às diferentes partes e controlar as ações do componente.
A seguir, definimos as funções do componente inc(),dec()e update(). Observe que sempre que inc() e dec() são chamadas, update() também é ativado. Caso contrário, o valor do contador nunca mudaria.
Em seguida, temos o connectedCallback() e disconnectedCallback() métodos de ciclo de vida do componente. Eles são chamados quando o componente é adicionado ou removido da página. Aqui, estamos adicionando e removendo ouvintes de eventos dos botões. Isso é muito importante, especialmente ao trabalhar com recursos como temporizadores, para evitar vazamentos de memória. Você pode encontrar mais informações sobre callbacks de ciclo de vida nos documentação da MDN.
Por fim, a nova classe é associada ao nome do elemento personalizado por meio de customElements.define.
Se os componentes que você desenvolve não forem muito mais complexos do que este exemplo, a opção do Vanilla JavaScript pode ser a ideal para você. Dessa forma, você não precisa se preocupar com a “dependência de bibliotecas”.
Se isso parecer muito repetitivo e/ou se você quiser criar muitos componentes com mais funcionalidades, talvez uma ferramenta seja a opção certa para você.
Aqui estão algumas das muitas opções disponíveis.
À primeira vista, ao examinar o código do componente contador, você pode notar a ausência de uma classe.
A primeira linha do site explica isso: “Hybrids é uma biblioteca de interface do usuário para a criação de componentes da web com uma forte abordagem declarativa e funcional, baseada em objetos simples e funções puras.”
Então, se você gosta de programação funcional, a Hybrids pode ser a biblioteca de componentes da Web ideal para você.
Gosto muito quando a documentação de uma ferramenta apresenta uma lista com marcadores de todos os seus recursos. Aqui está, diretamente do site deles:
A definição mais simples — apenas objetos simples e funções puras — sem classes e sem essa sintaxe
Sem ciclo de vida global — propriedades independentes com seus próprios métodos simplificados de ciclo de vida
Composição em vez de herança — fácil reutilização, fusão ou divisão de definições de propriedades
Recálculo superrápido — cache inteligente integrado e mecanismos de detecção de alterações
Modelos sem ferramentas externas — mecanismo de modelos baseado em literais de modelo com tags
Ferramentas de desenvolvimento incluídas — Suporte à substituição dinâmica de módulos para um desenvolvimento rápido e agradável
A documentação é desenvolvida com o Gitbook, que oferece um layout muito limpo e organizado. Como o Hybrids adota uma abordagem tão inovadora para a criação de Web Components por meio do uso de funções puras, alguns Concepts fundamentais e outros aspectos precisam ser explicados. A documentação faz isso muito bem, com inúmeros trechos de código (com botões para copiar para a área de transferência) e links para experimentar exemplos no StackBlitz.
Você usa o Hybrids como qualquer outra biblioteca. Instale-o no seu projeto npm i hybrids
e importe e utilize em seu arquivo import { html, define } from 'hybrids';
Também estão disponíveis opções para usar os ES Modules ou um link para um arquivo unpkg.
As principais formas que encontrei para acompanhar o desenvolvimento do Hybrids são o GitHub e o Gitter. No momento em que este texto foi escrito, a biblioteca estava em desenvolvimento ativo.
An account @hybridsjs no Twitter não parece estar ativa.
Além de algumas apresentações sobre híbridos, não há muito conteúdo sobre a criação de Web Components.
A documentação contém links para alguns artigos no dev.to
Parece que o criador do `hybrids`, Dominik Lubański, também é o único responsável pela manutenção da biblioteca. Não consegui encontrar uma lista de empresas/organizações que utilizem o `hybrids` em produção.
Ao comparar o código usado para criar o contador com o Lightning Web Components (LWC) com o do JavaScript puro, dá para perceber que MUITA coisa foi abstraída. Observe que, em vez de herdar de um HTMLElement, o LWC herda de um LightningElement.
Lightning Web Components são desenvolvidos pela Salesforce. Confesso que não tenho experiência com a Salesforce. Por isso, ao pesquisar, fiquei um pouco confuso com todas as diferentes formas de integração com a plataforma da Salesforce. Nesta postagem, o foco será apenas na criação de Web Components com o Lightning Web Components. Mas, se você é um desenvolvedor da Salesforce e quer criar Web Components para o ecossistema, acho que não tem como dar errado com o LWC. Mais informações sobre isso podem ser encontradas aqui.
Conforme listado no site deles, os componentes web do Lightning (observação: “Lightning Web Components” é a estrutura, enquanto “Lightning web components” são os componentes criados. A grafia em maiúsculas é importante.) são:
Rápido como um raio — Enxuto, com 7 kb de código em tempo de execução otimizado para desempenho e com o mínimo de código padrão.
Baseado em padrões — O Lightning Web Components utiliza HTML padrão, JavaScript moderno (ES6+) e o que há de melhor em Web Components nativos.
Fácil de aprender — Deixe as abstrações de lado e crie elementos personalizados com HTML, JavaScript e CSS.
Parece ser o tipo de afirmação comum feita por muitas ferramentas de componentes da Web.
Há documentação sobre o LWC disponível em diferentes seções do Salesforce. Há lwc.dev , que traz um guia com trechos de código interativos. Ele fornece algumas informações e apresenta pequenos desafios para você inserir em um editor de código e ver os resultados imediatamente.
Há outro conjunto de documentação disponível no site developer.salesforce.com domínio. Talvez tenha sido essa a documentação utilizada antes do site lwc.dev. As informações sobre o LWC nela contidas são mais abrangentes, mas menos interativas.
Outras fontes de informação incluem receitas receitas, galeria de aplicativos de exemploe um ambiente de teste de código.
O Lightning Web Components possui uma ferramenta de gerador de estrutura para colocar um aplicativo em funcionamento com apenas alguns comandos:
npx create-lwc-app my-app
cd my-app
npm run watch
Um Aplicativo Web Progressivo (PWA) também pode ser criado usando a -t pwa flag.
Nesta página, há uma lista de maneiras de saber mais sobre o LWC. Há links para um fórum do Salesforce Stack Exchange onde você pode tirar dúvidas. Você pode fazer cursos no Pluralsight e no Salesforce Trailhead. Pesquise “Lightning Web Components” no YouTube e você encontrará muitos vídeos de pessoas demonstrando como criar componentes.
Como já foi mencionado, este é um projeto do Salesforce e parece que há uma equipe de engenheiros trabalhando nele.
Quanto a quem está usando, o Lightning Web Components é tão compatível com a plataforma deles que muitos desenvolvedores da Salesforce estão utilizando essa tecnologia.
(Observação: o TypeScript também pode ser usado para criar Web Components com o LitElement.) Uma rápida análise do código pode dar a impressão de que há muito pouca diferença entre os componentes criados com Vanilla JavaScript e com o LitElement. Uma diferença pequena, mas significativa, é a maneira como o modelo do componente é atualizado.
Conforme indicado no site, “O LitElement usa o lit-html para definir e renderizar modelos HTML. As atualizações do DOM são extremamente rápidas, pois o lit-html renderiza novamente apenas as partes dinâmicas da sua interface do usuário – sem necessidade de comparação de diferenças.”
Isso se deve, em parte, a literais de modelo com tags.
À pergunta “Por que usar o LitElement?”, a resposta deles inclui:
“Maravilhosamente declarativo” — Use JavaScript no seu modelo.
“Rápido e leve” — Como mencionado anteriormente, devido ao método de atualização, no qual apenas as partes que mudam são renderizadas novamente, as atualizações são muito mais rápidas.
“Interoperabilidade perfeita” — Como o LitElement segue os padrões estabelecidos pelos Web Components, seus componentes podem funcionar de forma independente ou ser compatíveis com qualquer framework ou biblioteca de front-end.
Mais uma vez, essas são afirmações feitas por muitas ferramentas de componentes da Web.
A documentação é bastante minimalista. São apenas três seções.
Experimente: um guia passo a passo para criar um Web Component com um editor de código StackBlitz incorporado.
Guia: uma análise mais aprofundada do LitElement, que também conta com um editor de código embutido
API: um explorador de API
A seção “Introdução” do Guia afirma que é possível criar um componente independente ou um componente destinado a ser específico para um aplicativo.
O primeiro passo para criar um componente independente é baixar um projeto inicial (em JavaScript ou TypeScript).
Instale suas dependências.
Se você estiver usando a versão em TypeScript: npm run build ou npm run build:watch.
Então npm run serve.
O processo para adicionar o LitElement a um projeto já existente é padrão.
Instale a biblioteca: npm i lit-element
Crie um componente.
Importe o componente.
Utilize o componente.
Outra opção de configuração seria usar os geradores de Open Web Components geradores. Trata-se de uma CLI interativa que gera a estrutura básica de um único Web Component ou de um aplicativo inicial.
Na seção “Comunidade” do site do LitElement, há uma lista com alguns recursos. Isso inclui um espaço de trabalho no Slack, um Account no Twitter bastante ativo, uma lista de e-mails e, é claro, o StackOverflow.
O LitElement faz parte do Projeto Polymer, desenvolvido pelo Google.
Há um Wiki no GitHub do Polymer que lista quem já utilizou o Polymer / LitElement. Isso inclui, é claro, vários serviços do Google, mas também a Coca-Cola, o McDonald’s, a Electronic Arts e muitos outros.
Ao analisar o código que o Stencil usa para criar o componente contador, percebe-se a presença de alguns símbolos “@”. Trata-se de decoradores provenientes do TypeScript. O Stencil os utiliza para abstrair parte do código repetitivo.
Ao longo de todo o seu site, o Stencil quer deixar claro que um dos objetivos da ferramenta é tornar a criação de Web Components o mais fácil possível.
“Em comparação com o uso direto de Elementos Personalizados, o Stencil oferece APIs adicionais que simplificam a criação de componentes rápidos.”
Na página inicial do site e na introdução, o Stencil faz questão de deixar claro que se trata de um compilador. Depois que o Web Component é gerado, ele não depende mais do Stencil.
O Stencil garante que seus recursos sejam claramente descritos:
Baseado em componentes da Web
Pipeline de renderização assíncrona
Suporte ao TypeScript
Ligação de dados unidirecional
Pré-renderização de componentes
Carregamento diferido de componentes simples
Suporte a JSX
Componentes sem dependências
DOM virtual
Geração de sites estáticos (SSG)
Uma palavra para descrever a documentação do Stencil seria “completa”. Dá para perceber que foi dedicado muito tempo e esforço à sua elaboração.
A primeira seção, “Introdução”, começa explicando por que o Stencil existe.
Em seguida, há as subseções:
Metas e Objetivos — Os objetivos e a proposta de valor da Stencil
Meu primeiro componente — uma análise detalhada de um exemplo de componente Stencil
Perguntas frequentes (FAQ) — uma lista bastante extensa e bem organizada de respostas
O que é um sistema de design? — a documentação dedica um tempo para definir o que é um sistema de design!
Stencil para sistemas de design — Na seção anterior, eles explicam o conceito e, em seguida, mostram como o Stencil pode criá-los para você.
Mais uma vez, essa é apenas a primeira seção! A documentação aborda todos os aspectos dos Componentes, como integrar os componentes gerados às principais estruturas de Front-end, opções de configuração, guias, testes e muito mais. Nunca tive uma dúvida que não fosse esclarecida pela documentação.
Na seção “Introdução” da documentação, há uma seção intitulada “Primeiros passos”. O Stencil possui uma ferramenta CLI interativa.
Executar npm init stencil permite a criação de um componente da Web, um aplicativo Stencil ou um aplicativo progressivo da Web pronto para produção.
Na seção “Comunidade”, há links para o Twitter, o Slack e o GitHub. Há também muitos Videos no YouTube e artigos/posts de blog dedicados ao Stencil.
O Stencil é mantido pela equipe principal do Ionic, juntamente com as contribuições enviadas pela comunidade.
Em destaque na primeira página estão os logotipos das empresas que utilizam o Stencil. Entre elas estão a Apple, a Amazon, a Porsche, a Arm, a Panera e a Microsoft.
Essas são apenas algumas das ferramentas da lista cada vez maior para criar Web Components. Se nenhuma delas atender às suas necessidades como desenvolvedor, eu daria uma olhada no que mais está disponível em https://WebComponents.dev. Quanto a nós, na Vonage, decidimos usar o Stencil. Com suporte a TypeScript, excelente documentação e a capacidade de criar sistemas de design, já estamos quase concluindo nosso projeto de Web Components.
No próximo post, vamos criar um Web Component com o Stencil do início ao fim.
Você já criou um componente web usando alguma das ferramentas listadas aqui? Talvez uma que não tenhamos mencionado? Como foi sua experiência? Conte para a gente na seção de comentários.