Suivez votre progression
Accueil Trailhead
Accueil Trailhead

Réunion des outils essentiels

Objectifs de formation

Une fois cette unité terminée, vous pourrez :
  • Installer et utiliser des outils de débogage pour navigateur essentiels à la création des composants Aura
  • Installer et exécuter le meilleur IDE pour créer des composants Aura

DÉMARREZ ICI

Si vous avez trouvé que l’unité précédente ressemblait un peu trop à un cours magistral, repartons à zéro.

Le plus dur quand on découvre une nouvelle technologie, c’est de savoir par où commencer. Comment configurer mon système ? Avec quoi écrire mon code ? Où le mettre ? Comment le voir et le tester ? De petites questions de ce type peuvent représenter un véritable obstacle pour se lancer.

N’attendons plus pour faire quelque chose d’utile. Commençons par ici.

Boîte à outils pour développer des composants Aura

Nous allons commencer par vous équiper. Les outils nécessaires au développement des composants Aura sont peut-être ceux que vous utilisez déjà. Cependant, ils ont quelques particularités. Nous allons donc vérifier.

Navigateur : Google Chrome

Échelle ! De nombreux développeurs d’applications Web utilisent Google Chrome, car il dispose d’excellents outils de développement. Si c’est votre cas, vous êtes prêt. Suivant.

Sinon, envisagez de passer à Google Chrome pour développer des composants Aura. Nous allons vous expliquer pourquoi dans nos deux prochains points.

Débogueur de navigateur : Chrome DevTools

Échelle ! Si vous ne vous sentez pas encore en confiance avec Chrome DevTools, nous ne saurions trop vous recommander de consulter leur excellente documentation. Commencez par Getting Started, puis passez à la formation en commençant par DevTools Overview. Chaque minute que vous passerez à apprendre à utiliser DevTools vous fera gagner 10 minutes plus tard. (Le retour sur investissement est même plutôt de l’ordre de 50 contre 1, mais restons prudents.)

Certes, Firefox et Safari ont aussi d’assez bons outils de développement. Pourtant, vous allez changer quand même, à cause de notre prochain point.

Extension pour DevTools : Salesforce Lightning Inspector

Échelle ! Développer des composants Aura sans Salesforce Lightning Inspector revient à vouloir allumer un feu en frottant deux morceaux de bois l’un contre l’autre. C’est possible, mais c’est beaucoup de fatigue inutile.

Qu’est-ce que Lightning Inspector a de si spécial ? Grâce à son plug-in pour DevTools, vous pouvez explorer l’arborescence d’un composant, inspecter ses attributs et mesurer ses performances. Vous pouvez observer et inspecter les appels vers des actions côté serveur et leurs réponses. Il vous aide aussi à comprendre l’ordre dans lequel les événements sont déclenchés et traités. (Nous expliquerons tous ces termes dans le prochain module de ce parcours, Concepts de base des composants Aura.)

Ce sont des tâches critiques dès lors qu’on développe quelque chose d’un peu plus complexe qu’un hello world. Certes, il est possible de le faire à la main avec un bon outil de développement JavaScript, mais ce n’est pas simple. Lightning Inspector facilite la tâche, et c’est ce qui sépare un travail de développement fastidieux d’une expérience agréable.

Éditeur : Visual Studio (VS) Code avec le pack d’extensions Salesforce

Salesforce propose deux éditeurs disposant d’outils dédiés aux composants Aura. Si la Developer Console suffit pour effectuer des modifications rapides et des petits projets d’apprentissage (comme ceux de ce module), ce n’est pas le meilleur outil pour développer de véritables composants et applications.

Échelle ! L’outil le mieux adapté à cette fin est VS Code. Une fois que vous avez installé VS Code, ajoutez Salesforce CLI et les extensions Salesforce pour VS Code qui apportent à VS Code une navigation dédiée, la coloration syntaxique et d’autres fonctionnalités propres aux composants Aura. Cette combinaison vous offre un environnement de développement inégalé pour travailler sur vos composants Aura.

Si vous ne l’avez pas encore, ou que vous utilisez une ancienne version, installez dès maintenant la version actuelle. Le projet iOS Quick Start : Visual Studio Code vous guide tout au long du processus.

Au-delà des concepts de base

Nous recommandons d’abandonner la Developer Console lorsque vous utilisez des composants Aura pour deux raisons.

D’une part, vous écrirez plus de code qu’avec Visualforce. Les composants Aura ne disposent pas encore du « niveau supérieur » d’abstraction. Vous devrez donc écrire du code pour faire des choses qui étaient simples ou automatiques dans Visualforce. Il vous faut donc un éditeur dans lequel il est facile d’effectuer des modifications, de déplacer des éléments, de refactoriser, etc. VS Code est doté d’excellentes fonctionnalités dédiées pour modifier du code. VS Code prend mieux en charge le code JavaScript que la Developer Console. Avions-nous précisé que vous alliez écrire beaucoup de JavaScript ?

De plus, vous aurez beaucoup de ressources ouvertes en même temps, surtout au début. Vous passerez de l’une à l’autre pour comparer, faire des copier/coller, etc. Les fonctionnalités de gestion des onglets et des fenêtres de VS Code sont fantastiques.

Notez quand même le point suivant. Vous n’êtes pas obligé d’utiliser VS Code. Il existe d’autres outils tiers excellents disposant de plug-ins qui permettent de prendre en charge des composants Aura, comme SublimeText. Ils fonctionnent aussi très bien, et constituent un grand pas en avant par rapport à la Developer Console. Si vous préférez un de ces outils, ne vous privez pas ! Consultez les ressources pour en savoir plus.