Une introduction aux Composants Web Lightning

Dans Salesforce, les composants Web Lightning (LWC) constituent un changement révolutionnaire dans le paradigme de programmation de la plate-forme lightning. Si vous débutez sur la plate-forme Lightning et que vous développez des solutions en dehors de Salesforce à l’aide de HTML et de JavaScript, vous constaterez que LWC est un jeu d’enfant. Dans ce blog, nous couvrirons les aspects suivants:

• Qu’est-ce que le LWC?
• Pourquoi LWC?
• Qu’en est-il d’Aura?
• Par où commencer ?
• Structure LWC

Que sont les composants Web Lightning?

LWC est un nouveau modèle de programmation pour développer des composants Salesforce lightning. C’est un framework d’interface utilisateur construit en utilisant du HTML natif et du JavaScript moderne. Il utilise des normes de composants Web de base et exploite des éléments personnalisés, des modèles, des décorateurs, des modules, des DOM fantômes et d’autres nouvelles constructions de langage disponibles dans ECMAScript 7 et au-delà.

Figure 1: Pile Web 2019

Les composants Lightning pouvaient auparavant être développés à l’aide du framework de composants aura. Nous avons maintenant un nouveau cadre pour développer les mêmes composants lightning.

Pourquoi LWC?

Nous devons comprendre pourquoi Salesforce a introduit LWC là où nous avions déjà le framework de composants Aura. Pour cela, nous devons remonter à 2014 et jeter un coup d’œil à cette pile web 2014.

En 2014, lorsque le framework Lightning Components a été lancé avec le modèle de programmation Aura, les normes web n’offraient qu’une base limitée pour la pile complète dont les développeurs ont besoin pour créer des applications Web à grande échelle, c’est-à-dire un moteur de rendu, des éléments standard, des événements et un langage de base (ECMAScript 5).

Les éléments clés tels qu’un modèle de composant, des modèles, des modules et un DOM fantôme sont tous absents des standards Web.

Figure 2: pile web 2014

Cela signifie que les normes web ou la pile Web en 2014 n’étaient pas assez puissantes pour nous aider à créer des composants d’interface utilisateur. Dans le même temps, de nombreux cadres différents sont apparus comme Angular, React et Aura. Tous ces frameworks comportaient ces éléments clés manquants dont nous avions besoin pour créer des composants d’interface utilisateur.

Maintenant, de 2014 à 2019, il y a eu beaucoup d’amélioration dans la pile Web ou le moteur de navigateur Web natif.

Figure 3 : transformation de la pile Web

Vous pouvez voir les modèles, les éléments personnalisés et les modules DOM shadow. Ils font tous partie de la pile Web elle-même. Cela signifie que la dernière pile Web est suffisamment puissante pour nous aider à créer ces composants d’interface utilisateur. Nous n’avons pas besoin d’une couche de cadre épaisse entre les deux, ce qui pourrait nuire aux performances de nos composants. C’est la raison de l’introduction du cadre LWC. La plupart des fonctionnalités de LWC font partie de la pile Web elle-même, et seules quelques choses dépendent des frameworks maintenant. LWC est également livré avec des composants lightning de base, tous ces plus de 70 composants de base qui font partie du framework Aura Component ont été convertis en composants Web Lightning, et ils font tous partie du framework LWC. Nous pouvons utiliser ces composants de base pour concevoir dans nos composants d’interface utilisateur.

Avec la puissance de la dernière pile web, LWC présente de nombreux avantages par rapport aux composants aura, comme suit:

1. Meilleures performances
2. Normes web modernes
3. Compatible avec les composants Aura
4. Sites de chargement plus rapides
5. Meilleure sécurité, meilleurs tests et meilleure compatibilité du navigateur
6. Facilité de développement

Qu’en est-il d’Aura?

Vous devez vous demander que puisque LWC est là, que va-t-il se passer avec Aura? Il s’en va ?

La réponse est “non” car LWC et Aura correspondent parfaitement l’un à l’autre. Vous pouvez mettre votre LWC et les Composants Aura sur la même page et vous ne remarquerez aucune différence car votre LWC peut parler à votre Composant Aura et votre Composant Aura peut également parler à votre LWC. Vous pouvez même inclure votre LWC dans un composant Aura où l’inverse n’est pas vrai car vous ne souhaitez pas inclure un framework personnalisé dans un framework générique, qui est un LWC.

Figure 4: Interopérabilité Aura et LWC

En regardant cette image, vous remarquerez que LWC et Aura partageaient les mêmes événements de navigateur, éléments standard et mécanisme de rendu. La différence est que Aura a été construit sur ECMAScript 5. LWC est construit sur la dernière version d’ECMAScript, qui est ECMAScript 7. Les deux partagent les fonctionnalités essentielles de Salesforce telles que le Casier d’éclairage, les Services de données Lightning et les composants Lightning de base.

Pour résumer, LWC est une nouvelle façon de développer vos composants lightning. Cela ne signifie pas que le framework de composants Aura va n’importe où. Vous pouvez toujours utiliser votre modèle de programmation Aura pour créer vos composants d’interface utilisateur si vous êtes plus familier avec le framework de composants Aura. Mais si vous commencez tout à l’heure ou si vous créez de nouveaux composants à partir d’ici, je vous suggère d’utiliser LWC car il présente de nombreux avantages différents – tels que de meilleures performances des composants – et il utilise toutes les fonctionnalités de votre pile Web. Il est toujours préférable d’utiliser LWC sur Aura pour vos nouveaux composants, mais vous n’avez pas à migrer vos composants Aura existants vers un LWC à partir de maintenant.

Par où commencer ?

Pour créer et développer LWC et utiliser leurs puissantes fonctionnalités et leurs avantages en termes de performances, vous devez configurer Salesforce DX. Contrairement aux composants Aura, le développement de composants LWC dans la console du développeur n’est pas possible. Vous devez l’écrire localement, puis le pousser vers votre organisation. Pour ce faire, vous devrez configurer votre environnement de développement. Vous avez besoin d’un ensemble d’outils tels que le code Visual Studio, l’interface de ligne de commande Salesforce et une organisation.

Voici quelques étapes recommandées:

1. Installez VS Code et configurez-le pour le développement Salesforce. Vous pouvez suivre ce module de début de sentier.
2. Obtenez un exemple de code facile à comprendre pour presque tous les cas d’utilisation ici.
3. Pour plus d’échantillons, visitez ici.
4. Développez vous-même un LWC et essayez votre code en l’exécutant ici.
5. Plus important encore, commencez avec LWC Trailmix.

Structure des composants LWC

Comment se forme un LWC?

Semblable à un composant Aura, le contenu principal d’un LWC est également HTML et JavaScript. Il existe un contenu facultatif comme CSS. Mais en plus de ceux-ci pour LWC, un fichier de configuration XML est également inclus, qui définit les valeurs de métadonnées pour le composant.

Figure 5: Structure du fichier LWC

Tous ces noms de fichiers doivent correspondre au nom du composant. Le dossier et les fichiers doivent suivre certaines règles de nommage, comme suit:

• Doit commencer par une lettre minuscule
• Doit contenir uniquement des caractères alphanumériques ou de soulignement
• Doit être unique dans l’espace de noms
• Ne peut pas inclure d’espace blanc
• Ne peut pas se terminer par un soulignement
• Ne peut pas contenir de trait d’union (tiret)

La structure du fichier LWC ressemblerait à ceci:

Maintenant, couvrons tous ces fichiers un par un:

HTML

• A une balise racine <template > qui contient le code HTML
• de votre composant Lorsqu’il s’affiche, la balise <template > est remplacée par <namespace-component-name>

JavaScript:

• Pour importer une fonctionnalité déclarée dans un module, utilisez l’instruction import.
• Pour permettre à un autre code d’utiliser les fonctionnalités d’un module, utilisez l’instruction export.
• LightningElement est un wrapper personnalisé de l’élément HTML standard et nous l’étendons dans le composant et l’exportons.

Configuration:

• Fichier XML qui définit les valeurs de configuration des métadonnées pour le composant
• Nous définissons < cibles > pour déployer des composants pour différentes pages telles que la page d’application, la page d’enregistrement, etc.

CSS:

• Pour styliser un composant.
• La feuille de style est appliquée automatiquement.

Les fichiers dont nous avons discuté – comment le composant serait-il construit avec ces looks?

Interface utilisateur du composant:

Vous pouvez essayer de créer ce composant dans votre configuration VS code et le déployer dans votre organisation. Si vous n’avez pas encore configuré votre code VS, ne vous inquiétez pas. Salesforce fournit également un terrain de jeu pour LWC – vous pouvez essayer ce composant ici.

C’est le meilleur moment pour commencer avec les composants Web Lightning, qui offrent la puissance de la dernière norme Web, de meilleures performances et une interopérabilité avec les composants Aura.

Vous pouvez consulter les liens ci-dessous pour en savoir plus sur les composants Web Lightning.

1. https://developer.salesforce.com/docs/component-library/documentation/en/lwc
2. https://developer.salesforce.com/docs/component-library/overview/components
3. https://trailhead.salesforce.com/en/content/learn/projects/quick-start-lightning-web-components
4. https://trailhead.salesforce.com/en/users/strailhead/trailmixes/lightning-web-components
5. https://www.lightningdesignsystem.com/
6. https://trailhead.salesforce.com/content/learn/projects/quick-start-lightning-web-components/set-up-visual-studio-code

À propos de l’auteur

Sagar Zade est Consultant technique associé chez Perficient. Il est Administrateur certifié salesforce, Créateur d’Applications, Développeur de Plateformes et Développeur de Plateformes certifié Vlocity. Il est impatient d’apprendre et d’explorer les nouvelles technologies utilisées dans salesforce et excité de partager ses connaissances.

Plus de cet auteur