Suivez votre progression
Accueil Trailhead
Accueil Trailhead

Révision des compétences fondamentales

Objectifs de formation

Une fois cette unité terminée, vous pourrez :
  • Déterminer si vous êtes prêt pour les composants Aura
  • Expliquer ce que sont les composants Aura
  • Savoir où et pourquoi utiliser les composants Aura

Composants Aura pour le développeur Visualforce

Ce module, ainsi que les autres qui constituent ce parcours, sont destinés aux personnes qui maîtrisent Visualforce et qui souhaitent utiliser leur expertise de la plate-forme Lightning pour accélérer leur apprentissage des composants Aura. Peut-être que vous avez vu le module Bases des composants Aura (et ses neuf unités !) et que vous vous êtes dit « J’ai du travail, et ça ne concerne pas Trailhead. Il n’y a rien de plus rapide ? »

Ce module, et ce parcours, sont faits pour vous.

Avant de démarrer, soyez quand même prévenu : le modèle de programmation de composants Aura est plus vaste, plus complexe et plus sophistiqué que Visualforce. Cela signifie qu’il y a plus de choses à apprendre, et que votre connaissance de Visualforce ne sera pas toujours un avantage.

Remarque

Remarque

À compter de la version Spring ’19 (version d’API 45.0), vous pouvez créer des composants Lightning à l’aide de deux modèles de programmation : le modèle Composants Web Lightning et le modèle Composants Aura d’origine. Les composants Web Lightning et les composants Aura peuvent coexister et interagir sur une page. Ce contenu aborde les composants Aura. Pour plus d’informations sur les composants Web Lightning, consultez l’article Présentation des composants Web Lightning.

Une image sera plus parlante. Est-ce que vous avez déjà joué au jeu de l’échelle (également appelé Serpents et échelles) quand vous étiez petit ? L’objectif est d’arriver en haut d’un plateau sinueux. En progressant, vous pouvez tomber sur des échelles qui vous font avancer vers le haut, ou sur des toboggans qui vous renvoient vers le début, en bas. Pour arriver rapidement en haut, il faut tomber sur les échelles et éviter les toboggans.

Imaginons que votre apprentissage des composants Aura est représenté sur un plateau similaire. Les échelles représentent votre expérience de Lightning Platform et Visualforce, et les toboggans sont les choses que vous ne savez pas encore ou les domaines où vos compétences Visualforce ne s’appliquent pas. Comme vous connaissez déjà Lightning Platform, vous pensez sans doute que le plateau est couvert d’échelles pour vous aider à aller jusqu’au sommet.

Comment vous voyez peut-être l’apprentissage des composants Lightning

Hélas, beaucoup des choses que vous savez sur Visualforce ne sont pas des échelles. Les composants Aura sont très différents. Si vous vous basez uniquement sur Visualforce, les choses que vous savez déjà peuvent devenir des toboggans. Atteindre le sommet du plateau est donc un peu plus difficile.

Comment l’apprentissage des composants Lightning est en réalité

L’objectif de ce module et du reste de ce parcours est de vous aider à éviter certains de ces toboggans. Il y en a 22 pour être exact, et ils sont signalés par cette icône : Toboggan !.

Gardez tout de même à l’esprit que le module Bases des composants Aura vous aidera à en éviter beaucoup plus. Si vous avez l’impression de stagner sur des choses apparemment simples (si vous êtes tombé sur un toboggan), peut-être que votre temps serait mieux employé à faire le module plus complet ? C’est juste une idée. (Il y a aussi une icône pour 26 astuces comme celle-ci : Échelle !.)

Concepts de base : Que sont les composants Aura ?

Quand on nous demande en quoi consistent les composants Aura, voici ce que nous répondons en général :

Le modèle de programmation de composants Aura est une infrastructure d’interface utilisateur qui permet de développer des applications Web pour appareils mobiles et de bureau. Un framework moderne qui permet de créer des applications monopages à interface utilisateur réactive et dynamique pour les applications Lightning Platform. Elle repose sur du JavaScript côté client et de l’Apex côté serveur.

Prenons un instant pour bien nous imprégner de tout ce merveilleux jargon…

OK c’est bon. Qu’est-ce que cela veut dire, concrètement, pour des développeurs Visualforce ? Voici le point essentiel à retenir : vous écrivez du code JavaScript côté client et le traitement de l’interface utilisateur a lieu autant que possible côté client, jusqu’à ce que vous ayez besoin d’obtenir des données de Salesforce ou de les y enregistrer.

Nous entrerons directement dans le vif du sujet dans le prochain module de ce parcours, Concepts de base des composants Aura. Si vous voulez savoir plus précisément pourquoi nous avons conçu les composants Aura de cette manière, lisez « Considérations relatives au développement de l’interface utilisateur » dans le module Développement de Lightning Experience (liens dans la section Ressources).

Concepts de base : JavaScript

Dans Visualforce, JavaScript est facultatif. Ce n’est pas le cas avec les composants Aura. Le modèle de programmation de composants Aura a été spécialement conçu pour que vous puissiez agir davantage côté client, en JavaScript. De ce point de vue, il se distingue nettement et délibérément de Visualforce. (Nous vous expliquerons comment en détail dans le prochain module de ce parcours.)

Il est presque impossible d’écrire un composant Aura qui ne contient pas de JavaScript, et la plupart des composants non négligeables réellement utilisés contiennent des dizaines, voire des centaines de lignes de code JavaScript. Vous devez être expérimenté en JavaScript, même pour écrire une application de composants Aura aux fonctionnalités assez simples.

À première vue, JavaScript ressemble à beaucoup de langages que vous connaissez sans doute déjà, notamment Apex. Serait-ce une échelle ? Non, c’est un Toboggan !. Ils sont si différents, notamment du point de vue des objets et de l’héritage, des règles de portée, des bizarreries sur ce qui est vrai ou faux, etc., que vous devrez forcément l’étudier.

Que signifie « expérimenté » ? D’après nous, vous devez être à l’aise avec tous les concepts présentés dans le premier chapitre de Speaking JavaScript, qui est justement disponible gratuitement en ligne. Vous devez notamment comprendre parfaitement les éléments suivants :

  • Les déclarations de variables et les règles de portée
  • Les règles de comparaison des égalités et l’évaluation d’un résultat vrai/faux
  • Ce qu’on entend en JavaScript par « objet » et « héritage » (ce n’est pas la même chose qu’en Apex)
  • La différence entre undefined et null, et quand et comment y prêter attention
  • Comment traiter les fonctions comme des variables, notamment les passer comme paramètres à d’autres fonctions (fonctions de rappel ou callbacks)
  • Enfin, pour maîtriser pleinement le framework, vous devrez comprendre suffisamment les fermetures pour pouvoir reconnaître et utiliser une expression de fonction immédiatement invoquée (IIFE).

Venons-en au fait. Si vous n’êtes pas à l’aise avec les spécificités et les bizarreries du JavaScript (si vous n’avez pas déjà écrit quelques centaines de lignes de JavaScript), nous vous recommandons de l’étudier davantage.

Échelle ! Plus précisément, nous vous recommandons de visionner sur Pluralsight l’excellent cours vidéo Getting Started with JavaScript in Salesforce de Dan Appleman, expert de la plate-forme Lightning, puis de consulter ensuite les ouvrages suivants.

  • Speaking JavaScript d’Axel Rauschmayer
  • Object-Oriented JavaScript de Stoyan Stefanov
  • The Principles of Object-Oriented JavaScript de Nicholas C. Zakas
  • Eloquent JavaScript de Marijn Haverbeke (disponible gratuitement)

Concepts de base : HTML et CSS modernes

Le framework contient un certain nombre de composants intégrés que nous appelons les composants de base Lightning. Ces composants sont modernes, légers et conçus pour s’intégrer à l’expérience Lightning.

Même si la famille s’agrandit rapidement, elle n’est pas encore aussi complète que Visualforce et vous devrez écrire vous-même beaucoup de composants. Assurez-vous d’être à jour sur vos connaissances HTML et CSS. Vous devez être à l’aise avec HTML5, CSS3, et la création de pages réactives, optimisées pour les navigateurs mobiles et l’accessibilité, et compatibles avec tous les navigateurs. Si vous connaissez flexbox, les requêtes de média, ARIA, les unités REM, et que vous savez les utiliser, vous êtes bien parti.

Concepts de base : Salesforce Lightning Design System

Échelle ! Voici une petite astuce sur le CSS. Essayez d’en écrire le moins possible dans vos composants. Utilisez plutôt Salesforce Lightning Design System (SLDS).

En principe, utiliser correctement SLDS est simple.

  • Dès que le balisage de vos composants Lightning le permet, utilisez les composants intégrés de l’espace de noms lightning: (il s’agit des composants Lightning de base dont nous avons déjà parlé). Ces composants sont conçus avec SLDS et l’utilisent automatiquement.
  • Lorsque vous utilisez du balisage HTML, ajoutez les classes utilitaires SLDS aux éléments concernés pour appliquer un style.
  • Vous pouvez même copier directement le balisage sur le site SLDS, puis ajouter des fonctionnalités JavaScript.
  • Ce n’est qu’en dernier recours, ou dans quelques cas spécifiques, que vous devrez écrire votre propre CSS pour un composant.

Un point à surveiller. Si vous visitez le site SLDS (une excellente ressource pour apprendre précisément comment utiliser notre système de conception), vous y rencontrerez souvent le terme « composant ». Il y a toute une bibliothèque de composants !

Toboggan ! Il ne s’agit pas de composants Lightning !

Le site SLDS explique comment utiliser SLDS dans n’importe quelle application Web, qu’elle soit basée sur Salesforce, Ruby on Rails, PHP ou autre. Les « composants » dont parle le site sont des formes abstraites d’éléments d’interface d’une application Web. Elles sont uniquement définies en HTML statique et en CSS. Les composants SLDS n’ont aucun aspect exécutable.

Et surtout : il y a beaucoup plus de « composants » SLDS que de composants intégrés Lightning. SLDS décrit le monde de l’avenir, celui que nous nous efforçons de construire. Pour l’instant, ce n’est pas parce que le site SLDS mentionne un « composant » Activity Timeline qu’il existe un composant Lightning qui effectue cette fonction. De la même manière, ce n’est pas parce qu’il existe un « composant » SLDS pour un badge, un bouton ou une fenêtre modale qu’un composant Lightning qui offre aussi un badge, un bouton ou une fenêtre modale est nécessairement le même. (Sûrement que oui. Mais peut-être bien que non. Et les choses risquent de changer à l’avenir.)

En bref : les composants SLDS ne sont pas des composants Lightning. Si vous ne trouvez pas ce que vous voulez parmi les composants Lightning intégrés, utilisez le site SLDS comme point de départ pour le construire vous-même.