Divulgation progressive et rendu conditionnel

Objectifs de formation

Une fois cette unité terminée, vous pourrez :

• Présenter les avantages de la divulgation progressive
  
• Décrire ce qu’est le rendu conditionnel
  

Optimisation des performances grâce à la divulgation progressive

L’affichage à l’écran de toutes les données et de tous les outils disponibles n’est généralement pas considéré comme une bonne pratique en matière d’expérience utilisateur. Procéder ainsi peut également avoir un impact significatif sur les performances de votre application. Les composants Lightning ajoutés à une présentation de page sont instanciés lorsque la page est chargée, ce qui vient augmenter le temps de chargement global de la page. C’est pourquoi les directives en matière de conception interactive privilégient la divulgation progressive.

« La divulgation progressive est une technique de conception d’interaction souvent utilisée dans le domaine de l’interaction personne-machine pour aider à maintenir l’attention d’un utilisateur en réduisant l’encombrement, la confusion et la charge de travail cognitive. Elle améliore l’ergonomie en présentant uniquement les données minimales requises dans le cadre de la tâche à accomplir. » (Wikipedia)

En d’autres termes, selon Jakob Nielsen, « La divulgation progressive reporte les fonctionnalités avancées ou rarement utilisées vers un écran secondaire, ce qui rend les applications plus faciles à prendre en main et moins sujettes aux erreurs. »

Dans Lightning Experience, il est facile d’implémenter la divulgation progressive et de différer l’apparition des données ou fonctionnalités qui ne sont pas essentielles à la tâche à accomplir. Il existe plusieurs approches pour différer la création de composants, mais examinons deux d’entre elles en détail : l’instanciation paresseuse (parfois appelée chargement différé) et le rendu conditionnel.

Instanciation paresseuse

L’instanciation paresseuse (ou chargement différé) implique qu’un objet ou un composant n’est pas créé tant qu’il n’est pas utilisé pour la première fois. Vous pouvez mettre cela en place dans Lightning Experience ou en exploitant différents composants d’onglets.

Instanciation paresseuse dans Lightning Experience

Les créateurs d’applications Lightning peuvent implémenter la divulgation progressive de manière déclarative en plaçant des composants dans des zones spécifiques de Lightning Experience où ils sont instanciés de manière paresseuse. Parmi ces zones, on retrouve notamment ce qui suit :

• Des composants d’onglets standard, qui permettent de masquer les informations et de les charger uniquement lorsque l’utilisateur sélectionne un onglet en particulier.
  
• Des actions de composant Lightning ou des actions rapides, qui permettent de charger les composants uniquement lorsque l’utilisateur clique sur un bouton.
  
• Une barre d’utilitaires, qui peut être ajoutée à n’importe quelle application et qui comprend également des boutons permettant de charger des composants lorsque l’utilisateur clique dessus.
  

Instanciation paresseuse dans vos propres composants

Vous pouvez exploiter l’ensemble de composants d’onglets tels que <lightning-tabset> et <lightning-tab>, qui prennent en charge l’instanciation paresseuse par défaut.

<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>

TabSet et le composant d’onglets du générateur d’application sont chargés de manière paresseuse, mais les onglets de la console Lightning sont chargés en tant qu’espaces de travail et les sous-onglets ne sont pas chargés de manière paresseuse.

Rendu conditionnel

Le rendu conditionnel implique qu’un objet ou un composant n’apparaîtra qu’une fois qu’il existera une correspondance avec un état ou un comportement donné. Il existe trois options pour restituer de manière conditionnelle vos composants Web Lightning.

• La visibilité des composants dynamiques du générateur d’application Lightning
  
• lwc:if|elseif|else
  
• CSS
  

Visibilité des composants dynamiques du générateur d’application Lightning

La première option est déclarative et intégrée directement au générateur d’application. La visibilité dynamique des composants peut contrôler le moment où un composant apparaît sur une page Lightning en ajoutant des conditions et une logique de filtrage à ses propriétés dans le générateur d’application Lightning. Par exemple, vous pouvez créer un filtre qui entraîne l’affichage d’un composant de texte enrichi sur une page d’opportunité lorsque le montant de l’opportunité est supérieur ou égal à un million de dollars.

lwc:if|elseif|else

Cette deuxième option permet aux développeurs de restituer conditionnellement des éléments DOM en utilisant lwc:if|elseif|else pour instancier de manière paresseuse certaines parties de l’interface utilisateur :

<template>

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

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

</template>

Ici, si « something » = true, la première balise <div> et tous ses enfants sont créés, tandis que la seconde balise <div> et l’ensemble de ses enfants ne sont pas restitués. Le résultat serait différent si l’expression « something » devenait « false ». Dans cette situation, la première balise <div> serait détruite et la seconde serait restituée.

CSS

La troisième option exploite des styles CSS pour basculer la visibilité et peut être implémentée à l’aide du modèle suivant et de JavaScript.

Modèle

JavaScript

get className(){

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

}

Le composant <div> et tous ses enfants sont créés et restitués à l’avance, mais sont masqués à l’utilisateur jusqu’à l’exécution du JavaScript. Gardez à l’esprit que l’utilisation de CSS permet de créer le composant à l’avance : il n’y a donc aucun gain de performances lors du chargement de la page comme c’est le cas avec les deux autres méthodes. Cependant, lorsque le JavaScript est exécuté, le composant s’affiche immédiatement à l’utilisateur sans qu’il soit nécessaire de l’initialiser ou de le restituer.

Une différence importante entre le masquage CSS et l’utilisation de if:true/false est qu’avec l’approche CSS, le composant reste actif et son état est donc conservé. L’utilisation de if:true|false détruit et recrée le composant de sorte que l’état soit perdu (réinitialisation).

Il convient d’utiliser ces options dans l’ordre présenté. Utilisez d’abord la méthode déclarative décrite dans la première option (toutefois, elle n’est disponible que sur les composants configurés pour le générateur d’application Lightning). Ensuite, il convient d’utiliser l’approche employant if:true|false (deuxième option), qui fonctionne avec tous les composants. Ces deux options permettent à vos pages de se charger d’emblée plus rapidement en différant la création et la restitution du composant ou de l’arborescence des éléments inclus jusqu’à ce que la condition soit remplie. La troisième option, qui s’appuie sur le langage CSS, doit être utilisée lorsque les développeurs souhaitent précharger un composant, puis l’afficher dans l’interface utilisateur lorsque la condition est remplie.

Maintenant que vous en savez plus sur les principales options de rendu, découvrons d’autres options qui peuvent vous aider à améliorer les performances.

Ressources

• Aide Salesforce : Pages Lightning dynamiques
  
• Guide du développeur de composants Web Lightning : Restitution conditionnelle d’éléments DOM
  
• Composants Web Lightning : Onglet
  
• Guide du développeur de composants Web Lightning : Restitution de plusieurs modèles