Formateur LWC

Formatez vos Lightning Web Components pour Salesforce.

LWC Source

Formatage

Options

LWC Formaté

Guide LWC

Qu'est-ce que LWC

Lightning Web Components (LWC) est le framework moderne de Salesforce pour construire des interfaces utilisateur. Basé sur les Web Components standards, LWC offre performance et interopérabilité. Un composant LWC comprend un fichier HTML (template), JS (logique), et optionnellement CSS et des métadonnées XML.

Structure LWC

Template HTML

Fichier .html avec directives lwc:if, for:each, et slots pour le contenu.

JavaScript ES6+

Classe avec @api, @track, @wire decorators pour réactivité et data binding.

@wire Adapter

Connexion réactive aux données Salesforce (Apex, records, metadata).

SLDS

Salesforce Lightning Design System pour un style cohérent.

Conventions LWC

  • Nommage : camelCase pour le dossier (myComponent), kebab-case dans le markup (c-my-component)
  • @api : Propriétés publiques exposées aux parents
  • @track : Propriétés privées réactives (optionnel depuis Winter '20)
  • Events : CustomEvent avec this.dispatchEvent() pour la communication

Questions fréquentes

LWC vs Aura Components : quand utiliser quoi ?

LWC est recommandé pour tous les nouveaux développements. Plus performant, basé sur les standards web, meilleure expérience développeur. Aura reste nécessaire pour certaines fonctionnalités legacy (events applicatifs, certains containers). LWC peut être encapsulé dans Aura si besoin.

@track est-il encore nécessaire ?

Depuis Winter '20, les propriétés de classe sont réactives par défaut pour les primitives. @track reste utile pour rendre réactives les mutations d'objets/arrays. Sans @track, il faut réassigner l'objet entier. Pour la clarté, certains l'utilisent encore explicitement.

Comment appeler Apex depuis LWC ?

Deux méthodes : @wire pour un appel réactif automatique quand les paramètres changent, ou appel impératif avec import de la méthode Apex. @wire est préféré pour le fetch initial. Impératif pour les actions utilisateur (save, delete). La méthode Apex doit être @AuraEnabled.

Comment tester les LWC ?

Utilisez @salesforce/sfdx-lwc-jest pour les tests unitaires. Jest avec les utilitaires LWC permet de tester les composants isolément, de mocker @wire et Apex, et de simuler les interactions utilisateur. Les tests s'exécutent localement, pas besoin d'org Salesforce.