Explorar outras opções de renderização

Objetivos de aprendizagem

Após concluir esta unidade, você estará apto a:

Descrever opções para usar listas e eventos.
Descrever como usar bibliotecas de JavaScript de terceiros e Folhas de estilo.
Otimizar imagens para componentes Web do Lightning.
Explicar as vantagens dos componentes básicos do Lightning.
Descrever como usar a renderização do ciclo de vida e o refluxo.

Introdução

A maioria dos ganhos de desempenho dos componentes Web do Lightning pode ser obtida usando as melhores práticas das unidades anteriores, mas há outras opções de renderização que podem ser usadas para aumentar o desempenho.

Veja a seguir algumas ideias para tornar seus componentes Web do Lightning ainda mais rápidos.

Listas

As listas permitem exibir facilmente uma grande quantidade de dados. No entanto, se não forem bem preparadas, podem apresentar um número excessivo de dados.

Quando usar listas, lembre-se do seguinte:

As listas devem ser criadas usando for:each ou iterator. A diferença entre eles é que iterator tem as propriedades first e last que permitem aplicar comportamentos especiais aos primeiros e últimos itens de uma matriz.
```
<template for:each={contacts} for:item="contact">
  <li key={contact.Id}>{contact.Name}, {contact.Title}</li>
</template>
```
Quando criar componentes de lista personalizados, não permita que um número infinito de itens de lista seja criado. Isso pode prejudicar gravemente o desempenho, especialmente em grandes organizações com muitos registros. Ofereça um mecanismo de paginação ou virtualize a lista (reutilize e reidrate um número limitado de componentes de itens de lista).
Cada elemento da lista deve ter uma key (chave) cujo valor seja exclusivo em todos os filhos.
Tenha cuidado ao usar componentes Web do Lightning dentro da lista para encapsular a funcionalidade. Esse procedimento pode sobrecarregar muito o sistema e causar problemas de desempenho. Especialmente se for uma lista grande.

Eventos

A utilização de eventos é uma ótima opção de comunicação entre componentes e até permite que os desenvolvedores escutem eventos dentro do DOM, já que os componentes Web do Lightning despacham eventos do DOM padrão. Os componentes também podem criar e enviar eventos personalizados. Use eventos para se comunicar com a hierarquia de contenção de componentes. Os ouvintes de eventos podem ser anexados declarativamente ou programaticamente usando addEventListener().

Lembre-se do seguinte ao usar eventos e manipuladores de eventos:

Minimize o número de manipuladores de eventos para apenas aqueles absolutamente necessários. Cada manipulador exige uma sobrecarga e, se forem muitos, pode desacelerar o desempenho do aplicativo.
Verifique se entendeu a propagação de eventos de componentes pai-filho usando bubbles e composed. Geralmente, você deve usar eventos configurados com bubbles:false e composed:false por serem menos prejudiciais. Esses eventos não se propagam pelo DOM e não cruzam o limite de sombra. Se criar um evento com bubbles:true e composed:true, estará criando um contrato de API para o componente que emite o evento.
Para se comunicar entre componentes irmãos em uma única página do Lightning ou em várias páginas, você pode usar o Lightning Message Service. O recurso tem a vantagem de funcionar entre componentes do Visualforce, Aura, LWC, barra de utilitários e entre guias de página em um aplicativo de console.
Se você adicionar um ouvinte a algo que não faz parte do ciclo de vida do componente (como o objeto janela, o objeto documento e assim por diante), você será responsável por remover o ouvinte por conta própria. Para remover os ouvintes de eventos, use removeEventListener() no gancho disconnectedCallback do ciclo de vida. Se isso não for feito, poderá causar vazamentos de memória, o que degradará progressivamente o desempenho de todo o aplicativo do Lightning, até que o usuário feche ou atualize a guia do navegador.
Quando trabalhar com listas, permitir que os eventos se propaguem e registrar um único ouvinte de eventos em um elemento pai em vez de um ouvinte de eventos separado em cada item de lista poderá reduzir significativamente o número de ouvintes de eventos no aplicativo. Isso pode ter um impacto positivo no desempenho.

Folhas de estilo e bibliotecas de JavaScript de terceiros

Sempre que possível, remova as dependências de bibliotecas desnecessárias. Além disso, antes de decidir usar uma biblioteca de terceiros em um componente do Lightning, reavalie se realmente precisa dessa biblioteca. Bibliotecas de manipulação do DOM (como jQuery) e bibliotecas da interface de usuário (como Bootstrap ou jQuery UI), em particular, podem já não ser necessárias para trabalhar com o LWC. O uso de folhas de estilo personalizadas de terceiros ou suas próprias folhas de estilo personalizadas só deve ser feito se o Salesforce Lightning Design System (SLDS) não atender às suas necessidades.

Bibliotecas de manipulação do DOM

O JavaScript evoluiu muito nos últimos anos. Muitos utilitários de manipulação do DOM sem os quais não poderíamos viver, como o jQuery, já se tornaram padrão na linguagem. Estruturas modernas, como os componentes Web do Lightning, também fornecem abstrações que tornam o jQuery menos relevante.

Bibliotecas de interface do usuário

Talvez você queira evitar o uso de bibliotecas de IU como Bootstrap e jQuery UI. Embora essas bibliotecas forneçam componentes úteis, elas têm sua própria identidade de IU que pode entrar em conflito com a identidade do Lightning Experience. Os componentes básicos do Lightning e o SLDS oferecem recursos semelhantes, proporcionando uma experiência de usuário consistente.

Estruturas MVC (Modelo-Visão-Controlador)

De forma geral, bibliotecas como React e AngularJS têm o mesmo foco que a estrutura dos Componentes Web do Lightning: Elas permitem organizar o código e oferecem utilitários para criar componentes. Não é recomendável usar outra estrutura MVC juntamente com o LWC dentro de um componente. No entanto, você pode usar um componente do Lightning como contêiner para hospedar componentes criados com outras estruturas (como React e AngularJS) dentro do Lightning Experience. No entanto, isso está fora do escopo da unidade.

Folhas de estilo personalizadas

Usar folhas de estilo CSS de terceiros ou criar nossos próprios estilos poderá causar problemas de desempenho e fazer com que a IU pareça inconsistente para os usuários finais. Os desenvolvedores devem se familiarizar com o Salesforce Lightning Design System (SLDS), que foi desenvolvido pela Salesforce para criar experiências de IU bonitas e enriquecedoras para usuários finais. O SLDS é muito mais que estilos e CSS, ele inclui diretrizes e princípios de design usados por nossos próprios engenheiros e estruturas de componentes que atendem às necessidades comuns dos desenvolvedores, como Breadcrumbs, Modais, Alertas e muito mais. Ele conta com uma lista incrível de Tokens de design que armazenam atributos de design visual para cores, fontes, espaçamento, dimensionamento e até toque.

O uso do SLDS também pode poupar o tempo dos desenvolvedores ao criar componentes, pois ele é incorporado diretamente no Lightning e não exige que os desenvolvedores criem e mantenham seu próprio CSS.

Usar versões reduzidas de bibliotecas e folhas de estilo

Se for absolutamente necessário usar uma biblioteca de terceiros, lembre-se de usar versões reduzidas da biblioteca e da folha de estilo para aumentar o desempenho do aplicativo.

Componentes básicos do Lightning

Antes de criar seus próprios componentes personalizados do Lightning, familiarize-se com a biblioteca disponível de componentes básicos. Esses componentes incluem lightning-input-field, lightning-record-form e muitos outros. Seu tempo de desenvolvimento pode ser significativamente acelerado com o uso desses componentes básicos. Por exemplo, se você quiser que um grande botão vermelho seja exibido para um usuário, basta usar o lightning-button:

<lightning-button variant="destructive" label="Destructive" onclick={handleClick}></lightning-button>

Veja mais algumas vantagens de usar componentes básicos do Lightning.

Estilos: Os componentes básicos do Lightning são estilizados com a aparência e o comportamento nativos do Lightning.
Desempenho: Os componentes básicos do Lightning são previamente carregados no lado do cliente e não exigem download ou processamento adicional. Nossos esforços de otimização do desempenho também estão concentrados em componentes no namespace do Lightning.
Capacidade de resposta: Por padrão, os componentes básicos do Lightning têm design responsivo.
Inovação: O namespace do Lightning é onde os componentes estão sendo ativamente desenvolvidos. É onde você vai encontrar componentes novos e aprimorados no futuro.
Acessibilidade: Os componentes básicos do Lightning são criados para acessibilidade.
Validação no lado do cliente: Os componentes básicos do Lightning incluem, quando aplicável, validação no lado do cliente.

Otimização de imagem

Sempre que possível, use os ícones do SLDS (baseados em sprite) (usando <lightning-icon> e <lightning-button-icon>) em vez de ícones personalizados. O Salesforce tem centenas de opções de ícones, portanto, antes de perder tempo criando seus próprios ícones personalizados, reutilize os que o SLDS oferece.

Ao usar outras imagens, não se esqueça de bloquear as dimensões da imagem para evitar refluxos e, quando possível, apresentar a imagem com essas dimensões. Por exemplo, não carregue uma imagem de alta resolução para exibir uma miniatura.

Renderização e refluxo do ciclo de vida do componente

Componentes Web do Lightning têm um ciclo de vida gerenciado pela estrutura. A estrutura cria componentes, insere-os no DOM, renderiza-os e remove-os do DOM. Leia sobre o ciclo de vida de renderização para entender o que acontece durante esse ciclo de vida e quais métodos são acionados e em que momento. Minimize o número de vezes que seu componente é renderizado novamente. Em alguns casos, convém bloquear regiões do DOM em dimensões específicas para evitar refluxos do navegador de áreas adjacentes.

Conclusão

O desempenho de um aplicativo é afetado por muitos fatores diferentes. As técnicas de otimização de desempenho dos componentes Web do Lightning descritas neste artigo são diretrizes gerais para ajudar você a criar aplicativos mais rápidos e responsivos. Experimente-as em seu aplicativo.

Procurando ajuda?

Descubra mais