Componentes da Web em 2019: Parte 4

John Tucker Blocked Unblock Seguir Seguindo 1º de julho

Exploramos bibliotecas de terceiros, LitElement e Lightning Web Components , que complementam os Web Components .

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

Atualizando a configuração do TypeScript

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

Na preparação de melhorias de exploração para Web Components usando bibliotecas de terceiros, somos obrigados a atualizar a configuração do TypeScript ; tsconfig.json:

Observações:

  • Anteriormente, estávamos segmentando o ES5 para ser compatível com o IE11 . Isso funcionou porque incluímos o polyfill custom-elements-es5-adapter.js no arquivo public / index.html . Infelizmente, este polyfill não parece funcionar com nenhuma das bibliotecas de terceiros que iremos explorar (nós também o removemos desse arquivo HTML, já que ele não é útil). Ao mudar a meta para ES2015 , evitamos esse problema específico (com o custo de perder o suporte para o IE11 )
  • A resolução padrão do módulo do TypeScript não suporta Node.js e NPM (correção estranha, mas fácil)
  • Finalmente, as bibliotecas de terceiros usam decoradores TypeScript para simplificar o código

LitElement

Primeiro consideramos a biblioteca LitElement (patrocinada pelo Google ). A biblioteca é suficientemente simples, especialmente se alguém está vindo do React , e como tal adiará o aprendizado do núcleo para o seu tutorial .

Aqui nós simplesmente refatoramos nosso contra-exemplo usando LitElement e fazemos algumas observações.

Primeiro nós instalamos as dependências:

 npm install lit-element 

Atualize o componente HelloWorld ; src / index.ts :

e atualizar o componente HelloView ; src / helloView.ts :

Observações:

  • Esta implementação é muito mais simples (por ser mais declarativa) do que as anteriores index.ts e helloView.ts
  • Um recurso menos óbvio é que, com o LitElement , os métodos de classe são vinculados automaticamente à classe; no exemplo anterior, usamos propriedades de classe para resolver isso
  • Porque estamos usando literais de template JavaScript ( com interpolação de expressão); nós temos que trazer a marcação CSS e HTML de volta para o JavaScript

note : Enquanto eu ia reclamar que não havia ferramentas para suportar a verificação da marcação CSS ou HTML no JavaScript , encontrei estas ferramentas do Visual Studio Code : es6-string-css e lit-html .

Olhando para este exemplo (e os métodos adicionais do ciclo de vida do LitElement ), podemos ver que ele tem muito do que faz com que outros frameworks front-end, por exemplo, o React , uma ferramenta poderosa.

O que ainda está faltando?

  • Suporte confirmado para o IE11 ; parece ser um número de questões que flutuam em torno deste
  • (de antes) 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 LitElements , não está claro como abordar esses tipos de problemas
  • Uma comunidade robusta (como a do React )

Componentes Web do Lightning

Outra biblioteca é o Lightning Web Components ( LWC ) (patrocinado pela Salesforce ). O uso desta biblioteca é muito semelhante ao LitElement ; embora um pouco mais complicado; veja o tutorial deles sobre aprendê-lo.

Uma distinção do LiteElement é que a única maneira documentada de desenvolver com o LWC é usar sua ferramenta de geração de projetos ( lwc-create-app ). Isso significa que não podemos usá-lo no ambiente de criação que acabamos de desenvolver.

note : Este exemplo do LWC está disponível para download .

Para completar, criamos nosso exemplo com o LWC (novamente usando lwc-create-app ) e fazemos observações:

src / modules / my / helloWorld / helloWorld.html

src / modules / my / helloWorld / helloWorld.js

src / modules / my / helloView / helloView.css

src / modules / my / helloView / helloView.html

src / modules / my / helloView / helloView.js

Observações:

  • Como o LitElement , o LWC tem uma sintaxe muito simples (e declarativa)
  • Ao contrário do LitElement , não podemos usar operações JavaScript no modelo; em vez disso, contamos com diretivas de modelo e getters de classe para executar operações avançadas
  • O modelo HTML e CSS são divididos em arquivos separados (boa experiência no editor)

Muito parecido com o LitElement , o LWC fornece métodos adicionais de ciclo de vida ; tudo embora há menos deles que fornecidos pelo LitElement (claro se isso é um problema ou não).

O LWC suporta o IE11.

O LWC provavelmente crescerá para ter uma comunidade robusta; O LWC é a solução preferida (a partir de 2019) para o desenvolvimento na plataforma do Salesforce .

Embora não seja bem documentado, o LWC também fornece um mecanismo para lidar com questões transversais com um padrão semelhante que os ganchos fornecem para o React . O seguinte artigo descreve esse recurso Intermitendo Interesses no Lightning Web Components (Resolvido) .

O que ainda está faltando?

  • Suporte para TypeScript
  • Documentação sobre o uso do LWC fora do uso do lwc-create-app

Embrulhar

Espero que você tenha achado isso útil.