Lightning Web Components : bien démarrer

Lightning Web Components (LWC) est le framework moderne de Salesforce pour construire des interfaces utilisateur, basé sur les standards du web (Web Components, ES6+) plutôt que sur un framework propriétaire. Pour un éditeur AppExchange, maîtriser LWC est indispensable : c'est le modèle recommandé par Salesforce pour toute nouvelle interface, plus performant et plus facilement audité lors de la Security Review que l'ancien Aura.

1. Anatomie d'un composant LWC

Un composant LWC repose sur trois fichiers minimum, tous nommés de façon identique dans un même dossier :

• monComposant.html — le template, avec une syntaxe de binding déclarative.
• monComposant.js — la classe JavaScript qui hérite de LightningElement.
• monComposant.js-meta.xml — les métadonnées d'exposition (pages Lightning, Flow, application mobile...).

// monComposant.js
import { LightningElement, api, track } from 'lwc';

export default class MonComposant extends LightningElement {
    @api recordId;
    @track message = 'Bonjour';

    handleClick() {
        this.message = 'Composant cliqué';
    }
}

Le template associé utilise une directive simple pour le binding et les événements :

<template>
    <p>{message}</p>
    <lightning-button label="Cliquer" onclick={handleClick}></lightning-button>
</template>

2. Décorateurs essentiels : @api, @track, @wire

Trois décorateurs structurent la majorité des composants :

• @api expose une propriété ou une méthode publique, accessible depuis un composant parent.
• @track rend une propriété réactive : toute modification déclenche un re-rendu (souvent inutile aujourd'hui car les objets/tableaux sont réactifs par défaut, à réserver aux cas de mutation profonde).
• @wire connecte le composant à une source de données réactive : un enregistrement (getRecord), une méthode Apex, ou un objet Lightning Data Service.

import { LightningElement, wire } from 'lwc';
import getContacts from '@salesforce/apex/ContactController.getContacts';

export default class ListeContacts extends LightningElement {
    @wire(getContacts) contacts;
}

3. Communication entre composants

Trois patterns couvrent la quasi-totalité des besoins :

1. Parent vers enfant : propriété publique via @api.
2. Enfant vers parent : émission d'un CustomEvent capté par l'attribut on<nomevenement> sur le parent.
3. Composants non liés : un Lightning Message Service (LMS) pour communiquer entre composants qui ne partagent pas de lien hiérarchique direct, y compris entre LWC et Aura.

4. Pièges fréquents à éviter

• Oublier la vérification CRUD/FLS côté Apex : un composant LWC n'a aucune protection native, tout repose sur le contrôleur Apex sous-jacent.
• Multiplier les appels @wire non nécessaires, ce qui dégrade les performances et complique le cache.
• Manipuler le DOM directement (via querySelector à outrance) au lieu d'utiliser le binding réactif, ce qui casse l'encapsulation Shadow DOM.
• Ignorer les Lightning Design System (SLDS) tokens CSS, ce qui rend le composant visuellement incohérent avec le reste de l'org client.

Pour un composant destiné à un package AppExchange, testez systématiquement son rendu en mode Lightning Experience et en Salesforce Mobile : un composant qui fonctionne parfaitement sur desktop peut casser sur mobile si le CSS n'est pas responsive.

5. Tester avec Jest

Salesforce fournit sfdx-lwc-jest, une extension de Jest adaptée aux composants LWC. Chaque composant critique de votre package devrait avoir des tests unitaires couvrant au minimum le rendu initial et les interactions utilisateur principales :

import { createElement } from 'lwc';
import MonComposant from 'c/monComposant';

test('affiche le message par défaut', () => {
    const element = createElement('c-mon-composant', { is: MonComposant });
    document.body.appendChild(element);
    const p = element.shadowRoot.querySelector('p');
    expect(p.textContent).toBe('Bonjour');
});

Démarrer avec LWC demande un peu de rigueur au début (structure de fichiers, réactivité, Shadow DOM), mais le gain en performance et en maintenabilité est net par rapport aux anciennes approches. C'est aujourd'hui le socle incontournable de toute application AppExchange moderne.