Componentes da Web no Google I/O 2019
No Google I/O 2019, Kevin Schaaf, do Projeto Polymer, e Caridy Patiño, do Salesforce, falaram sobre o estado dos componentes da Web.
Qual é a popularidade dos componentes da Web?
Se você usou a Web hoje, provavelmente usou componentes da Web. De acordo com nossa contagem, entre 5% e 8% de todos os carregamentos de página atualmente usam um ou mais componentes da Web. Isso torna os componentes da Web um dos novos recursos de plataforma da Web mais bem-sucedidos lançados nos últimos cinco anos.
Você pode encontrar componentes da Web em sites que provavelmente usa todos os dias, como o YouTube e o GitHub. Eles também são usados em muitos sites de notícias e publicações criados com AMP. Os componentes AMP também são componentes da Web. E muitas empresas também estão adotando componentes da Web.
O que são componentes da Web?
O que são componentes da Web? As especificações dos componentes da Web fornecem um conjunto de APIs de baixo nível que permitem estender o conjunto integrado de tags HTML do navegador. Os componentes da Web oferecem:
- Um método comum para criar um componente (usando APIs DOM padrão).
- Uma maneira comum de receber e enviar dados (usando propriedades/eventos).
Fora dessa interface padrão, os padrões não dizem nada sobre como um componente é implementado:
- Qual mecanismo de renderização ele usa para criar o DOM.
- Como ele se atualiza com base nas mudanças nas propriedades ou atributos.
Em outras palavras, os componentes da Web informam ao navegador quando e onde criar um componente, mas não como.
Os autores podem escolher padrões de renderização funcional, como o React, para criar componentes da Web ou usar modelos declarativos, como os que você encontra no Angular ou no Vue. Como autor, você tem total liberdade para escolher a tecnologia usada no componente, mantendo a interoperabilidade.
Para que servem os componentes da Web?
A principal diferença entre componentes da Web e sistemas de componentes reservados é a interoperabilidade. Devido à interface padrão, é possível usar componentes da Web em qualquer lugar em que você usaria um elemento integrado, como <input> ou <video>.
Como eles podem ser expressos como HTML real, eles podem ser renderizados por todos os frameworks conhecidos. Assim, seus componentes podem ser consumidos de forma mais ampla, em uma variedade maior de aplicativos, sem limitar os usuários a um framework específico.
E como a interface do componente é padrão, os componentes da Web implementados usando bibliotecas diferentes podem ser misturados na mesma página. Isso ajuda a preparar seus aplicativos para o futuro quando você atualiza sua pilha de tecnologia. Em vez de uma mudança gigante entre um framework e outro, em que você substitui todos os componentes, é possível atualizar os componentes um por vez.
Quem está usando componentes da Web?
Por todos esses motivos, os Web Components estão tendo muito sucesso em vários casos de uso. Três casos de uso são especialmente populares: sites de conteúdo, sistemas de design e aplicativos corporativos.
Os sites da Rede de Display
Os componentes da Web são a tecnologia perfeita para melhorar o conteúdo progressivamente, porque já podem ser gerados como HTML padrão por um número incontável de sistemas de CMS.
O AMP é um ótimo exemplo de como os componentes da Web se encaixam de maneira rápida e fácil na infraestrutura do setor de publicação para veicular conteúdo.
Sistemas de design
Cada vez mais empresas estão unificando a forma como se apresentam usando um sistema de design, um conjunto de componentes e diretrizes que definem a aparência e a sensação comuns dos sites e aplicativos de uma organização. Os Web Components também são uma boa opção.
Muitas vezes, os designers precisam lidar com muitas equipes que criam as próprias versões dos componentes do sistema de design em cima do React, do Angular e de todas as outras estruturas, em vez de ter um único conjunto de componentes canônicos.
Os componentes da Web são a resposta: um sistema de componentes que permite escrever uma vez e executar em qualquer lugar, mas que ainda dá às equipes de apps a liberdade de usar a estrutura que preferirem.
Empresas como ING, EA e Google estão implementando a linguagem de design da empresa em componentes da Web.
Enterprise: componentes da Web no Salesforce
Os componentes da Web também estão avançando de forma notável nas empresas como uma tecnologia segura e preparada para o futuro. Caridy Patiño, arquiteto da plataforma de interface do Salesforce, explicou por que eles criaram a plataforma usando componentes da Web.
O Salesforce é um conjunto de aplicativos, muitos deles provenientes de aquisições. Cada uma delas pode ser executada na própria pilha de tecnologia. Como eles são criados em pilhas diferentes, é difícil dar a todos o mesmo visual. Além disso, o Salesforce permite que os clientes criem seus próprios aplicativos personalizados usando a plataforma Salesforce. Portanto, o ideal é que os componentes também possam ser usados por desenvolvedores externos.
O Salesforce identificou um conjunto de necessidades dos clientes da plataforma:
- Soluções padrão, em vez de soluções proprietárias, para que seja mais fácil encontrar desenvolvedores experientes e acelerar o treinamento de novos desenvolvedores.
- Um modelo de componente comum, para que a personalização de qualquer aplicativo do Salesforce funcione da mesma maneira.
Eles também identificaram algumas coisas que os clientes não queriam:
- Mudanças importantes nos componentes e apps. Em outras palavras, a compatibilidade com versões anteriores era essencial.
- Ficar preso a uma tecnologia antiga e não conseguir evoluir.
- Ficar preso em um jardim murado.
Usar os Web Components como base para a nova plataforma de interface atendeu a todas essas necessidades, e o resultado são os novos Web Components do Lightning.
Começar a usar componentes da Web
Há muitas maneiras de começar a usar os componentes da Web.
Se você estiver criando um app da Web, considere usar alguns dos muitos componentes da Web disponíveis. Estes são apenas alguns exemplos:
- O Google vende o próprio sistema do Material Design como componentes da Web: Componentes do Material Design para Web.
- Os elementos do Wired são um conjunto legal de componentes da Web que apresentam um aspecto esboçado e desenhado à mão.
- Há ótimos componentes da Web de finalidade especial, como o
<model-viewer>, que podem ser adicionados a qualquer app para incluir conteúdo 3D.
Se você está desenvolvendo um sistema de design para sua empresa ou vendendo um único componente ou biblioteca que quer que seja utilizável em qualquer ambiente, considere criar seus componentes usando componentes da Web. É possível usar as APIs de componentes da Web integrados, mas elas são de baixo nível. Por isso, há várias bibliotecas disponíveis para facilitar o processo.
Para começar a criar seus próprios componentes, confira o LitElement, uma classe de componente da Web desenvolvida pelo Google que tem uma ótima experiência de renderização funcional semelhante ao React.
Outras ferramentas e bibliotecas a serem consideradas:
- O Stencil é um framework que prioriza os componentes da Web. Ele inclui vários recursos de framework conhecidos, como JSX e TypeScript.
- Os elementos Angular (link em inglês) oferecem uma maneira de agrupar componentes do Angular como componentes da Web.
- O wrapper de componentes da Web do Vue.js oferece uma maneira de empacotar componentes do Vue como componentes da Web.
Mais recursos:
- O open-wc.org (link em inglês) tem ótimas informações para começar, além de dicas e configurações padrão para ferramentas de build e desenvolvimento.
- O Fundamentos da Web fornece informações básicas sobre as APIs básicas de componentes da Web e as práticas recomendadas para projetar componentes da Web.
- O MDN (link em inglês) oferece documentos de referência para as APIs do Web Components, além de alguns tutoriais. \
Imagem principal de Jason Tuinstra no Unsplash.
Observação do editor: o gráfico de uso de elementos personalizados foi atualizado para mostrar os dados mensais completos de uso, conforme informado em chromestatus.com. Uma versão anterior desta postagem incluía um gráfico com granularidade de seis meses, sem os meses mais recentes. As séries V0 e V1 no gráfico original estavam empilhadas. Agora, elas são mostradas sem empilhamento com uma linha total para remover a ambiguidade. O salto abrupto no final de 2017 se deve a uma mudança no sistema de coleta de dados do chromestatus.com. Essa mudança afetou as estatísticas de todos os recursos da plataforma da Web e resultou em medições mais precisas no futuro.