Componentes da Web no I/O 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ê já usou a Web hoje, provavelmente já usou componentes da Web. De acordo com nossa contagem, entre 5% e 8% de todos os carregamentos de página atuais usam um ou mais componentes da Web. Isso faz com que os componentes da Web sejam um dos novos e mais bem-sucedidos recursos de plataforma da Web lançados nos últimos cinco anos.
É possível encontrar componentes da Web em sites que você provavelmente usa no dia a dia, como o YouTube e o GitHub. Elas também são usadas em muitos sites de notícias e publicação criados com AMP. Os componentes da tecnologia AMP também são componentes da Web. Além disso, muitas empresas também estão adotando componentes da Web.
O que são componentes da Web?
Então, o que são os componentes da Web? As especificações dos componentes da Web fornecem um conjunto de APIs de baixo nível que permite estender o conjunto de tags HTML integrado do navegador. Os componentes da Web oferecem:
- Um método comum para criar um componente (usando APIs DOM padrão).
- Uma forma 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:
- O mecanismo de renderização usado para criar o DOM.
- Como ela se atualiza com base nas mudanças feitas 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.
Os autores podem escolher padrões de renderização funcionais, assim como o React, para criar componentes da Web, ou podem usar modelos declarativos, como 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 reservados é a interoperabilidade. Devido à interface padrão deles, você pode usar componentes da Web em qualquer lugar em que usaria um elemento integrado, como <input> ou <video>.
Como podem ser expressos como HTML real, eles podem ser renderizados por todas as estruturas conhecidas. Assim, seus componentes podem ser consumidos de forma mais ampla, em uma gama mais diversificada de aplicativos, sem prender os usuários a nenhum framework.
E como a interface dos componentes é padrão, os componentes da Web implementados com diferentes bibliotecas podem ser misturados na mesma página. Isso ajuda a preparar seus aplicativos para o futuro quando você atualiza seu conjunto de tecnologias. Em vez de uma grande mudança gradual entre uma estrutura e outra, em que você substitui todos os componentes, é possível atualizar um por vez.
Quem está usando componentes da Web?
Portanto, por todos esses motivos, o Web Components está obtendo grande sucesso em diversos casos de uso. 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 progressivamente conteúdos, pois já podem ser gerados como HTML padrão por um grande número de sistemas CMS.
A tecnologia AMP é um ótimo exemplo da rapidez e da facilidade com que componentes da Web são inseridos na infraestrutura do setor editorial para a veiculação de 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 componentes da Web também são uma ótima opção.
Muitas vezes, os designers precisam lidar com muitas equipes criando as próprias versões dos componentes do sistema de design com base no 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 realmente escrito uma vez e executado em todos os lugares que ainda dá às equipes de apps liberdade para usar a estrutura que preferirem
Empresas como ING, EA e Google estão implementando a própria linguagem de design em componentes da Web.
Enterprise: componentes da Web no Salesforce
Os componentes da Web também estão alcançando um progresso notável nas empresas como uma tecnologia segura e preparada para o futuro para padronização. Caridy Patiño, arquiteto da plataforma de interface do Salesforce, explicou por que a empresa criou essa plataforma usando componentes da Web.
O Salesforce é um conjunto de aplicativos, muitos dos quais vieram de aquisições. Cada um deles pode ser executado em uma pilha de tecnologia própria. Como são construídos em pilhas diferentes, é difícil dar a mesma aparência a todos. Além disso, o Salesforce permite que os clientes criem os próprios 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 sua plataforma:
- Soluções padrão em vez de proprietárias. Assim, fica mais fácil encontrar desenvolvedores experientes, e conseguir novos desenvolvedores mais rápido.
- Um modelo de componente comum. Assim, personalizar qualquer aplicativo do Salesforce funciona da mesma forma.
Eles também identificaram coisas que os clientes não queriam:
- Mudanças interruptivas nos componentes e apps. Em outras palavras, a compatibilidade com versões anteriores era uma necessidade.
- Ficar preso à tecnologia antiga e não evoluir.
- Preso em um jardim murado.
O uso de componentes da Web como base para a nova plataforma de interface atende a todas essas necessidades, e o resultado são os novos componentes da Web Lightning.
Introdução aos componentes da Web
Há muitas maneiras ótimas de começar a usar componentes da Web.
Se você estiver desenvolvendo um aplicativo da Web, considere usar alguns dos muitos componentes da Web disponíveis. Estes são apenas alguns exemplos:
- O Google usa o próprio sistema do Material Design como componentes da Web: os Material Web Components.
- Os elementos com fio são um conjunto interessante de componentes da Web que têm uma aparência esboçada desenhada à mão.
- Existem componentes da Web incríveis para fins especiais, como o
<model-viewer>, que você pode colocar em qualquer app para adicionar conteúdo 3D.
Se você está desenvolvendo um sistema de design para sua empresa ou vende um único componente ou biblioteca que pode ser usado em qualquer ambiente, considere criar seus componentes usando componentes da Web. Você pode usar as APIs de componentes da Web integradas, mas elas são de nível bem baixo, então há várias bibliotecas disponíveis para facilitar o processo.
Para começar a criar seus próprios componentes, confira a LitElement, uma classe base de componentes da Web desenvolvida pelo Google que oferece uma ótima experiência de renderização funcional semelhante ao React.
Outras ferramentas e bibliotecas a serem consideradas:
- O Stencil é um framework que prioriza componentes da Web. Ele inclui vários recursos de framework conhecidos, como JSX e TypeScript
- Os elementos Angular oferecem uma maneira de unir 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 inclui ótimas informações sobre como começar, bem como dicas e configurações padrão para ferramentas de criação e desenvolvimento.
- O curso Fundamentos da Web fornece informações sobre as APIs básicas de componentes da Web e práticas recomendadas para projetar componentes da Web.
- O MDN fornece documentos de referência para as APIs de componentes da Web, além de alguns tutoriais. \
Imagem principal por Jason Tuinstra no Unsplash.
Observação do editor: o gráfico de uso de elementos personalizados foi atualizado para mostrar todos os dados de uso mensais, conforme relatado 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 do gráfico original foram empilhadas. Agora, elas são mostradas empilhadas com uma linha total para remover a ambiguidade. O salto abrupto no final de 2017 é devido 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.