Usar a divulgação progressiva e a renderização condicional

Objetivos de aprendizagem

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

• Explicar as vantagens da divulgação progressiva.
  
• Descrever a renderização condicional.
  

Otimizar o desempenho com a divulgação progressiva

Mostrar todos os dados e ferramentas disponíveis na tela geralmente não é uma boa prática de experiência do usuário. Isso também pode afetar significativamente o desempenho do aplicativo. Os componentes do Lightning adicionados a um layout de página são instanciados quando a página é carregada, contribuindo para o tempo geral de carregamento da página. Por isso, as diretrizes de design interativo favorecem a divulgação progressiva.

“A divulgação progressiva é uma técnica de design de interação frequentemente usada na interação humano-computador para ajudar a manter o foco da atenção do usuário, reduzindo a desordem, a confusão e a carga de trabalho cognitiva. Isso melhora a usabilidade ao apresentar apenas os dados mínimos necessários para a tarefa em questão.” (Wikipedia)

Em outras palavras, de acordo com Jakob Nielsen, “A revelação progressiva retarda recursos avançados ou raramente usados em uma tela secundária, facilitando o aprendizado dos aplicativos e reduzindo a propensão a erros.”

No Lightning Experience, é fácil implementar a divulgação progressiva e retardar dados ou recursos que não são essenciais para a tarefa em questão. Existem várias abordagens para o retardamento da criação de componentes, mas vamos dar uma olhada em duas delas com mais detalhes: instanciação lenta (às vezes chamada de carregamento lento) e renderização condicional.

Instanciação lenta

Instanciação lenta (ou carregamento lento) significa que um objeto ou componente não é criado até ser usado pela primeira vez. Você pode fazer isso no Lightning Experience ou aproveitando diferentes componentes de guias.

Instanciação lenta no Lightning Experience

Os Criadores de aplicativo Lightning podem implementar a divulgação progressiva de forma declarativa, colocando componentes em áreas específicas no Lightning Experience, onde eles são lentamente instanciados. Essas áreas incluem:

• Componentes de guias padrão que permitem que as informações sejam ocultadas e carregadas somente quando o usuário seleciona a guia.
  
• Ações do componente do Lightning ou Ações rápidas, que permitem que os componentes sejam carregados somente quando o usuário clica em um botão.
  
• Uma Barra de utilitários que pode ser adicionada a qualquer aplicativo e também inclui botões que podem carregar componentes quando o usuário clica neles.
  

Instanciação lenta em seus próprios componentes

Aproveite o conjunto de componentes de guias, como <lightning-tabset> e <lightning-tab> que dão suporte à instanciação lenta por padrão.

<lightning-tabset>

  <lightning-tab label="Item One"> Content for tab 1 </lightning-tab>

  <template lwc:if={showTabTwo}>

    <lightning-tab label="Item Two"> Content for tab 2 </lightning-tab>

  </template>

</lightning-tabset>

O TabSet e o componente de guias do Criador de aplicativo são carregados em modo lento, mas as guias no Console do Lightning são carregadas como espaços de trabalho e as subguias não são carregadas em modo lento.

Renderização condicional

Renderização condicional significa que um objeto ou componente só aparecerá quando um estado ou comportamento for correspondido. Há três opções para renderizar condicionalmente seus componentes Web do Lightning.

• Visibilidade do componente dinâmico do Criador de aplicativo Lightning
  
• lwc:if|elseif|else
  
• CSS
  

Visibilidade do componente dinâmico do Criador de aplicativo Lightning

A primeira opção é declarativa e incorporada diretamente no Criador de aplicativo. A visibilidade do componente dinâmico pode controlar quando um componente é exibido em uma página do Lightning com a inclusão de condições de filtro e lógica a suas propriedades no Criador de aplicativo Lightning. Por exemplo, você pode construir um filtro que faça com que um componente em rich text em uma página de oportunidade seja exibido quando o valor da oportunidade for maior ou igual a US$ 1 milhão.

lwc:if|elseif|else

A segunda opção permite que desenvolvedores renderizem condicionalmente elementos DOM usando lwc:if|elseif|else para instanciar lentamente partes da IU:

<template>

  <div lwc:if={something}>Conditional text displayed if something = true</div>

  <div lwc:else>Conditional text displayed if something = false</div>

</template>

nesse caso, se “algo” = true, a primeira marca <div> e todos os filhos são criados. Porém, a segunda marca <div>, e todos os filhos, não são renderizados. Isso mudaria quando a expressão “alguma coisa” mudasse para false. Nessa situação, a primeira marca <div> seria destruída e a segunda seria renderizada.

CSS

A terceira opção utiliza estilos CSS para alternar a visibilidade e pode ser implementada usando o seguinte modelo e JavaScript.

Modelo

JavaScript

get className(){

  return isError ? 'slds-show': 'slds-hide';

}

O componente <div> e todos os seus filhos são previamente criados e renderizados, mas ficam ocultos para o usuário até que o JavaScript seja executado. É importante considerar que, se usar o CSS, o componente é previamente criado, portanto não há ganho de desempenho no carregamento da página, como ocorre com os outros dois métodos. No entanto, quando o JavaScript é executado, o componente é imediatamente exibido para o usuário sem que seja necessário inicializar ou renderizar.

Uma diferença importante entre a ocultação no CSS e if:true/false é que, com a abordagem de CSS, o componente permanece ativo e, portanto, o estado é mantido. O uso de if:true|false destrói e recria o componente, portanto o estado é perdido (redefinido).

Você deve usar essas opções na ordem apresentada. Primeiro, use a opção declarativa discutida na opção um, embora ela só esteja disponível em componentes configurados para o Criador de aplicativo Lightning. O segundo deve ser usado com a abordagem de if:true|false da opção dois, que funciona com todos os componentes. As duas opções ajudam suas páginas a carregar mais rápido inicialmente, adiando a criação e a renderização do componente ou da árvore de elementos anexada até que a condição seja atendida. A terceira opção, CSS, deve ser usada quando os desenvolvedores desejam carregar previamente um componente e, em seguida, mostrá-lo na interface de usuário quando a condição for atendida.

Agora que você já sabe mais sobre as principais opções de renderização, vamos conhecer algumas outras opções que podem ajudar a melhorar o desempenho.

Recursos

• Ajuda do Salesforce: Dynamic Lightning Pages
  
• Guia de desenvolvimento de componentes Web do Lightning: Renderizar elementos DOM condicionalmente
  
• Componentes Web do Lightning: Guia
  
• Guia de desenvolvimento de componentes Web do Lightning: Renderizar vários modelos