Suivez votre progression
Accueil Trailhead
Accueil Trailhead

Considérations relatives au développement de l'interface utilisateur

Objectifs de formation

Après avoir terminé ce module, vous pourrez :
  • Nommer et décrire la différence entre les deux modèles de développement d'applications Web.
  • Décrire les deux approches différentes pour créer des applications Web avec Visualforce.
  • Décrire les avantages et les inconvénients à créer des applications Web avec les composants Lightning ou Visualforce
  • Énumérer au moins trois scénarios différents dans lesquels il convient d’utiliser des composants Lightning ou Visualforce

Les nouvelles exigences des interfaces utilisateur d'application Web

Au cours de la dernière décennie, voire au-delà, l’expérience des utilisateurs dans les applications Web n’a cessé d’augmenter. Les utilisateurs attendent des expériences immersives, réactives, complètes et hautement interactives, accessibles littéralement au bout de leurs doigts.

Nous l’avions déjà constaté avec des applications à fonctionnalité unique. Des services comme Google Maps ont introduit une manipulation directe des éléments de l'interface utilisateur. Les applications d'analyse ont permis des recherches approfondies dans des graphiques dynamiques et interactifs. Même un simple formulaire d’inscription ou de connexion affiche des messages d’erreur dynamiques, si l’utilisateur saisit des données incorrectes, des animations, des transitions et bien plus. L’interactivité n'est plus une nouveauté, elle est la norme.

Et ce phénomène s'accroît. Les attentes concernant les composants individuels se sont rapidement étendues à l'expérience qu'offre l'application centrale. Aujourd’hui, les applications Web proposent des fonctionnalités telles que des menus glissants, des transitions de page animées et des relations principal-détails dynamiques. Il existe même des éléments applicatifs, tels que des superpositions ou des fenêtres modales. L’écart entre les applications natives et les applications Web n’a jamais été aussi étroit.

Qu’est-ce que cela signifie pour Salesforce ?

L’expérience Salesforce traditionnelle, connue sous le petit nom de Salesforce Classic, est un exemple d’un modèle d’application Web centré sur la page. Ce modèle est idéal pour les fonctionnalités de base, mais convient moins aux expériences nouvelles et plus dynamiques que recherchent les utilisateurs. La raison fondamentale est que ce modèle est dépendant du serveur pour générer une nouvelle page à chaque interaction de l'utilisateur avec l'application.

Pour offrir une expérience plus interactive, il faut faire appel au JavaScript côté client. Dans ce nouveau modèle centré sur l'application, JavaScript permet de créer, de modifier, de transformer et d'animer l'interface utilisateur, plutôt que de la remplacer complètement une page après l'autre. Ce modèle est intéressant, interactif et fluide. Il s'agit de la nouvelle version de Lightning Experience.

Les deux modèles centrés sur la page et sur l'application sont appelés à durer. Il suffit de jeter un coup d'œil sur le Web pour constater que la plupart des applications Web exploitent les deux approches. L'association de ces modèles permet aux applications d'offrir le type d'expérience approprié à chaque utilisateur.

Prenons le temps d’explorer les différentes options que la plate-forme Salesforce offre pour ces modèles.

Visualforce classique

Visualforce est une plate-forme robuste et éprouvée d’élaboration d’applications centrées sur la page. Le framework Visualforce fournit un ensemble de balises robustes, résolues sur le serveur et compatibles avec les contrôleurs standard ou personnalisés, pour simplifier l’implémentation des opérations de base de données ou les autres opérations.

Examinons les concepts de base.
Génération d'interface utilisateur
Côté serveur
Données et logique métier
Contrôleur Apex standard ou personnalisé
Flux de travail
  1. L’utilisateur demande une page
  2. Le serveur exécute le code sous-jacent de la page et envoie le code HMTL résultant vers le navigateur
  3. Le navigateur affiche le code HTML
  4. Lorsque l’utilisateur interagit avec la page, revenez à la première étape.
Avantages
  • Modèle éprouvé
  • Implémentation simple pour une meilleure productivité
  • Division naturelle des grandes applications en petites pages plus faciles à gérer
  • Intégration des métadonnées intégrée
Inconvénients
  • Interactivité limitée (en dehors des fonctionnalités JavaScript ajoutées)
  • Latence supérieure, qui dégrade les performances mobiles

Visualforce est, d’un point de vue conceptuel, similaire à d’autres technologies centrées sur la page telles que PHP, ASP, JSP, et Ruby on Rails. Le framework de métadonnées riches de Salesforce fait de Visualforce une solution productive. Le contrôleur standard simplifie l'accès aux objets directement et via les relations sans exécuter une seule requête. Les autres composants sensibles aux métadonnées sont de type plug-and-play : ajoutez le balisage à une page et vous avez terminé. Ces capacités sont activées et disponibles sur la plate-forme, et peuvent être utilisées dans de nombreux cas d’utilisation.

Visualforce comme conteneur d’application JavaScript

En réalité, les pages Visualforce sont de simples pages HTML contenant des balises supplémentaires qui sont résolues par le serveur. Par conséquent, vous pouvez utiliser une page Visualforce vide comme un conteneur d’application JavaScript. Dans ce scénario, vous n’utilisez pas les balises Visualforce pour créer votre interface utilisateur. Vous chargez en fait votre application JavaScript dans une page vide. Puis, l'interface utilisateur est générée côté client par l'application JavaScript. Ces applications sont généralement appelées des applications monopages (SPA), et sont souvent élaborées à l'aide de frameworks tiers tels que AngularJS ou React.

Examinons les concepts de base.
Génération d'interface utilisateur
Côté client (essentiellement JavaScript)
Données et logique métier
Objets distants ou JavaScript Remoting, contrôleur Apex
Flux de travail
  1. L’utilisateur demande la page Visualforce « vide », contenant une structure de base et JavaScript
  2. La page est renvoyée au navigateur
  3. Le navigateur charge l'application JavaScript
  4. L'application JavaScript génère l'interface utilisateur
  5. Lorsque l'utilisateur interagit avec l'application, JavaScript modifie l'interface utilisateur selon les besoins (retour à l'étape précédente)
Avantages
  • Expériences utilisateur fortement interactives et immersives
Inconvénients
  • Complexe
  • Pas d'intégration des métadonnées intégrée
  • Expérience développement intégrée insuffisante La Developer Console Lightning Platform ne prend pas explicitement en charge ces applications JavaScript. Vous devez généralement les charger en tant que ressources statiques, opération fastidieuse.

Soyons clairs. Si vous pouvez accepter les inconvénients que nous avons décrits, vous disposez d'une excellente méthode pour créer des applications interactives dès aujourd'hui. C'est la raison pour laquelle nous élaborons des boîtes à outils tels que des objets distants et JavaScript Remoting. Si vous êtes un développeur chevronné AngularJS ou React ou d'un autre framework JavaScript, votre expertise vous aidera à développer des applications pour Salesforce avec les outils que vous connaissez.

Mais, si vous êtes ouvert à la nouveauté, nous avons des idées intéressantes sur le futur du développement des applications Web.

Composants Lightning

Les composants Lightning font partie de l’infrastructure de l’interface utilisateur Salesforce permettant de développer des applications Web dynamiques destinées aux appareils mobiles et de bureau.

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 sont des éléments HTML personnalisés, conçus à l’aide du format HTML et de JavaScript moderne. Les composants Web Lightning et les composants Aura peuvent coexister et interagir sur une page.

Examinons-les de plus près.
Génération d'interface utilisateur
Côté client (JavaScript)
Données et logique métier
Lightning Data Service, Apex
Flux de travail
  1. L'utilisateur demande une application ou un composant
  2. Le paquet de composants ou l'application sont renvoyés au client
  3. Le navigateur charge le paquet
  4. L'application JavaScript génère l'interface utilisateur
  5. Lorsque l'utilisateur interagit avec la page, l'application JavaScript modifie l'interface utilisateur selon les besoins (retour à l'étape précédente)
Avantages
  • Expériences utilisateur fortement interactives et immersives
  • En phase avec la stratégie d’interface utilisateur Salesforce
  • Fondés sur des métadonnées, ce qui accélère le développement

Choix de l'outil adéquat

Depuis plusieurs années, Visualforce est une plate-forme mature et bien maitrisée qui vous permet de créer vos applications. Elle est appelée à durer. Les composants Lightning sont la grande nouveauté. Ils offrent de belles perspectives. Même si pour le moment, il vous reste à les découvrir.

Voici ce que l'on peut dire : Il n'est pas nécessaire de faire un choix.

Il faut se représenter les modèles centrés sur la page et centrés sur l'application comme des outils dans votre panoplie de développeur : l'un n'est pas toujours mieux que l'autre, et vous pourrez les exploiter pleinement si vous connaissez leurs avantages et leurs inconvénients. Utilisez l'outil qu'il vous faut.

Voici quelques recommandations pour vous aider à prendre une décision, mais n'oubliez pas, c'est VOUS qui décidez. Au final, utilisez l'outil qui vous convient. N'oubliez pas non plus que les outils évoluent. Ces recommandations évolueront également.

Tâche Recommandation
Je développe pour Lightning Experience Nous recommandons vivement les composants Lightning. Lightning Experience a été élaborée avec des composants Lightning, et les deux fonctionnent parfaitement ensemble.

Vous pouvez utiliser Visualforce si vous avez un code existant ou un projet en cours. Visualforce pour Lightning Experience est totalement prise en charge, avec quelques contraintes.

Pour travailler avec Lightning Experience, vous ne trouverez pas de meilleur outil que l’utilisation de son langage natif, les Composants Lightning.

Je suis développeur pour l'application mobile Salesforce Nous recommandons les composants Lightning. Les caractéristiques Visualforce, en particulier l’orientation centrée sur la page, peuvent ne pas correspondre aux applications mobiles en raison des connexions à latence élevée, limitées et des ressources informatiques limitées. En revanche, les Composants Lightning sont spécialement conçus pour gérer ce contexte.

Les composants Visualforce et Lightning font appel à un langage de balisage similaire. Par exemple, si le balisage Visualforce pour un champ de saisie est <apex:inputText> , pour les composants Lightning il s’agit de <lightning:input>.

Quelle est la différence ? Visualforce traite les balises Salesforce sur le serveur. Les composants Lightning traitent le balisage sur le client. L'avantage d'un traitement sur le client est que le bloc HTML de la page entière ne fait pas d'aller-retour entre le client et le serveur à chaque interaction.

À quelques exceptions près, les composants Lightning conviennent mieux au développement mobile Salesforce. Certains cas nécessitent Visualforce comme application JavaScript. Reportez-vous au guide Lightning Components Developer’s Guide pour plus d’informations.

Je suis en train de développer une expérience centrée sur la page avec une logique côté client limitée. Utilisez les pages Visualforce pour garantir la gestion et la rapidité du développement.
Je suis en train de développer une expérience interactive en JavaScript pour répondre aux exigences de l'expérience utilisateur. Utilisez les composants Lightning, mais consultez d’abord la documentation au sujet des limites.
Je travaille sur un Framework JavaScript de type AngularJS ou React Utilisez une page Visualforce comme conteneur pour votre framework tiers, tel que AngularJS ou React, et votre application.
J'aide des néophytes du développement à créer des applications en assemblant des composants standard ou personnalisés. Utilisez des composants Lightning pour créer des composants personnalisés à réutiliser dans le Générateur d’applications Lightning.
Je développe une expérience interactive en JavaScript et j'ai besoin d'un framework tiers. Utilisez une page Visualforce comme conteneur pour votre framework tiers, tel que AngularJS ou React, et votre application.
J'ajoute des éléments d'interface utilisateur. Par exemple, supposons que vous souhaitiez ajouter un onglet à une page d'accueil d'enregistrement. Cette tâche est un simple glisser-déposer dans le Générateur d'applications Lightning. Utilisez les composants Lightning pour créer des éléments d’interface utilisateur personnalisés.
Je crée une communauté destinée à des clients. Utilisez le générateur d’expérience pour créer une communauté s’appuyant sur Lightning et exploitant les composants Lightning.
Je crée une communauté destinée à des partenaires. Utilisez le générateur d’expérience pour créer une communauté s’appuyant sur Lightning et exploitant les composants Lightning.
J'expose un site Web public non authentifié. Utilisez le générateur d’expérience pour créer un site s’appuyant sur Lightning et exploitant les composants Lightning.
J'assure le rendu de pages au format PDF dans mon application. Utilisez Visualforce. Les composants Lightning ne prennent pas encore en charge le rendu au format PDF.
J’ajoute des éléments à un projet existant comportant un grand nombre de pages Visualforce. Continuez avec Visualforce. Envisagez de migrer les éléments vers des Composants Lightning en utilisant les composants Lightning pour Visualforce.
Je me suis engagé à investir dans la technologie la plus récente. Restez avec nous ! Lancez-vous dans les composants Lightning.
Je commence un nouveau projet. Utilisez les composants Lightning. Si vous ne les avez pas encore découverts, le meilleur moment pour apprendre, c'est maintenant !
Je construis un flux pour guider des utilisateurs tout au long d’un processus métier Utilisez des composants Lightning pour personnaliser les fonctionnalités des écrans du flux.

Choix de l'outil adéquat pour votre organisation

Lorsque vous réfléchissez au choix d'un outil, il est important de ne pas se limiter à la tâche à accomplir. Vous devez aussi tenir compte de votre organisation dans son ensemble et de votre rôle au sein de celle-ci. Examinons comment différents rôles peuvent exploiter au mieux les modèles de développement Salesforce.
Rôle Recommandation
Partenaire ISV Commencez par utiliser les composants Lightning pour de nouvelles applications ou de nouvelles fonctionnalités dans des applications existantes. Regroupez ces unités pour une utilisation sous forme d'abonnement dans Salesforce Classic et Lightning Experience.
SI Commencez par utiliser les composants Lightning pour de nouvelles implémentations. Pour les implémentations en cours, continuez à utiliser Visualforce.
Les développeurs professionnels qui sont des experts en JavaScript et maîtrisent Visualforce Continuez à utiliser Visualforce avec le framework JavaScript de votre choix. Explorez les composants Lightning et envisagez de faire la transition.
Les développeurs qui utilisent les composants Visualforce standard pour les pages Continuez à utiliser Visualforce, mais envisagez aussi le Générateur d’applications Lightning.
Administrateurs pointer-cliquer Utilisez le Générateur d'applications Lightning pour créer des applications et des personnalisations. Faites équipe avec des développeurs et des partenaires pour créer des composants Lightning personnalisés.

Migration vers les composants Lightning

Voici la bonne nouvelle même si vous venez d’adopter Lightning Experience et que les composants Lightning occupent une place plus importante, vos pages Visualforce continuent de fonctionner sur Salesforce. Peu importe si vous utilisez la nouvelle interface ou votre vieil ami Salesforce Classic, Visualforce fonctionne avec les deux. Il n’est pas nécessaire de convertir des pages Visualforce existantes pour continuer à les utiliser.

En revanche, nous encourageons tous les développeurs Salesforce à se familiariser avec les composants Lightning dans la mesure où les applications Web exploitent davantage le modèle centré sur l’application. Vous utiliserez sûrement ces composants dans vos développements futurs.

Le moment est idéal pour faire vos premiers pas. Des fonctionnalités telles que le Générateur d’applications Lightning et les composants Lightning pour Visualforce vont vous mettre le pied à l’étrier. Pour commencer, vous pouvez utiliser un seul composant Lightning dans une page nouvelle ou existante. Vous pouvez utiliser ces composants incorporés aussi bien dans Lightning Experience que dans Salesforce Classic. C'est tellement facile que vous auriez tort de ne pas essayer.

Nous savons qu'il est compliqué de migrer vers un nouveau framework de développement. Mais nous sommes là pour vous aider. Ce parcours contient toutes les astuces, tous les conseils et tous les pièges à éviter dont vous avez besoin pour aborder correctement le développement sous Lightning Experience.