Suivez votre progression
Accueil Trailhead
Accueil Trailhead

Bien travailler avec JavaScript

Objectifs de formation

Une fois cette unité terminée, vous pourrez :
  • Citer trois éléments à surveiller lors de l’écriture en JavaScript pour vos composants Aura
  • Citer trois navigateurs qui fonctionnent bien avec les composants Aura et un qui ne fonctionne pas, et expliquer pourquoi ce dernier pose problème
  • Implémenter un modèle pris en charge pour inclure du code d’une bibliothèque JavaScript dans vos composants.

Trucs et astuces

Si les deux derniers modules de ce parcours étaient trop abstraits ou trop lents pour vous, vous êtes au bon endroit. Nous pensons que beaucoup de développeurs Visualforce expérimentés passeront directement à ce module.

C’est normal ! Les autres modules sont importants si vous voulez devenir un expert en composants Aura. Cependant, ce module est prévu pour fonctionner seul et pour pouvoir être survolé. Nous espérons qu’il vous sera immédiatement utile, et que vous y reviendrez régulièrement.

Allons-y.

JavaScript est sensible à la casse

Toboggan ! Rien ne vous fera autant tourner en bourrique que cette différence par rapport à Visualforce et Apex. Si le nom de votre objet dans l’API est Expense__c et qu’un champ s’appelle Amount__c, et que vous essayez d’y accéder par expense__c.amount__c (ce qui fonctionne dans Visualforce), cela ne fonctionnera pas en JavaScript.

Pire, parfois vous n’aurez même pas de message d’erreur utile. Croyez-en mon expérience, vous pouvez perdre beaucoup de temps à essayer d’identifier le problème.

Apex et Visualforce vous laissent prendre des libertés avec les noms des ObJEtS, CHAMPS, mETHODES, etc. Cela ne fonctionnera pas en JavaScript. Les majuscules et les minuscules sont toujours importantes. Nous préférerions que ce ne soit pas le cas, mais ce n’est pas à nous d’en décider.

Échelle ! Nous vous recommandons d’utiliser toujours et partout la bonne capitalisation, même dans du code Apex ou SOQL où vous pourriez vous permettre de l’ignorer. Si vous adoptez une discipline stricte, les erreurs de casse ne viendront plus vous hanter.

Cela signifie également que vous devrez apprendre les noms corrects des champs système tels que Id et Name. Échelle ! Souvenez-vous que vous pouvez toujours chercher les noms corrects des champs d’un objet dans Setup.

Lightning Locker et les lois de la physique

Permettre d’exécuter du JavaScript de manière sécurisée dans un environnement partagé et complexe tel que Salesforce (où notre code, votre code, et le code de paquets gérés sont tous exécutés dans le même contexte) représente un défi important.

Nous avons donc développé un mécanisme d’isolation innovant appelé Lightning Locker. (C’est une excellente solution à un problème difficile, à tel point que les nouvelles normes destinées aux navigateurs ont adopté certains aspects de notre solution.) Nous sommes en train d’activer Lightning Locker pour l’ensemble de nos clients. Nous le faisions auparavant avec une mise à jour critique, mais depuis l’été 2017, vous pouvez contrôler l’activation de Lightning Locker en choisissant la version 40.0 (ou supérieure) de l’API pour votre composant.

Nous vous encourageons à développer tous vos composants Aura en activant Lightning Locker (c’est-à-dire en utilisant la version 40.0 ou supérieure de l’API). Lightning Locker modifie les « lois de la physique » de votre code JavaScript. Nous avons compris qu’il était beaucoup plus simple de créer code correspondant à ces nouvelles lois que d’adapter du code écrit dans un monde parallèle.

Que fait précisément Lightning Locker ? Voici une liste de ses effets à haut niveau.
  • Lightning Locker force l’application de JavaScript ES5 en mode strict.
  • Lightning Locker restreint l’accès aux références globales.
  • Lightning Locker assure l’isolation des composants du DOM.
  • Lightning Locker bloque l’accès aux méthodes privées ou non prises en charge des composants Lightning.
  • Lightning Locker est associé à une stratégie de sécurité des contenus (CSP) plus stricte afin d’empêcher les attaques en falsification de requête inter-site. Elle est contrôlée via un paramètre de l’organisation.

Nous traiterons quelques points essentiels dans cette unité. Pour en savoir plus, consultez la section Ressources.

JavaScript ES5 en mode strict

Quand Lightning Locker est activé, il active également JavaScript ES5 en mode strict pour tout votre code JavaScript. Tout se passe comme si vous commenciez tout votre code JavaScript par « use strict ». Si vous ne connaissez pas le mode strict, c’est le bon moment pour vous renseigner.

Toboggan ! La première chose que vous devez savoir, c’est que les variables locales doivent être déclarées avec var. Voici un exemple dans une méthode d’action.

myAction : function(component, event, helper) {
    ...
    counter = 1;       // NO!!!!!
    var counter = 1;   // YES!
    counter++;
    ...
}

Échelle ! Le mot « strict » est un peu intimidant, mais ce mode est en fait très utile. Pensez au mode strict comme à cet instituteur qui vous effrayait quand vous étiez petit, mais qui vous a aidé bien plus que vous ne l’imaginiez à l’époque. Le mode strict oblige à adopter beaucoup des meilleures pratiques de JavaScript. Il s’agit d’une une échelle pour tout votre JavaScript.

Conseil

Conseil

Échelle ! Si vous croyez aux vertus de la discipline, vous pouvez utiliser un outil de validation comme ESLint pour être encore mieux guidé qu’avec le seul mode strict. ESLint vous aidera non seulement avec la syntaxe JavaScript, mais aussi en vous présentant un grand nombre de bonnes pratiques. Il peut même être utilisé pour garantir des normes de code spécifiques à votre équipe. Un bon outil lint est sans aucun doute une bonne échelle.

Utilisation de bibliothèques JavaScript tierces

Lightning Locker applique des restrictions aux références globales. Vous constaterez ces restrictions dans l’objet window, pour votre propre code et toute librairie tierce que vous utilisez. Lightning Locker offre des versions sécurisées des objets non intrinsèques tels que window. En conséquence, il faudra faire quelques ajustements dans la manière dont vous ajoutez des bibliothèques JavaScript à vos applications.

Échelle ! Pour créer une bibliothèque réutilisable et facile à utiliser dans vos composants, assignez explicitement la bibliothèque à l’objet window. La bibliothèque sera ainsi disponible pour tous les composants qui l’utilisent. Quelques lignes de code suffisent pour présenter le fonctionnement général de cette technique. Pour créer une bibliothèque contenant des fonctions à utiliser dans votre code (par exemple, Util.logHere(’Début du téléchargement’)), déclarez la bibliothèque dans une ressource statique en utilisant une expression de fonction immédiatement invoquée (IIFE), comme ici.
window.Util = (function() {
    return {
        logHere: function(msg){
            console.log('Got here.');
            if(msg) console.log(msg);
        }
    }
})();

Cette construction peut-être inhabituelle attache votre « bibliothèque » à l’objet window, ce qui la rend disponible pour tous nos composants. Une fois que vous avez la ressource statique, utilisez <ltng:require> pour inclure la librairie dans votre composant.

Pour en savoir plus, notamment sur la manière d’adapter cette technique à des bibliothèques complexes ou tierces, consultez Modularizing Code in Lightning Components sur le blog des développeurs Salesforce.

Différences de Content Security Policy (CSP) par rapport à Visualforce

Le conteneur Visualforce est isolé de tous les autres conteneurs d’application Salesforce, sa CSP peut donc être assez souple. Votre code Visualforce peut charger du JavaScript, des images ou d’autres ressources depuis n’importe quelle URL. Vous pouvez également exécuter n’importe quelle chaîne de caractères comme du JavaScript avec eval().

Les composants Aura, eux, ne sont pas exécutés dans un conteneur isolé. Le modèle de programmation a donc une stratégie de sécurité des contenus plus stricte. Vous pouvez charger des images, des styles et d’autres ressources non exécutables à partir de sites extérieurs à Salesforce, mais seulement après avoir créé un site de confiance CSP pour chaque domaine. Toboggan ! Vous ne pouvez charger de JavaScript que depuis une ressource statique sur Salesforce.

Mise en place par deux mises à jour critiques, la stratégie CSP appliquée par Lightning Locker est plus stricte que jamais. Cette CSP interdit les mots-clés unsafe-inline et unsafe-eval pour les scripts en ligne (script-src). Cette restriction vient s’ajouter aux restrictions générales de la stratégie de sécurité des contenus des composants Aura. Vous ne pouvez pas utiliser de JavaScript en ligne, ou eval() une chaîne de caractères en tant que JavaScript. Cela signifie que vous devez mettre à jour votre JavaScript tiers vers des versions modernes qui n’emploient pas ces techniques anciennes et peu sécurisées.

Remarque

Remarque

Tous les navigateurs ne prennent pas en charge cette CSP. IE11, en particulier, pose problème. Dans les navigateurs qui ne prennent pas en charge la CSP, notamment IE11, Lightning Locker est désactivé. Pour améliorer la sécurité, nous vous recommandons fortement de passer à un navigateur moderne, par exemple les dernières versions de Chrome, Safari, Firefox ou Microsoft Edge.

Il existe des cas d’utilisation légitimes pour lesquels ces restrictions constituent des obstacles. Échelle ! Dans ces situations, nous vous recommandons de placer le code qui doit accéder à des ressources externes dans un « iframe utilitaire » utilisant Visualforce. Voici un exemple de cette technique.
<aura:component ...>
    <aura:attribute name="message" type="String"/>
    <aura:attribute name="vfHost" type="String"/>

    <!-- Input field for message "data" -->
    <lightning:input type="text" label="Message:"
        value="{!v.message}"/>

    <lightning:button label="Send to Visualforce"
        onclick="{!c.sendToVF}"/>

    <!-- The Visualforce page to send data to -->
    <iframe aura:id="vfFrame"
     src="{!'https://' + v.vfHost + '/apex/myvfpage'}"/>

</aura:component>

La page Visualforce fait le travail qui n’est pas autorisé dans les composants Aura. Vous pouvez transmettre des messages (requêtes et réponses) entre l’iframe Visualforce et votre composant Aura à l’aide de l’API window.postMessage() dans du code JavaScript que vous ajoutez à votre page Visualforce et au contrôleur de votre composant.

Pour en savoir plus, notamment pour voir un fragment de code nettement plus complet, lisez Communicating Between Lightning Components and Visualforce Pages sur le blog des développeurs Salesforce.