Une introduction aux composants Web Lightning

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.

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:

1. Installez VS Code et configurez-le pour Salesforce Development. Vous pouvez suivre ce module Trailhead.
2. Obtenez un exemple de code facile à comprendre pour presque tous les cas d'utilisation ici .
3. Pour plus d'exemples, visitez ici .
4. Développez vous-même un LWC et essayez votre code en l'exécutant ici .
5. 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