Componentes da Web no I/O 2019
Publicado em: 18 de junho de 2019
No Google I/O 2019, Kevin Schaaf, do Polymer Project, 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 nossos cálculos, entre 5% e 8% de todos os carregamentos de página hoje usam um ou mais componentes da Web. Isso faz dos componentes da Web um dos recursos mais bem-sucedidos da nova plataforma da Web 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ção criados com AMP—componentes AMP também são componentes da Web. 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 é realmente implementado:
- Qual mecanismo de renderização ele usa para criar o DOM.
- Como ele se atualiza com base em mudanças nas propriedades ou nos atributos.
Em outras palavras, os componentes da Web informam ao navegador quando e onde criar um componente, mas não como criá-lo.
Os autores podem escolher padrões de renderização funcionais, como o React, para criar os 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 que usa dentro do componente, mantendo a interoperabilidade.
Para que servem os componentes da Web?
A principal diferença entre os componentes da Web e os 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 todos os frameworks mais usados. Assim, seus componentes podem ser consumidos de forma mais ampla, em uma variedade maior de aplicativos, sem prender os usuários a um único framework.
Como a interface do componente é padrão, os componentes da Web implementados com 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 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 têm sido 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 aprimorar o conteúdo de forma progressiva, porque já podem ser gerados como HTML padrão por um número incontável de sistemas CMS.
A tecnologia AMP é um ótimo exemplo de como os Web Components se encaixaram de forma 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 comum dos sites e aplicativos de uma organização. Os componentes da Web também são uma ótima opção aqui.
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 no React, no Angular e em 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 você escreve uma vez e executa em qualquer lugar, mas que ainda dá às equipes de apps a liberdade de usar o framework que quiserem.
Empresas como ING, EA e Google estão implementando a linguagem de design delas em componentes da Web.
Empresas: componentes da Web no Salesforce
Os componentes da Web também estão se tornando uma tecnologia segura e à prova de obsolescência para padronização nas empresas. Caridy Patiño, arquiteto da plataforma de interface do Salesforce, explicou por que eles criaram a plataforma de interface usando componentes da Web.
O Salesforce é uma coleção de aplicativos, muitos dos quais vieram de aquisições. Cada um deles pode ser executado na própria pilha de tecnologia. Como eles são criados em pilhas diferentes, é difícil dar a todos a mesma aparência. Além disso, o Salesforce permite que os clientes criem aplicativos personalizados usando a plataforma Salesforce. Portanto, o ideal é que os componentes também possam ser usados por desenvolvedores externos.
A Salesforce identificou um conjunto de necessidades dos clientes da plataforma:
- Soluções padrão, em vez de proprietárias, para que seja mais fácil encontrar desenvolvedores experientes e mais rápido treinar novos desenvolvedores.
- Um modelo de componente comum, então a personalização de qualquer aplicativo do Salesforce funciona da mesma maneira.
Eles também identificaram algumas coisas que os clientes não queriam:
- Alterações interruptivas nos componentes e apps. Em outras palavras, a compatibilidade com versões anteriores era obrigatória.
- Ficar preso a uma tecnologia antiga e não conseguir evoluir.
- Ficar preso em um jardim murado.
O uso de componentes da Web como base para a nova plataforma de IU atendeu a todas essas necessidades, e o resultado são os novos Lightning Web Components.
Começar a usar componentes da Web
Há muitas maneiras excelentes de começar a usar os componentes da Web.
Se você estiver criando um app da Web, use alguns dos vários componentes da Web padrão disponíveis. Estes são apenas alguns exemplos:
- O Google vende o próprio sistema de design do Material Design como componentes da Web: Componentes da Web do Material Design.
- Os Wired Elements são um conjunto interessante de componentes da Web com uma aparência de desenho feito à mão.
- Há ótimos componentes da Web para fins especiais, como
<model-viewer>, que podem ser adicionados a qualquer app para incluir conteúdo 3D.
Se você estiver 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 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 de 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 para considerar:
- O Stencil é um framework que prioriza os componentes da Web. Ele inclui vários recursos de framework conhecidos, como JSX e TypeScript.
- O Angular Elements (link em inglês) oferece uma maneira de encapsular componentes do Angular como componentes da Web.
- O wrapper de componentes da Web do Vue.js permite empacotar componentes do Vue como componentes da Web.
Mais recursos:
- O site open-wc.org tem ótimas informações para começar, além de dicas e configurações padrão para ferramentas de build e ferramentas para desenvolvedores.
- Os Fundamentos da Web fornecem introduções às APIs básicas de componentes da Web e práticas recomendadas para projetar componentes da Web.
- A MDN fornece documentos de referência para as APIs de componentes da Web, além de alguns tutoriais.