Componentes da Web no Google I/O 2019
Publicado em: 18 de junho de 2019
No Google I/O 2019, Kevin Schaaf, do projeto Polymer, e Caridy Patiño, da 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 hoje usam um ou mais componentes da Web. Isso faz dos web components um dos recursos mais bem-sucedidos da nova plataforma da Web lançados nos últimos cinco anos.
Você encontra 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 editoriais 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?
Então, o que são componentes da Web? As especificações de 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 em 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 fazer isso.
Os autores podem escolher padrões de renderização funcionais, assim como o React, para criar componentes da Web ou usar modelos declarativos, como os encontrados 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 proprietários é 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 podem ser expressos como HTML real, eles podem ser renderizados por todas as estruturas populares. Assim, seus componentes podem ser usados em mais lugares, em uma variedade maior de aplicativos, sem prender os usuários a uma estrutura específica.
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 radical entre um framework e outro, em que você substitui todos os componentes, é possível atualizar um componente por vez.
Quem está usando componentes da Web?
Por todos esses motivos, os Web Components estão fazendo muito sucesso em vários casos de uso diferentes. Três casos de uso são especialmente populares: sites de conteúdo, sistemas de design e aplicativos empresariais.
Os sites da Rede de Display
Os componentes da Web são a tecnologia perfeita para melhorar progressivamente o conteúdo, 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 encaixaram de forma rápida e fácil na infraestrutura do setor editorial para veicular conteúdo.
Sistemas de design
Cada vez mais empresas estão unificando a maneira como se apresentam usando um sistema de design, um conjunto de componentes e diretrizes que definem a aparência comum dos sites e aplicativos de uma organização. Os web components também são uma ótima opção.
Muitas vezes, os designers precisam lidar com várias equipes que criam as próprias versões dos componentes do sistema de design com base em React, Angular e todos os outros frameworks, em vez de ter um único conjunto de componentes canônicos.
Os componentes da Web são a resposta: um sistema de componentes que realmente escreve uma vez e executa em qualquer lugar, mas ainda dá às equipes de apps a liberdade de usar a estrutura de escolha delas.
Empresas como ING, EA e Google estão implementando a linguagem de design da empresa em componentes da Web.
Empresa: componentes da Web no Salesforce
Os componentes da Web também estão ganhando espaço nas empresas como uma tecnologia segura e preparada para o futuro que pode ser padronizada. Caridy Patiño, arquiteto da plataforma de interface do usuário da Salesforce, explicou por que eles criaram a plataforma de interface do usuário usando componentes da Web.
O Salesforce é um conjunto de aplicativos, muitos deles adquiridos. Cada um deles pode ser executado na própria pilha de tecnologia. Como eles são criados em diferentes pilhas, é difícil dar a todos a mesma aparência. Além disso, o Salesforce permite que os clientes criem aplicativos personalizados usando a plataforma. 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:
- Padrão, em vez de soluções proprietárias, para facilitar a busca por desenvolvedores experientes e acelerar a integração 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 incompatíveis nos componentes e apps. Em outras palavras, a compatibilidade com versões anteriores era obrigatória.
- Ficar preso a tecnologias antigas e não conseguir evoluir.
- Ficar preso em um jardim murado.
Usar componentes da Web como base para a nova plataforma de interface atendeu a todas essas necessidades, e o resultado são os novos Componentes da Web do Lightning.
Começar a usar componentes da Web
Há muitas maneiras excelentes de começar a usar componentes da Web.
Se você estiver criando um app da Web, considere usar alguns dos muitos componentes padrão da Web disponíveis. Estes são apenas alguns exemplos:
- O Google vende o próprio sistema Material Design como componentes da Web: Componentes da Web do Material (em inglês).
- Os elementos conectados são um conjunto legal de componentes da Web com uma aparência de esboço desenhado à mão.
- Há ótimos componentes da Web de uso específico, como
<model-viewer>, que podem ser inseridos em qualquer app para adicionar conteúdo 3D.
Se você estiver desenvolvendo um sistema de design para sua empresa ou vendendo um único componente ou biblioteca que quer usar em qualquer ambiente, considere criar seus componentes usando componentes da Web. É possível usar as APIs de componentes da Web integradas, mas elas são de nível muito baixo. 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 base de componentes 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 é uma estrutura que prioriza componentes da Web. Ele inclui vários recursos de frameworks conhecidos, como JSX e TypeScript.
- Os elementos Angular (link em inglês) oferecem uma maneira de encapsular 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 site open-wc.org (em inglês) tem ótimas informações para iniciantes, além de dicas e configurações padrão para ferramentas de build e desenvolvimento.
- Os Fundamentos da Web oferecem informações básicas sobre as APIs de componentes da Web e as práticas recomendadas para projetar componentes da Web.
- O MDN oferece documentos de referência para as APIs de Web Components, além de alguns tutoriais.