Web Components em 2019: parte 3

John Tucker Blocked Unblock Seguir Seguindo 30 de junho

Complementamos a exploração de componentes da Web e identificamos deficiências.

Este artigo faz parte de uma série que começa com Web Components em 2019: Parte 1 .

Composição de Componentes

Nota : O exemplo neste artigo está disponível na ramificação part3 do repositório larkintuckerllc / lwc-2019 GitHub .

Enquanto neste caso é um exagero, vamos quebrar a funcionalidade do nosso componente HelloWorld em dois componentes. Deixamos a lógica de manter e incrementar o valor no componente HelloWorld ; src / index.ts :

note : No mundo React , chamaríamos isso de componente container

Observações:

  • Observe que, embora importemos o módulo helloView , não precisamos realmente usar nenhum valor exportado. Isso ocorre porque o módulo helloView define a tag hello-view que usamos aqui
  • Enquanto, como o React , usamos atributos HTML para comunicar de componentes pai para filho, usamos eventos personalizados (sintéticos) padrão do navegador para comunicar de filho para pai (em oposição a passar funções de retorno de chamada como atributos com o React )

Em seguida, implementamos a funcionalidade de visualização em src / helloView.ts :

Nota : No mundo React , chamamos isso de componente de apresentação

Observações:

  • Com o valor da cadeia que está na matriz retornada do método static observadoAttributes e o caso tratado no attributeChangedCallback , a contagem exibida é mantida atualizada com o atributo value do componente
  • Novamente, usamos eventos personalizados (sintéticos) padrão do navegador para comunicar de um componente pai para filho

Recuando

Vamos recuar um pouco e considerar o que fizemos ( sem bibliotecas de terceiros ) usando Web Components :

  • Nós temos uma solução de componentes; HTML , CSS e JavaScript isolados
  • Usamos marcação HTML / CSS familiar para renderizar o componente
  • Nós temos eventos de ciclo de vida de componentes
  • Nós compomos componentes usando marcação HTML familiar
  • Temos ligação de dados unidirecional reativa de componentes pai para filho
  • Temos um mecanismo familiar para componentes filhos se comunicarem com componentes pai

Slots

Uma coisa que não cobrimos foi como um componente pai pode passar a marcação HTML para um componente filho; por exemplo, em React this is just as children prop. Para Componentes da Web, há slots.

O artigo do MDN Usando modelos e slots – Componentes da Web explica os slots detalhadamente.

Então, o que estamos perdendo?

Agora que temos vivido com uma estrutura de front-end robusta baseada em componentes, ou seja, o React , há vários anos, podemos fazer algumas comparações para identificar coisas que estão faltando com o Web Components .

  • Ligação de dados unidirecional (componente para DOM) : Em nosso exemplo contrário, fomos obrigados a definir imperativamente o textContent de um elemento DOM
  • Gerenciamento de ouvinte de evento : em nosso exemplo contrário, precisávamos adicionar e remover ouvintes
  • Virtual DOM Like Pattern: O DOM virtual do React desempenha um papel importante na simplificação do desenvolvimento. Em nosso exemplo contrário, renderizamos o modelo uma vez e subsequentemente definimos imperativamente o textContent do elemento DOM
  • Soluções para Questões Transversais : O React possui padrões avançados, Componentes de Pedidos Superiores, Suportes de Renderização e Ganchos , para lidar com questões transversais. Com Web Components , não está claro como abordar esses tipos de problemas

Próximos passos

No próximo artigo, Web Components em 2019: Parte 4 , exploramos bibliotecas de terceiros que abordam essas deficiências identificadas.