Dans Salesforce, Lightning Web Components (LWC) est un changement révolutionnaire dans le paradigme de programmation de la plate-forme Lightning. Si vous êtes nouveau sur Lightning Platform et que vous avez développé 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 aborderons les aspects suivants:
- Qu'est-ce que LWC?
- Pourquoi LWC?
- Et Aura?
- Par où commencer?
- Structure LWC
Que sont Composants Web Lightning?
LWC est un nouveau modèle de programmation permettant de développer des composants Lightning Salesforce. Il s'agit d'un cadre d'interface utilisateur conçu à l'aide de HTML natif et de JavaScript moderne. Il utilise les normes de base du composant Web et exploite des éléments personnalisés, des modèles, des décorateurs, des modules, le shadow DOM et d'autres nouvelles constructions de langage disponibles dans ECMAScript 7 et au-delà.
Figure 1: 2019 web stack
Les composants Lightning pouvaient auparavant être développés en utilisant le framework de composants aura. Nous avons maintenant un nouveau framework pour développer les mêmes composants Lightning.
Pourquoi LWC?
Nous devons comprendre pourquoi Salesforce a introduit LWC là où nous disposions déjà du framework Aura Component. 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 standards Web n'offraient qu'une base limitée pour le 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 comme un modèle de composant, des modèles, des modules et un shadow DOM 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 entrés dans l'image comme Angular, React et Aura. Tous ces frameworks sont livrés avec ces éléments clés manquants dont nous avions besoin pour créer des composants d'interface utilisateur.
Depuis 2014-2019, il y a eu beaucoup d'améliorations dans la pile Web ou le moteur de navigateur Web natif.
![Lwc 3 [19659021] Figure 3: transformation de la pile Web </p>
</div>
<p> Vous pouvez voir les modèles, les éléments personnalisés et les modules shadow DOM. 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 structure é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 seuls quelques éléments dépendent désormais des frameworks. 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 nos composants d'interface utilisateur. </p>
<p> Avec la puissance de la dernière pile Web, LWC présente de nombreux avantages par rapport aux composants aura, comme suit: </p>
<ol>
<li> Meilleures performances </li>
<li> Normes Web modernes </li>
<li> ] Compatible avec les composants Aura </li>
<li> <strong> Sites de chargement plus rapides </strong> </li>
<li> <strong> Meilleure sécurité, meilleurs tests et meilleure compatibilité avec les navigateurs </strong> </li>
<li> Facilité de développement </li>
</ol>
<h4> Qu'en est-il d'Aura? [19659008] Vous devez vous demander que puisque LWC est là, que va-t-il se passer avec Aura? </p>
<p> La réponse est «non» parce que LWC et Aura se marient parfaitement. 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 parce que vous ne voulez pas inclure un framework personnalisé dans un framework générique, qui est un LWC. </p>
<div id=](https://i1.wp.com/blogs.perficient.com/files/LWC-3.png?resize=300%2C169&ssl=1)
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 qu'Aura a été construit sur ECMAScript 5. LWC est construit sur la dernière version d'ECMAScript, qui est ECMAScript 7. Tous deux partagent les fonctionnalités essentielles de Salesforce comme Lighting Locker, Lightning Data Services 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 Aura Component 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 Aura Component. Mais si vous commencez tout juste maintenant ou si vous créez de nouveaux composants à partir de maintenant, 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 plutôt qu'Aura pour vos nouveaux composants, mais vous n'avez pas à migrer vos composants Aura existants vers un LWC pour le moment.
Par où commencer?
Pour créer et développer LWC et utiliser leurs puissantes fonctionnalités et leurs performances, vous devez configurer Salesforce DX. Contrairement aux composants Aura, le développement de composants LWC dans la console 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 Visual Studio Code, l'interface de ligne de commande Salesforce et une organisation.
Voici quelques étapes recommandées:
- Installez VS Code et configurez-le pour Salesforce Development. Vous pouvez suivre ce module Trailhead.
- Obtenez un exemple de code facile à comprendre pour presque tous les cas d'utilisation ici .
- Pour plus d'exemples, visitez ici .
- Développez vous-même un LWC et essayez votre code en l'exécutant ici .
- Plus important encore, remplissez le Premiers pas avec LWC Trailmix .
Composant LWC structure
Comment se forme un LWC?
Semblable à un composant Aura, le contenu principal d'un LWC est également HTML et JavaScript. Il y a du 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 de fichier LWC
Tous ces noms de fichiers doivent être mis en correspondance au nom du composant. Le dossier et les fichiers doivent suivre certaines règles de dénomination, 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'espaces blancs [19659003] Ne peut pas finir par un trait de soulignement
- Ne peut pas contenir un trait d'union (tiret)
La structure du fichier LWC ressemblerait à ceci:
Maintenant, allons couvrir tous ces fichiers un par un:
HTML
- Possède une balise racine
- Lors du rendu, la balise
JavaScript:
- Pour importer une fonctionnalité déclarée dans un module, utilisez l'instruction import.
- Pour permettre à un autre code d'utiliser des fonctionnalités dans un module, utilisez l'instruction d'exportation.
- LightningElement est un wrapper personnalisé de l'élément HTML standard et nous l'étendons dans le composant et l'exportation.
Configuration:
- Fichier XML qui définit les valeurs de configuration des métadonnées pour le composant
- Nous définissons pour déployer les composants pour différentes pages comme la page App, la page d'enregistrement, etc.
CSS:
- Pour styliser un composant.
- La feuille de style est
Les fichiers dont nous avons discuté – comment le composant serait-il construit avec ces apparences?
Component UI:
Vous pouvez essayer de créer ce composant dans votre configuration de code VS et de 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 du dernier standard Web, de meilleures performances et interopérabilité avec les composants Aura.
Vous pouvez consulter les liens ci-dessous pour en savoir plus sur les composants Web Lightning.
- https://developer.salesforce.com/docs/component-library/documentation/en/lwc
- https://developer.salesforce.com/docs/component-library/overview/components
- https://trailhead.salesforce.com/en/content / learn / projects / quick-start-lightning-web-components
- https://trailhead.salesforce.com/en/users/strailhead/trailmixes/lightning-web-components [19659003] https://www.lightningdesignsystem.com/
- https://trailhead.salesforce.com/content/learn/projects/quick-start-lightning-web- components / set-up-visual-studio-code
Source link