Formateur LWC

Formatez vos Lightning Web Components pour Salesforce.

LWC Source

Formatage

Options

LWC Formaté

Guide complet : Lightning Web Components (LWC) pour Salesforce

LWC : le futur du développement Salesforce

Lightning Web Components (LWC) est le framework moderne de Salesforce introduit en 2019 pour remplacer progressivement Aura Components. Contrairement à Aura qui utilisait un modèle propriétaire, LWC s'appuie sur les standards Web Components du W3C : Custom Elements, Shadow DOM, et ES Modules. Cette approche apporte des performances supérieures et une expérience de développement plus proche du développement web standard.

En tant que développeur Salesforce, j'ai vécu la transition d'Aura vers LWC. Le gain de performance est significatif : jusqu'à 30-40% de rendu plus rapide selon Salesforce. Mais le vrai avantage est la courbe d'apprentissage : si vous connaissez JavaScript moderne, vous êtes déjà opérationnel sur LWC.

Structure d'un composant LWC

Un composant LWC est un dossier contenant plusieurs fichiers partageant le même nom de base :

📄 Template HTML

myComponent.html — Template avec directives spécifiques : lwc:if, for:each, lwc:spread. Pas de JSX, du HTML enrichi.

⚙️ Contrôleur JavaScript

myComponent.js — Classe ES6+ avec décorateurs @api, @track, @wire. Lifecycle hooks : connectedCallback, renderedCallback.

🎨 Styles CSS

myComponent.css — CSS scopé automatiquement au composant. Variables CSS SLDS disponibles. Pas de préprocesseur nécessaire.

📋 Métadonnées XML

myComponent.js-meta.xml — Configuration : targets (où le composant peut être utilisé), propriétés exposées dans l'App Builder.

Décorateurs LWC essentiels

  • @api : Propriétés/méthodes publiques exposées aux composants parents. Réactives (re-render si modifiées).
  • @track : Rend réactives les mutations d'objets/arrays (optionnel depuis Winter '20 pour primitives).
  • @wire : Connexion réactive aux données Salesforce. Refresh automatique quand les paramètres changent.

Communication entre composants

  • Parent → Enfant : Propriétés @api passées comme attributs dans le template
  • Enfant → Parent : CustomEvents avec this.dispatchEvent(new CustomEvent('myevent', { detail: data }))
  • Composants non liés : Lightning Message Service (LMS) pour pub/sub

Intégration avec Salesforce

  • @wire avec Apex : Appels réactifs à des méthodes Apex @AuraEnabled(cacheable=true)
  • LDS (Lightning Data Service) : CRUD sur les records sans Apex via @wire(getRecord), @wire(getObjectInfo)
  • SLDS : Salesforce Lightning Design System pour des interfaces natives et accessibles

Traitement local : sécurité garantie

Ce formateur traite vos fichiers LWC entièrement dans votre navigateur. Aucun code n'est envoyé à un serveur — formatez votre code propriétaire Salesforce en toute confidentialité.

Questions fréquentes sur LWC

LWC vs Aura : quand utiliser lequel ?

LWC pour tous les nouveaux développements. Avantages :

  • Performance : Rendu 30-40% plus rapide
  • Standards web : Compétences transférables hors Salesforce
  • Expérience développeur : ES6+, débugger natif, moins de boilerplate
  • Avenir : Salesforce investit massivement dans LWC

Aura reste nécessaire pour :

  • Application Events (non supporté en LWC pur)
  • Certains containers (Lightning Out dans Visualforce)
  • Wrapper pour utiliser LWC dans des contextes Aura

LWC peut être encapsulé dans Aura pour une migration progressive.

@track est-il encore nécessaire ?

Depuis Winter '20, les propriétés sont réactives par défaut pour les primitives (string, number, boolean).

@track reste utile pour :

  • Rendre réactives les mutations d'objets : this.user.name = 'John'
  • Rendre réactives les mutations d'arrays : this.items.push(newItem)

Sans @track sur un objet/array, il faut réassigner complètement :

this.user = { ...this.user, name: 'John' };

Certains développeurs utilisent encore @track explicitement pour la clarté du code.

@wire vs appel impératif Apex : lequel choisir ?

@wire pour le fetch réactif :

  • Appel automatique quand les paramètres changent
  • Idéal pour le chargement initial de données
  • Nécessite @AuraEnabled(cacheable=true)
  • Cache automatique côté client

Appel impératif pour les actions utilisateur :

  • Save, delete, actions non-cacheable
  • Contrôle total sur le moment de l'appel
  • Gestion fine des erreurs avec try/catch

Exemple impératif : import myMethod from '@salesforce/apex/MyController.myMethod'; puis await myMethod({ param: value });

Comment tester les composants LWC ?

@salesforce/sfdx-lwc-jest : Framework officiel pour les tests unitaires LWC.

  • Tests exécutés localement (pas besoin d'org Salesforce)
  • Mock @wire avec @salesforce/sfdx-lwc-jest
  • Mock Apex avec des fichiers de mock
  • Simulations d'interactions utilisateur

Commandes :

  • sfdx force:lightning:lwc:test:setup — Configuration initiale
  • npm run test:unit — Exécuter les tests
  • npm run test:unit:coverage — Avec rapport de couverture

Peut-on utiliser LWC en dehors de Salesforce ?

Oui, via LWC Open Source (LWC OSS) :

  • Salesforce a open-sourcé le framework LWC
  • Utilisable dans n'importe quelle application web
  • Même syntaxe et même modèle de composants

Limitations hors Salesforce :

  • Pas d'accès @wire aux données Salesforce
  • Pas de Lightning Data Service
  • Pas de SLDS natif (mais importable)

LWC OSS est intéressant pour unifier les compétences entre projets Salesforce et non-Salesforce.

Mon code LWC est-il sécurisé avec cet outil ?

Absolument. Le formatage s'effectue entièrement dans votre navigateur :

  • js-beautify et html-beautify fonctionnent localement
  • Aucune requête réseau n'envoie votre code
  • Vos composants LWC ne quittent jamais votre machine
  • L'outil fonctionne même hors ligne après chargement

Formatez votre code Salesforce propriétaire en toute confidentialité.