Découverte des composants Web Lightning.

Objectifs de formation

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

Expliquer le modèle de programmation Composants Web Lightning
Énumérer les avantages des composants Web Lightning
Trouver ce dont vous avez besoin pour commencer à développer des composants Web Lightning

Un chemin vers la programmation avec les normes Web

Il est temps de rassembler vos connaissances Salesforce et vos compétences en matière de technologies standard telles que HTML, JavaScript et CSS pour créer la prochaine génération d’applications Salesforce. Utilisez ces normes courantes afin de créer des composants pour votre organisation Salesforce tout en maintenant la compatibilité avec les composants Aura existants.

Le modèle Composants Web Lightning se concentre à la fois sur l’expérience développeur et utilisateur. Étant donné que nous avons ouvert la porte aux technologies existantes, vous utiliserez les compétences que vous avez développées en dehors de Salesforce pour créer des composants Web Lightning. Tout cela vient compléter ce que vous avez déjà accompli avec les composants Aura.

Avez-vous remarqué une différence d’emploi des majuscules dans ce dernier paragraphe ? Si oui, vous avez l’œil. Nous mettons une majuscule à tous les mots lorsque nous nous référons au modèle de programmation Composants Web Lightning. Nous mettons en minuscule le premier mot lorsque nous nous référons aux composants, eux-mêmes, en tant que composants Web de Lightning.

Par ailleurs, le modèle de programmation Composants Lightning que vous utilisiez auparavant s’appelle désormais Composants Aura. Les composants eux-mêmes sont appelés composants Aura.

Avant d’aller plus loin

Vous devez comprendre les concepts de base des projets Salesforce DX et de Salesforce CLI. Vous devez également utiliser une organisation correctement configurée dans votre compte Trailhead et VS Code avec le pack d’extensions Salesforce. Vous pouvez en apprendre davantage sur ces points en réalisant le projet Prise en main rapide : composants Web Lightning.

Pourquoi utiliser le modèle Composants Web Lightning ?

Les navigateurs modernes s’appuient sur des normes Web dont l’évolution améliore en permanence ce qu’ils peuvent présenter à un utilisateur. Nous voulons que vous puissiez profiter de ces innovations.

Le modèle Composants Web Lightning utilise les principales normes de composants Web et ne fournit que ce qui est nécessaire pour assurer un fonctionnement correct dans les navigateurs pris en charge par Salesforce. Étant donné qu’il repose sur du code qui s’exécute de manière native dans les navigateurs, le modèle Composants Web Lightning est léger et offre des performances exceptionnelles. La majorité du code que vous écrivez est du JavaScript et du HTML standard.

Vous aurez plus de facilité à :

Trouver des solutions dans des emplacements courants sur le Web.
Trouver des développeurs avec les compétences et l’expérience nécessaires.
Utiliser les expériences d’autres développeurs (même sur d’autres plates-formes).
Vous développer plus rapidement.
Utiliser une encapsulation complète pour que les composants soient plus polyvalents.

Et ce n’est pas comme si les composants Web étaient nouveaux. Les navigateurs en créent d’ailleurs depuis des années. Quelques exemples : <select>, <video>, <input>, et n’importe quelle balise dont le rôle dépasse celui de simple conteneur. Ces éléments sont en fait l’équivalent des composants Web. Notre objectif est de permettre au développement de Salesforce d’atteindre ce même niveau d’intégration.

Création de composants simples

Le principal avantage des normes Web est la simplicité. Vous n’avez pas besoin de vous adapter aux caractéristiques spécifique d’une infrastructure donnée. Vous créez simplement des composants en utilisant HTML, JavaScript et CSS. La création de composants Web Lightning se fait en trois petites étapes. Trois étapes. Vraiment. Vous créez (1) un fichier JavaScript, (2) un fichier HTML et éventuellement (3) un fichier CSS.

Le fichier HTML fournit la structure de votre composant.
Le fichier JavaScript définit la logique métier de base et la gestion des événements.
Le fichier CSS détermine l’apparence, la convivialité et l’animation de votre composant.

Il s’agit des pièces essentielles de votre composant.

Voici un composant Web Lightning très simple qui affiche « Hello World » dans un champ de saisie.

HTML

<template>
  <input value={message}></input>
</template>

La balise template est une composante de base du code HTML d’un composant. Elle vous permet de stocker des morceaux de HTML.

JavaScript

import { LightningElement } from 'lwc';
export default class App extends LightningElement {
  message = 'Hello World';
}

Nous aborderons également les détails de l’instruction import et de la déclaration de classe plus tard.

CSS

input {
  color: blue;
}

Vous avez au minimum besoin d’un fichier HTML et d’un fichier JavaScript portant le même nom et situés dans le même dossier (également avec un nom correspondant). Il vous suffit de les déployer dans une organisation avec des métadonnées et tout est bon. Salesforce compile vos fichiers et s’occupe automatiquement de la construction des composants boilerplate.

Composants Web Lightning et Aura : des outils complémentaires

Vous vous demandez si vous pouvez conserver vos composants Aura ? Eh bien oui ! Vous pouvez utiliser les composants Web Lightning sans renoncer à vos composants actuels. Vous finirez probablement par migrer ces derniers vers le modèle Composants Web Lightning, mais les composants Web Lightning que nous créons n’impactent en rien la prise en charge des composants Aura. Les composants Aura et Web Lightning fonctionnent bien ensemble.

Les composants Aura peuvent même contenir des composants Web Lightning (mais pas l’inverse). Cependant une implémentation impliquant uniquement des composants Web Lightning fournit une encapsulation complète et une adhésion évolutive aux normes courantes.

Quelques outils à votre disposition

Pour développer efficacement des composants Web Lightning, utilisez les outils et environnements suivants.

Centre DevOps
Le Centre DevOps de Salesforce offre une expérience améliorée en matière de gestion des modifications et des versions qui permet à votre équipe de développement de bénéficier des meilleures pratiques DevOps, que vous privilégiez un environnement à faible code ou que vous ne juriez que par le code.
Générateur de code
Le générateur de code de Salesforce est un environnement de développement intégré basé sur le Web qui possède toute l’efficacité et la flexibilité de Visual Studio Code, des extensions Salesforce pour VS Code et de l’interface de ligne de commande Salesforce dans votre navigateur Web.
Dev Hub et les organisations tests
Les organisations tests sont des organisations Salesforce à usage unique qui servent à prendre en charge le développement et les tests. Dev Hub est une fonctionnalité qui gère vos organisations tests. Ces deux outils font partie de l’ensemble d’outils Salesforce DX. Salesforce DX est un ensemble intégré d’outils de développement créés et pris en charge par Salesforce.
- Salesforce CLI
  L’interface de ligne de commande Salesforce CLI offre un moyen rapide de créer et configurer des organisations tests, ainsi que de déployer des composants. Cet outil fait également partie de l’ensemble d’outils Salesforce DX.
- Bibliothèque de composants Lightning
  La référence pour les composants Aura et Web Lightning et leur utilisation se trouve à l’adresse https://developer.salesforce.com/docs/component-library/overview/components. Vous pouvez également consulter la bibliothèque via l’instance de votre organisation à l’adresse http://<MonNomDeDomaine>.lightning.force.com/docs/component-library. En consultant la bibliothèque par le biais de votre instance, vous ne voyez que la version qui correspond à votre organisation. Et, lorsque vous créez vos propres composants personnalisés, ils apparaissent également dans la bibliothèque.

GitHub
Nous partageons des extensions, des exemples et bien plus via les référentiels GitHub. Créez-vous un compte GitHub pour pouvoir profiter de ces offres.
- Pack d’extension Salesforce pour Visual Studio Code
  Nous nous sommes concentrés sur Visual Studio comme outil de développement fournissant un environnement intégré pour vous permettre de créer vos composants. Le pack d’extension Salesforce pour Visual Studio Code fournit une aide contextuelle, des avertissements sur le linting et des commandes intégrées : https://marketplace.visualstudio.com/items?itemName=salesforce.salesforcedx-vscode.
- Recettes Composants Web Lightning
  Nous proposons un référentiel GitHub pour vous aider à voir comment fonctionnent les composants Web Lightning. Vous pouvez cloner, publier et jouer avec ces exemples dans votre propre organisation test, mais également les voir en action. Récupérez-le sur https://github.com/trailheadapps/lwc-recipes.
- Démonstration avec une application pour vélos électriques
  Ce référentiel GitHub est un autre excellent moyen de voir comment fonctionnent les composants Web Lightning. Cette démonstration vous présente une implémentation de bout en bout des composants Web Lightning en vue de créer une application. Essayez cet exemple dans votre propre organisation test. Récupérez-le sur https://github.com/trailheadapps/ebikes-lwc.
- Lightning Data Service (LDS)
  Accédez aux données et métadonnées de Salesforce via Lightning Data Service. Les composants Lightning de base qui fonctionnent avec des données sont créés sur LDS. Personnalisez vos propres composants pour tirer parti de la mise en cache LDS, du suivi des modifications, des performances, etc.
- Lightning Locker
  Les composants Web Lightning appartenant à un espace de noms sont protégés des composants des autres espaces de noms par le biais de Lightning Locker. Lightning Locker met également en avant des meilleures pratiques qui améliorent la prise en charge de votre code en n’autorisant l’accès qu’aux API compatibles et en éliminant l’accès aux éléments internes non publiés de l’infrastructure.

Suite des opérations

Bienvenue dans le monde des composants Web Lightning

Nous utiliserons la démo relative à l’application pour vélos électriques afin de voir ce que vous pouvez faire avec les fichiers HTML et JavaScript.

Besoin d'aide ?

En savoir plus