Exploration des options de rendu supplémentaires

Objectifs de formation

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

Décrire les options d’utilisation des listes et des événements
Décrire comment utiliser les bibliothèques JavaScript et les feuilles de style tierces
Optimiser les images pour les composants Web Lightning
Présenter les avantages des composants Lightning de base
Décrire comment utiliser le rendu et l’ajustement du cycle de vie

Introduction

La plupart des gains de performances relatifs aux composants Web Lightning peuvent être obtenus en appliquant les meilleures pratiques décrites dans les unités précédentes, mais il existe également des options de rendu supplémentaires que vous pouvez utiliser pour améliorer les performances.

Voici quelques idées pour rendre vos composants Web Lightning encore plus rapides.

Listes

Les listes permettent d’afficher facilement de nombreuses données. Cela dit, elles peuvent finir par contenir trop de données si elles ne sont pas bien préparées.

Gardez les points suivants à l’esprit lorsque vous utilisez des listes.

Les listes doivent être créées en utilisant soit for:each, soit iterator. La différence entre les deux est que iterator dispose des propriétés first et last qui vous permettent d’appliquer des comportements spéciaux au premier et au dernier élément d’un tableau.
```
<template for:each={contacts} for:item="contact">
  <li key={contact.Id}>{contact.Name}, {contact.Title}</li>
</template>
```
Lors de la création de composants de liste personnalisés, ne permettez pas la création d’un nombre infini d’éléments de liste. Cela peut sérieusement nuire aux performances, en particulier dans les grandes organisations comportant de nombreux enregistrements. Vous pouvez soit fournir un mécanisme de pagination, soit virtualiser la liste (en réutilisant et réhydratant un nombre limité de composants d’éléments de liste).
Chaque élément de la liste doit disposer d’une propriété key dont la valeur est unique pour tous les enfants.
Soyez prudent lorsque vous utilisez des composants Web Lightning dans la liste pour encapsuler la fonctionnalité. Ils peuvent entraîner la consommation de nombreuses ressources supplémentaires et entraîner des problèmes de performances, surtout s’il s’agit d’une grande liste.

Événements

L’utilisation d’événements est un excellent moyen de communiquer entre les composants et permet même aux développeurs d’écouter les événements dans le DOM, car les composants Web Lightning répartissent des événements DOM standard. Les composants peuvent également créer et répartir des événements personnalisés. Utilisez des événements pour communiquer de manière ascendante au sein de la hiérarchie d’isolation des composants. Les écouteurs d’événements peuvent être attachés de manière déclarative ou bien par programmation à l’aide de la méthode addEventListener().

Gardez les aspects suivants à l’esprit lorsque vous employez des événements et des gestionnaires d’événements.

Réduisez le nombre de gestionnaires d’événements en les limitant à ceux qui sont absolument nécessaires. Chaque gestionnaire nécessite des ressources supplémentaires et si trop de gestionnaires sont créés, ils peuvent ralentir les performances de votre application.
Veillez bien à comprendre la propagation des événements des composants parent-enfant en utilisant bubbles et composed. En règle générale, il convient d’utiliser des événements configurés avec bubbles:false et composed:false, parce qu’ils sont les moins perturbateurs. Ces événements ne remontent pas à travers le DOM et ne franchissent pas la frontière fantôme. Si vous créez un événement avec bubbles:true et composed:true, vous créez un contrat d’API pour le composant émettant l’événement.
Pour communiquer entre des composants frères et sœurs au sein d’une même page Lightning ou sur plusieurs pages, vous pouvez utiliser le service de messagerie Lightning. Il présente l’avantage de fonctionner sur Visualforce, Aura, LWC et les composants de la barre d’utilitaires, ainsi qu’entre les onglets de page d’une application de console.
Si vous ajoutez un écouteur à un élément qui ne fait pas partie du cycle de vie des composants (comme l’objet window, l’objet de document, etc.), il vous incombera ensuite de supprimer l’écouteur. Pour supprimer les écouteurs d’événements, utilisez removeEventListener() dans le point d’ancrage de cycle de vie disconnectedCallback. Si vous ne le faites pas, des fuites de mémoire peuvent se produire et dégrader progressivement les performances de l’ensemble de l’application Lightning, jusqu’à ce que l’utilisateur ferme ou actualise l’onglet de son navigateur.
Lorsque vous travaillez avec des listes, il est souvent plus efficace de laisser les événements se propager et d’enregistrer un seul écouteur d’événements sur un élément parent, plutôt que d’en enregistrer un pour chaque élément de la liste. Cette approche permet de réduire le nombre d’écouteurs nécessaires dans l’application et peut avoir un impact positif sur les performances.

Bibliothèques JavaScript et feuilles de style tierces

Dans la mesure du possible, supprimez les dépendances relatives aux bibliothèques inutiles. De plus, avant de décider d’utiliser une bibliothèque tierce dans un composant Lightning, vous devez vous demander si vous avez vraiment besoin de cette bibliothèque. Les bibliothèques de manipulation du DOM (comme jQuery) et les bibliothèques d’interface utilisateur (comme Bootstrap ou jQuery UI) en particulier peuvent ne plus être nécessaires lorsque vous travaillez avec des composants Web Lightning. Les feuilles de style tierces ou vos propres feuilles de style personnalisées ne doivent être utilisées que si Salesforce Lightning Design System (SLDS) ne répond pas à vos besoins.

Bibliothèques de manipulation du DOM

JavaScript a beaucoup évolué ces dernières années. De nombreux utilitaires de manipulation du DOM autrefois indispensables, comme jQuery, figurent désormais de manière standard dans le langage. Les infrastructures modernes, telles que Composants Web Lightning, fournissent également des abstractions qui rendent jQuery moins pertinent.

Bibliothèques d’interface utilisateur

Il convient d’éviter d’utiliser des bibliothèques d’interface utilisateur telles que Bootstrap et jQuery UI. Bien que ces bibliothèques fournissent des composants utiles, elles possèdent leur propre identité d’interface utilisateur qui peut entrer en conflit avec l’identité de Lightning Experience. Les composants Lightning de base et le SLDS proposent des fonctionnalités similaires tout en offrant une expérience utilisateur cohérente.

Infrastructures MVC (Modèle-Vue-Contrôleur)

De manière générale, les bibliothèques comme React et AngularJS ont le même objectif que l’infrastructure Composants Web Lightning : elles fournissent une organisation du code et des utilitaires pour créer des composants. Il n’est pas recommandé d’utiliser une autre infrastructure MVC en conjonction avec des composants Web Lightning au sein d’un composant. Vous pouvez toutefois utiliser un composant Lightning comme conteneur pour héberger des composants créés avec d’autres infrastructures (comme React et AngularJS) dans Lightning Experience. Cependant, cela sort du cadre de cette unité.

Feuilles de style personnalisées

L’utilisation de feuilles de style CSS tierces ou la création de vos propres styles peut entraîner des problèmes de performances et rendre votre interface utilisateur incohérente aux yeux des utilisateurs finaux. Les développeurs doivent se familiariser avec le Salesforce Lightning Design System (SLDS) développé par Salesforce pour créer des expériences d’interface utilisateur esthétiques et riches pour les utilisateurs finaux. Le SLDS ne se limite pas aux styles et au CSS, il comprend également des directives et des principes de conception utilisés par nos propres ingénieurs, ainsi que des plans de composants répondant aux besoins courants des développeurs tels que les chemins de navigation, les boîtes de dialogue, les alertes et bien plus encore. Il contient une liste incroyable de jetons de conception qui stockent des attributs de conception visuelle relatifs à la couleur, aux polices, à l’espacement, à la taille et même aux aspects tactiles.

Le recours au SLDS peut également faire gagner du temps aux développeurs lors de la création de composants, car il est intégré directement à Lightning et ne nécessite pas que les développeurs créent et gèrent leur propre code CSS.

Utilisation de versions miniatures des bibliothèques et des feuilles de style

Si vous avez absolument besoin d’utiliser une bibliothèque tierce, faites en sorte d’utiliser des versions miniatures de la bibliothèque et de la feuille de style pour augmenter les performances de votre application.

Composants Lightning de base

Avant de créer vos propres composants Lightning personnalisés, vous devez vous familiariser avec la bibliothèque de composants de base proposée. Ceux-ci incluent lightning-input-field, lightning-record-form, et plus encore. L’utilisation de ces composants de base peut accélérer considérablement votre temps de développement. Par exemple, si vous souhaitez qu’un gros bouton rouge soit présenté à un utilisateur, utilisez simplement lightning-button :

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

Voici quelques avantages supplémentaires liés à l’utilisation des composants Lightning de base.

Styles : les composants Lightning de base disposent d’un style correspondant à l’apparence native de Lightning.
Performances : les composants Lightning de base sont déjà chargés côté client et ne nécessitent aucun téléchargement ou traitement supplémentaire. Nos efforts d’optimisation des performances se concentrent également sur les composants de l’espace de noms Lightning.
Réactivité : par défaut, les composants Lightning de base sont conçus de manière réactive.
Innovation : c’est dans l’espace de noms Lightning que les composants sont activement développés. Vous pouvez vous attendre à y voir apparaître à l’avenir des composants nouveaux et améliorés.
Accessibilité : les composants Lightning de base sont conçus pour être accessibles.
Validation côté client : les composants Lightning de base incluent la validation côté client, s’il y a lieu.

Optimisation des images

Dans la mesure du possible, utilisez les icônes SLDS (qui s’appuient sur des sprites) au lieu d’icônes personnalisées (en utilisant <lightning-icon> et <lightning-button-icon>). Salesforce met des centaines d’icônes à votre disposition, donc n’hésitez pas à les utiliser avant de passer du temps à créer vos icônes personnalisées.

Lorsque vous utilisez d’autres images, veillez à verrouiller leurs dimensions pour éviter les ajustements, et diffusez les images dans ces dimensions autant que possible. Par exemple, ne chargez pas une image en haute résolution pour afficher une miniature.

Rendu et ajustement du cycle de vie des composants

Le cycle de vie des composants Web Lightning est géré par l’infrastructure. L’infrastructure crée des composants, les insère dans le DOM, les restitue et les supprime du DOM. Prenez connaissance du cycle de vie du rendu pour comprendre ce qui s’y déroule et quelles méthodes se déclenchent à quel moment. Réduisez le nombre de fois où votre composant est restitué. Dans certains cas, il peut être utile de verrouiller les régions du DOM sur des dimensions spécifiques pour éviter que le navigateur procède à des ajustements des zones environnantes.

Conclusion

De nombreux facteurs différents peuvent avoir un impact sur les performances d’une application. Les techniques d’optimisation des performances des composants Web Lightning décrites dans cet article constituent des directives générales qui devraient vous aider à créer des applications plus rapides et plus réactives. Essayez-les dans votre application.

Besoin d'aide ?

En savoir plus